fix(grid-actions): grid editing and pinning actions fixed

kdinev · kdinev · commit 264db8544c5f · 2025-11-11T16:32:42.000+02:00
diff --git a/projects/igniteui-angular-elements/src/analyzer/elements.config.ts b/projects/igniteui-angular-elements/src/analyzer/elements.config.ts
@@ -1,7 +1,8 @@
 import { IgxColumnComponent, IgxColumnGroupComponent, IgxColumnLayoutComponent, IgxGridActionsBaseDirective, IgxGridComponent, IgxGridEditingActionsComponent, IgxGridPinningActionsComponent, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleComponent, IgxHierarchicalGridComponent, IgxPivotDataSelectorComponent, IgxPivotGridComponent, IgxRowIslandComponent, IgxToolbarToken, IgxTreeGridComponent } from 'igniteui-angular/grids';
 import { IgxGridStateComponent } from "../lib/state.component";
-import { IgxActionStripComponent, IgxActionStripToken } from 'igniteui-angular/action-strip';
+import { IgxActionStripComponent } from 'igniteui-angular/action-strip';
 import { IgxPaginatorComponent, IgxPaginatorToken } from 'igniteui-angular/paginator';
+import { IgxActionStripToken } from 'igniteui-angular/core';
 
 export const registerComponents = [
   IgxGridComponent,
diff --git a/projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.ts b/projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.ts
@@ -12,17 +12,17 @@ import {
     ChangeDetectorRef,
     AfterViewInit,
     ElementRef,
-    booleanAttribute
+    booleanAttribute,
+    AfterContentInit
 } from '@angular/core';
 
 
-import { ActionStripResourceStringsEN, CloseScrollStrategy, getCurrentResourceStrings, IActionStripResourceStrings, OverlaySettings } from 'igniteui-angular/core';
+import { ActionStripResourceStringsEN, CloseScrollStrategy, getCurrentResourceStrings, IActionStripResourceStrings, IgxActionStripActionsToken, IgxActionStripToken, OverlaySettings } from 'igniteui-angular/core';
 import { IgxIconComponent } from 'igniteui-angular/icon';
 import { IgxToggleActionDirective } from 'igniteui-angular/directives';
 import { IgxRippleDirective } from 'igniteui-angular/directives';
 import { NgTemplateOutlet } from '@angular/common';
 import { IgxIconButtonDirective } from 'igniteui-angular/directives';
-import { IgxActionStripToken, IgxActionStripActionsToken } from './token';
 import { trackByIdentity } from 'igniteui-angular/core';
 import { IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective } from 'igniteui-angular/drop-down';
 
@@ -81,7 +81,7 @@ export class IgxActionStripMenuItemDirective {
     ],
     providers: [{ provide: IgxActionStripToken, useExisting: IgxActionStripComponent }]
 })
