fix(igxGrid): Add handling for outlet in case actionstrip is added post init (#17162)

Author: MayaKirova

projects/igniteui-angular/grids/grid/src/grid-add-row.spec.ts

@@ -4,7 +4,8 @@ import { TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing';
 import { DebugElement } from '@angular/core';
 import { GridFunctions, GridSummaryFunctions } from '../../../test-utils/grid-functions.spec';
 import {
-    IgxAddRowComponent, IgxGridRowEditingDefinedColumnsComponent, IgxGridRowEditingTransactionComponent
+    IgxAddRowComponent, IgxGridRowEditingDefinedColumnsComponent, IgxGridRowEditingTransactionComponent,
+    GridDynamicActionStripComponent
 } from '../../../test-utils/grid-samples.spec';
 
 import { By } from '@angular/platform-browser';
@@ -45,7 +46,8 @@ describe('IgxGrid - Row Adding #grid', () => {
                 IgxGridRowEditingTransactionComponent,
                 IgxGridRowEditingDefinedColumnsComponent,
                 ColumnLayoutTestComponent,
-                DefaultGridMasterDetailComponent
+                DefaultGridMasterDetailComponent,
+                GridDynamicActionStripComponent
             ],
             providers: [
                 IgxGridMRLNavigationService
@@ -1121,4 +1123,32 @@ describe('IgxGrid - Row Adding #grid', () => {
             expect(grid.rowChangesCount).toEqual(3);
         });
     });
+
+    describe('ActionStrip - Dynamic Addition', () => {
+        beforeEach(() => {
+            fixture = TestBed.createComponent(GridDynamicActionStripComponent);
+            fixture.detectChanges();
+            grid = fixture.componentInstance.grid;
+        });
+
+        it('Should set outlet for actionstrip menu when added post-init', async () => {
+            // Verify no actionstrip initially
+            expect(fixture.componentInstance.actionStrip).toBeUndefined();
+            expect(grid.actionStrip).toBeUndefined();
+
+            // Add the actionstrip dynamically
+            fixture.componentInstance.showActionStrip = true;
+            fixture.detectChanges();
+            await wait(16);
+
+            // Get reference to the actionstrip
+            actionStrip = fixture.componentInstance.actionStrip;
+            expect(actionStrip).toBeDefined();
+            expect(grid.actionStrip).toBeDefined();
+
+            // Verify that the outlet is properly set
+            expect(actionStrip.menuOverlaySettings.outlet).toBeDefined();
+            expect(actionStrip.menuOverlaySettings.outlet).toBe(grid.outlet);
+        });
+    });
 });

projects/igniteui-angular/grids/grid/src/grid-base.directive.ts

@@ -4059,6 +4059,13 @@ export abstract class IgxGridBaseDirective implements GridType,
         this.paginationComponents.changes.pipe(takeUntil(this.destroy$)).subscribe(() => {
             this.setUpPaginator();
         });
+
+        this.actionStripComponents.changes.pipe(takeUntil(this.destroy$)).subscribe(() => {
+            if (this.actionStrip) {
+                this.actionStrip.menuOverlaySettings.outlet = this.outlet;
+            }
+        });
+
         if (this.actionStrip) {
             this.actionStrip.menuOverlaySettings.outlet = this.outlet;
         }

projects/igniteui-angular/test-utils/grid-samples.spec.ts

@@ -2419,6 +2419,54 @@ export class IgxAddRowComponent implements OnInit {
     }
 }
 
+@Component({
+    template: `
+<igx-grid #grid [data]="data" [width]="'800px'" [height]="'500px'"
+    [rowEditable]="true" [primaryKey]="'ID'">
+    @for (c of columns; track c.field) {
+        <igx-column [field]="c.field" [header]="c.field" [width]="c.width"></igx-column>
+    }
+
+    @if (showActionStrip) {
+        <igx-action-strip #actionStrip>
+            <igx-grid-editing-actions [addRow]='true'></igx-grid-editing-actions>
+        </igx-action-strip>
+    }
+</igx-grid>
+`,
+    imports: [
+        IgxGridComponent,
+        IgxColumnComponent,
+        IgxActionStripComponent,
+        IgxGridEditingActionsComponent
+    ]
+})
+export class GridDynamicActionStripComponent implements OnInit {
+    @ViewChild('actionStrip', { read: IgxActionStripComponent })
+    public actionStrip: IgxActionStripComponent;
+
+    @ViewChild('grid', { read: IgxGridComponent, static: true })
+    public grid: IgxGridComponent;
+
+    public data: any[];
+    public columns: any[];
+    public showActionStrip = false;
+
+    public ngOnInit() {
+        this.columns = [
+            { field: 'ID', width: '200px' },
+            { field: 'CompanyName', width: '200px' },
+            { field: 'ContactName', width: '200px' }
+        ];
+
+        this.data = [
+            { ID: 'ALFKI', CompanyName: 'Alfreds Futterkiste', ContactName: 'Maria Anders' },
+            { ID: 'ANATR', CompanyName: 'Ana Trujillo Emparedados y helados', ContactName: 'Ana Trujillo' },
+            { ID: 'ANTON', CompanyName: 'Antonio Moreno Taquería', ContactName: 'Antonio Moreno' }
+        ];
+    }
+}
+
 @Component({
     template: GridTemplateStrings.declareGrid(` [hideGroupedColumns]="true"`, '', ColumnDefinitions.exportGroupedDataColumns),
     imports: [IgxGridComponent, IgxColumnComponent]