diff --git a/projects/igniteui-angular/src/lib/action-strip/action-strip.component.html b/projects/igniteui-angular/src/lib/action-strip/action-strip.component.html index a3d340f7add..078b2ef753d 100644 --- a/projects/igniteui-angular/src/lib/action-strip/action-strip.component.html +++ b/projects/igniteui-angular/src/lib/action-strip/action-strip.component.html @@ -1,4 +1,20 @@ + + more_vert + + +
+ +
+
+
+
+ + + + +
- + +
\ No newline at end of file diff --git a/projects/igniteui-angular/src/lib/action-strip/action-strip.component.ts b/projects/igniteui-angular/src/lib/action-strip/action-strip.component.ts index a3328b4e419..b1cb63ec8d3 100644 --- a/projects/igniteui-angular/src/lib/action-strip/action-strip.component.ts +++ b/projects/igniteui-angular/src/lib/action-strip/action-strip.component.ts @@ -1,4 +1,14 @@ -import { Component, NgModule, Input, ViewContainerRef, Renderer2, HostBinding, ViewChild, ContentChild } from '@angular/core'; +import { Component, + NgModule, + Input, + ViewContainerRef, + Renderer2, + HostBinding, + ContentChild, + ContentChildren, + TemplateRef, + QueryList, + Directive } from '@angular/core'; import { CommonModule } from '@angular/common'; import { IgxGridActionsComponent } from './grid-actions/grid-actions.component'; import { IgxDropDownModule } from '../drop-down/index'; @@ -9,6 +19,15 @@ import { IgxGridEditingActionsComponent } from './grid-actions/grid-editing-acti let NEXT_ID = 0; +@Directive({ + selector: '[igxActionStripMenuItem]' +}) +export class IgxActionStripMenuItemDirective { + constructor( + public templateRef: TemplateRef + ) { } +} + /** * Action Strip provides templatable area for one or more actions. * @@ -38,7 +57,7 @@ let NEXT_ID = 0; export class IgxActionStripComponent { constructor( private _viewContainer: ViewContainerRef, - private renderer: Renderer2) {} + private renderer: Renderer2) { } /** * An @Input property that set the visibility of the Action Strip. @@ -69,11 +88,24 @@ export class IgxActionStripComponent { @HostBinding('class.igx-action-strip') public cssClass = 'igx-action-strip'; + /** + * Specifies if the items into the Action Strip to be shown as menu. + * + * @example + * ```html + * + * + * + * + */ + @Input() isMenu = false; + public context; - @ContentChild(IgxGridActionsComponent, { static: true }) public gridActions: IgxGridActionsComponent; - @ContentChild(IgxGridPinningActionsComponent, { static: true }) public gridPinningActions: IgxGridPinningActionsComponent; - @ContentChild(IgxGridEditingActionsComponent, { static: true }) public gridEditingActions: IgxGridEditingActionsComponent; + @ContentChild(IgxGridActionsComponent, { static: false }) public gridActions: IgxGridActionsComponent; + @ContentChild(IgxGridPinningActionsComponent, { static: false }) public gridPinningActions: IgxGridPinningActionsComponent; + @ContentChild(IgxGridEditingActionsComponent, { static: false }) public gridEditingActions: IgxGridEditingActionsComponent; + @ContentChildren(IgxActionStripMenuItemDirective) public menuItems: QueryList; show(context) { this.context = context; @@ -105,8 +137,18 @@ export class IgxActionStripComponent { * @hidden */ @NgModule({ - declarations: [IgxActionStripComponent, IgxGridActionsComponent, IgxGridPinningActionsComponent, IgxGridEditingActionsComponent], - exports: [IgxActionStripComponent, IgxGridActionsComponent, IgxGridPinningActionsComponent, IgxGridEditingActionsComponent], + declarations: [ + IgxActionStripComponent, + IgxActionStripMenuItemDirective, + IgxGridPinningActionsComponent, + IgxGridEditingActionsComponent + ], + exports: [ + IgxActionStripComponent, + IgxActionStripMenuItemDirective, + IgxGridPinningActionsComponent, + IgxGridEditingActionsComponent + ], imports: [CommonModule, IgxDropDownModule, IgxToggleModule, IgxIconModule] }) export class IgxActionStripModule { } diff --git a/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-actions.component.html b/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-actions.component.html index 60cf515c425..b66ffc51e50 100644 --- a/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-actions.component.html +++ b/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-actions.component.html @@ -1,5 +1,5 @@ more_vert - +
{{ item.field }} diff --git a/src/app/action-strip/action-strip.sample.html b/src/app/action-strip/action-strip.sample.html index 880f576c9d1..d20b559608e 100644 --- a/src/app/action-strip/action-strip.sample.html +++ b/src/app/action-strip/action-strip.sample.html @@ -23,7 +23,7 @@
+ [rowEditable]="true" [primaryKey]="'ID'"> @@ -33,9 +33,9 @@ - - - + + +