-export class IgxActionStripComponent implements IgxActionStripToken, AfterViewInit {
+export class IgxActionStripComponent implements IgxActionStripToken, AfterViewInit, AfterContentInit {
 
     /* blazorSuppress */
     /**
@@ -228,6 +228,21 @@ export class IgxActionStripComponent implements IgxActionStripToken, AfterViewIn
     @HostBinding('class.igx-action-strip')
     protected hostClass = 'igx-action-strip';
 
+    /**
+     * @hidden
+     * @internal
+     */
+    public ngAfterContentInit() {
+        this.actionButtons.forEach(button => {
+            button.strip = this;
+        });
+        this.actionButtons.changes.subscribe(() => {
+            this.actionButtons.forEach(button => {
+                button.strip = this;
+            });
+        });
+    }
+
     /**
      * @hidden
      * @internal
diff --git a/projects/igniteui-angular/action-strip/src/action-strip/public_api.ts b/projects/igniteui-angular/action-strip/src/action-strip/public_api.ts
@@ -1,7 +1,6 @@
 import { IgxActionStripComponent, IgxActionStripMenuItemDirective } from './action-strip.component';
 
 export { IgxActionStripComponent, IgxActionStripMenuItemDirective } from './action-strip.component';
-export { IgxActionStripToken } from './token';
 
 /* Action-strip outside of grid directives collection for ease-of-use import in standalone components scenario */
 export const IGX_ACTION_STRIP_DIRECTIVES = [
diff --git a/projects/igniteui-angular/core/src/grid-column-actions/token.ts b/projects/igniteui-angular/core/src/grid-column-actions/token.ts
@@ -1,9 +1,10 @@
-import { OverlaySettings } from 'igniteui-angular/core';
-import { QueryList } from '@angular/core';
+import { ChangeDetectorRef, QueryList } from '@angular/core';
+import { OverlaySettings } from '../services/overlay/utilities';
 
 /* csSuppress */
 /** @hidden @internal */
 export abstract class IgxActionStripToken {
+    public abstract cdr: ChangeDetectorRef
     public abstract context: any;
     public abstract menuOverlaySettings: OverlaySettings;
     public abstract get hideOnRowLeave(): boolean;
diff --git a/projects/igniteui-angular/core/src/public_api.ts b/projects/igniteui-angular/core/src/public_api.ts
@@ -9,6 +9,9 @@ export * from './core/edit-provider';
 export * from './core/touch';
 export * from './core/touch-annotations';
 
+// Grid actions tokens
+export * from './grid-column-actions/token';
+
 // Date common
 export * from './date-common/public_api';
 
diff --git a/projects/igniteui-angular/grids/src/grids/grid-actions/grid-actions-base.directive.ts b/projects/igniteui-angular/grids/src/grids/grid-actions/grid-actions-base.directive.ts
@@ -2,7 +2,7 @@ import { IgxGridActionButtonComponent } from './grid-action-button.component';
 import { Directive, Input, AfterViewInit, QueryList, ViewChildren, IterableDiffers, booleanAttribute } from '@angular/core';
 import { IgxIconService } from 'igniteui-angular/icon';
 import { IgxRowDirective } from '../row.directive';
-import { IgxActionStripComponent } from 'igniteui-angular/action-strip';
+import { IgxActionStripToken } from 'igniteui-angular/core';
 
 /* blazorElement */
 /* contentParent: ActionStrip */
@@ -31,7 +31,7 @@ export class IgxGridActionsBaseDirective implements AfterViewInit {
     public asMenuItems = false;
 
     /** @hidden @internal **/
-    public strip: IgxActionStripComponent;
+    public strip: IgxActionStripToken;
 
     /**
      * @hidden
diff --git a/projects/igniteui-angular/grids/src/grids/grid-actions/grid-editing-actions.component.ts b/projects/igniteui-angular/grids/src/grids/grid-actions/grid-editing-actions.component.ts
@@ -2,7 +2,7 @@ import { Component, HostBinding, Input, booleanAttribute } from '@angular/core';
 import { IgxGridActionsBaseDirective } from './grid-actions-base.directive';
 import { addRow, addChild } from '@igniteui/material-icons-extended';
 import { IgxGridActionButtonComponent } from './grid-action-button.component';
-import { showMessage } from 'igniteui-angular/core';
+import { IgxActionStripActionsToken, showMessage } from 'igniteui-angular/core';
 
 
 /* blazorElement */
@@ -17,10 +17,9 @@ import { showMessage } from 'igniteui-angular/core';
 @Component({
     selector: 'igx-grid-editing-actions',
     templateUrl: 'grid-editing-actions.component.html',
-    providers: [{ provide: IgxGridActionsBaseDirective, useExisting: IgxGridEditingActionsComponent }],
+    providers: [{ provide: IgxActionStripActionsToken, useExisting: IgxGridEditingActionsComponent }],
     imports: [IgxGridActionButtonComponent]
 })
-
 export class IgxGridEditingActionsComponent extends IgxGridActionsBaseDirective {
 
     /**
diff --git a/projects/igniteui-angular/grids/src/grids/grid-actions/grid-pinning-actions.component.ts b/projects/igniteui-angular/grids/src/grids/grid-actions/grid-pinning-actions.component.ts
@@ -2,6 +2,7 @@ import { Component, HostBinding } from '@angular/core';
 import { IgxGridActionsBaseDirective } from './grid-actions-base.directive';
 import { pinLeft, unpinLeft, jumpDown, jumpUp } from '@igniteui/material-icons-extended';
 import { IgxGridActionButtonComponent } from './grid-action-button.component';
+import { IgxActionStripActionsToken } from 'igniteui-angular/core';
 
 /* blazorElement */
 /* wcElementTag: igc-grid-pinning-actions */
@@ -15,7 +16,7 @@ import { IgxGridActionButtonComponent } from './grid-action-button.component';
 @Component({
     selector: 'igx-grid-pinning-actions',
     templateUrl: 'grid-pinning-actions.component.html',
-    providers: [{ provide: IgxGridActionsBaseDirective, useExisting: IgxGridPinningActionsComponent }],
+    providers: [{ provide: IgxActionStripActionsToken, useExisting: IgxGridPinningActionsComponent }],
     imports: [IgxGridActionButtonComponent]
 })
 
diff --git a/projects/igniteui-angular/grids/src/grids/grid-base.directive.ts b/projects/igniteui-angular/grids/src/grids/grid-base.directive.ts
@@ -88,7 +88,8 @@ import {
     EntityType,
     ISortingOptions,
     ISummaryExpression,
-    GridSummaryCalculationMode
+    GridSummaryCalculationMode,
+    IgxActionStripToken
 } from 'igniteui-angular/core';
 import { IgcTrialWatermark } from 'igniteui-trial-watermark';
 import { Subject, pipe, fromEvent, animationFrameScheduler, merge } from 'rxjs';
@@ -214,7 +215,6 @@ import { IgxGridCellComponent } from './cell.component';
 import { IgxGridValidationService } from './grid/grid-validation.service';
 import { getUUID } from './common/random';
 import { IgxSnackbarComponent } from 'igniteui-angular/snackbar';
-import { IgxActionStripToken } from 'igniteui-angular/action-strip';
 
 interface IMatchInfoCache {
     row: any;
diff --git a/projects/igniteui-angular/grids/src/grids/hierarchical-grid/hierarchical-grid.component.ts b/projects/igniteui-angular/grids/src/grids/hierarchical-grid/hierarchical-grid.component.ts
@@ -59,8 +59,7 @@ import { IgxButtonDirective, IgxForOfScrollSyncService, IgxForOfSyncService, Igx
 import { IgxCircularProgressBarComponent } from 'igniteui-angular/progressbar';
 import { IgxSnackbarComponent } from 'igniteui-angular/snackbar';
 import { IgxIconComponent } from 'igniteui-angular/icon';
-import { EntityType, FieldType, IFilteringExpressionsTree, flatten } from 'igniteui-angular/core';
-import { IgxActionStripToken } from 'igniteui-angular/action-strip';
+import { EntityType, FieldType, IFilteringExpressionsTree, IgxActionStripToken, flatten } from 'igniteui-angular/core';
 import { IgxPaginatorToken } from 'igniteui-angular/paginator';
 
 let NEXT_ID = 0;
diff --git a/projects/igniteui-angular/grids/src/grids/hierarchical-grid/row-island.component.ts b/projects/igniteui-angular/grids/src/grids/hierarchical-grid/row-island.component.ts
@@ -33,7 +33,7 @@ import { IgxGridSummaryService } from '../summaries/grid-summary.service';
 import { IgxHierarchicalGridBaseDirective } from './hierarchical-grid-base.directive';
 import { IgxHierarchicalGridNavigationService } from './hierarchical-grid-navigation.service';
 import { IgxGridSelectionService } from '../selection/selection.service';
-import { IgxFlatTransactionFactory, IgxOverlayService, PlatformUtil } from 'igniteui-angular/core';
+import { IgxActionStripToken, IgxFlatTransactionFactory, IgxOverlayService, PlatformUtil } from 'igniteui-angular/core';
 import { first, filter, takeUntil, pluck } from 'rxjs/operators';
 import { IgxColumnComponent } from '../columns/column.component';
 import { ISearchInfo } from '../common/events';
@@ -44,7 +44,6 @@ import { IgxGridToolbarDirective, IgxGridToolbarTemplateContext } from '../toolb
 import { IGridCreatedEventArgs } from './events';
 import { IgxGridValidationService } from '../grid/grid-validation.service';
 import { IgxPaginatorComponent, IgxPaginatorDirective } from 'igniteui-angular/paginator';
-import { IgxActionStripToken } from 'igniteui-angular/action-strip';
 import { IForOfState, IgxTextHighlightService } from 'igniteui-angular/directives';
 
 /* blazorCopyInheritedMembers */
diff --git a/projects/igniteui-angular/migrations/update-21_0_0/index.ts b/projects/igniteui-angular/migrations/update-21_0_0/index.ts
@@ -82,10 +82,6 @@ const ENTRY_POINT_MAP = new Map<string, string>([
     // Action Strip
     ['IgxActionStripComponent', 'action-strip'],
     ['IgxActionStripModule', 'action-strip'],
-    ['IgxGridActionButtonComponent', 'action-strip'],
-    ['IgxGridActionsBaseDirective', 'action-strip'],
-    ['IgxGridEditingActionsComponent', 'action-strip'],
-    ['IgxGridPinningActionsComponent', 'action-strip'],
 
     // Avatar
     ['IgxAvatarComponent', 'avatar'],
@@ -278,6 +274,10 @@ const ENTRY_POINT_MAP = new Map<string, string>([
     ['SortingIndexFilteringStrategy', 'grids'],
     ['IgxGridEditingActions', 'grids'], // Grid actions moved to grids
     ['IgxGridPinningActions', 'grids'], // Grid actions moved to grids
+    ['IgxGridActionButtonComponent', 'grids'], // Grid actions moved to grids
+    ['IgxGridActionsBaseDirective', 'grids'], // Grid actions moved to grids
+    ['IgxGridEditingActionsComponent', 'grids'], // Grid actions moved to grids
+    ['IgxGridPinningActionsComponent', 'grids'], // Grid actions moved to grids
 
     // Icon
     ['IgxIconComponent', 'icon'],
diff --git a/projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts b/projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.ts
@@ -208,6 +208,8 @@ export class IgxRadioGroupDirective implements ControlValueAccessor, OnDestroy,
     public cssClass = 'igx-radio-group';
 
     /**
+     * @hidden
+     * @internal
      * Sets vertical alignment to the radio group, if `alignment` is set to `vertical`.
      * By default the alignment is horizontal.
      *
diff --git a/src/app/action-strip/action-strip.sample.html b/src/app/action-strip/action-strip.sample.html
@@ -15,6 +15,7 @@
                 [style.--ig-size]="'var(--ig-size-' + sizeSelector.size + ')'"
             >
                 <igx-icon (click)="doSomeAction()">alarm</igx-icon>
+                <button igxButton="outlined" (click)="doSomeAction()">Action</button>
             </igx-action-strip>
         }
     </div>
diff --git a/src/app/action-strip/action-strip.sample.ts b/src/app/action-strip/action-strip.sample.ts
@@ -71,6 +71,7 @@ class User {
         IgxCellTemplateDirective,
         IgxGridEditingActionsComponent,
         IgxActionStripMenuItemDirective,
+        IgxButtonDirective,
         SizeSelectorComponent
     ]
 })
