refactor(*): migrate DI from constructors to inject() API (#16075)

Author: IMinchev64

CHANGELOG.md

@@ -63,6 +63,11 @@ All notable changes for each version of this project will be documented in this
         
 ### Breaking Changes
 
+#### Dependency Injection Refactor
+- All internal DI now uses the `inject()` API across `igniteui-angular` (no more constructor DI in library code).
+- If you extend our components/services or call their constructors directly, remove DI params and switch to `inject()` (e.g., `protected foo = inject(FooService);`).
+- App usage via templates remains the same; no action needed unless you subclass/override our types.
+
 #### Multiple Entry Points Support
 
 The library now supports multiple entry points for better tree-shaking and code splitting. While the main entry point (`igniteui-angular`) remains fully backwards compatible by re-exporting all granular entry points, we recommend migrating to the new entry points for optimal bundle sizes.

projects/igniteui-angular-elements/src/analyzer/elements.config.ts

@@ -46,7 +46,7 @@ export var registerConfig = [
       IgxRowIslandComponent,
     ],
     contentQueries: [],
-    additionalProperties: [],
+    additionalProperties: [{ name: "cdr", writable: true }],
     methods: ["show", "hide"],
     boolProps: ["hidden"],
     provideAs: IgxActionStripToken,
@@ -65,6 +65,7 @@ export var registerConfig = [
     ],
     contentQueries: [],
     additionalProperties: [
+      { name: "grid", writable: true },
       { name: "selected", writable: true },
       { name: "index" },
       { name: "visibleIndex" },
@@ -75,7 +76,6 @@ export var registerConfig = [
       { name: "level" },
       { name: "filteringExpressionsTree" },
       { name: "parent", writable: true },
-      { name: "grid", writable: true },
       { name: "topLevelParent" },
     ],
     methods: ["pin", "unpin", "move", "autosize"],
@@ -130,13 +130,13 @@ export var registerConfig = [
       { name: "childColumns" },
       { name: "columnGroup" },
       { name: "columnLayout" },
+      { name: "grid", writable: true },
       { name: "index" },
       { name: "visibleIndex" },
       { name: "columnLayoutChild" },
       { name: "level" },
       { name: "filteringExpressionsTree" },
       { name: "parent", writable: true },
-      { name: "grid", writable: true },
       { name: "topLevelParent" },
     ],
     methods: ["pin", "unpin", "move", "autosize"],
@@ -187,12 +187,12 @@ export var registerConfig = [
       { name: "selected", writable: true },
       { name: "childColumns" },
       { name: "columnGroup" },
+      { name: "grid", writable: true },
       { name: "index" },
       { name: "columnLayoutChild" },
       { name: "level" },
       { name: "filteringExpressionsTree" },
       { name: "parent", writable: true },
-      { name: "grid", writable: true },
       { name: "topLevelParent" },
     ],
     methods: ["pin", "unpin", "move", "autosize"],
@@ -252,6 +252,10 @@ export var registerConfig = [
     additionalProperties: [
       { name: "groupsRecords" },
       { name: "selectedCells" },
+      { name: "validation" },
+      { name: "gridAPI" },
+      { name: "cdr" },
+      { name: "navigation", writable: true },
       { name: "shouldGenerate", writable: true },
       { name: "rowList" },
       { name: "dataRowList" },
@@ -261,10 +265,6 @@ export var registerConfig = [
       { name: "lastSearchInfo" },
       { name: "filteredData" },
       { name: "filteredSortedData" },
-      { name: "validation" },
-      { name: "gridAPI" },
-      { name: "cdr" },
-      { name: "navigation", writable: true },
       { name: "virtualizationState" },
       { name: "nativeElement" },
       { name: "defaultRowHeight" },
@@ -550,6 +550,8 @@ export var registerConfig = [
       { name: "selectedCells" },
       { name: "gridAPI", writable: true },
       { name: "navigation", writable: true },
+      { name: "validation" },
+      { name: "cdr" },
       { name: "shouldGenerate", writable: true },
       { name: "rowList" },
       { name: "dataRowList" },
@@ -559,8 +561,6 @@ export var registerConfig = [
       { name: "lastSearchInfo" },
       { name: "filteredData" },
       { name: "filteredSortedData" },
-      { name: "validation" },
-      { name: "cdr" },
       { name: "virtualizationState" },
       { name: "nativeElement" },
       { name: "defaultRowHeight" },
@@ -733,17 +733,17 @@ export var registerConfig = [
       },
     ],
     additionalProperties: [
-      { name: "dimensionsSortingExpressions" },
+      { name: "gridAPI" },
       { name: "navigation", writable: true },
+      { name: "dimensionsSortingExpressions" },
       { name: "allDimensions" },
+      { name: "validation" },
+      { name: "cdr" },
       { name: "rowList" },
       { name: "dataRowList" },
       { name: "lastSearchInfo" },
       { name: "filteredData" },
       { name: "filteredSortedData" },
-      { name: "validation" },
-      { name: "gridAPI" },
-      { name: "cdr" },
       { name: "virtualizationState" },
       { name: "nativeElement" },
       { name: "defaultRowHeight" },
@@ -865,12 +865,12 @@ export var registerConfig = [
       { name: "rowIslandAPI", writable: true },
       { name: "gridAPI", writable: true },
       { name: "navigation", writable: true },
+      { name: "validation" },
+      { name: "cdr" },
       { name: "shouldGenerate", writable: true },
       { name: "rowList" },
       { name: "dataRowList" },
       { name: "transactions" },
-      { name: "validation" },
-      { name: "cdr" },
       { name: "nativeElement" },
       { name: "defaultRowHeight" },
       { name: "columns" },
@@ -1009,6 +1009,10 @@ export var registerConfig = [
       { name: "processedRootRecords", writable: true },
       { name: "processedRecords", writable: true },
       { name: "selectedCells" },
+      { name: "validation" },
+      { name: "gridAPI" },
+      { name: "cdr" },
+      { name: "navigation", writable: true },
       { name: "shouldGenerate", writable: true },
       { name: "rowList" },
       { name: "dataRowList" },
@@ -1017,10 +1021,6 @@ export var registerConfig = [
       { name: "lastSearchInfo" },
       { name: "filteredData" },
       { name: "filteredSortedData" },
-      { name: "validation" },
-      { name: "gridAPI" },
-      { name: "cdr" },
-      { name: "navigation", writable: true },
       { name: "virtualizationState" },
       { name: "nativeElement" },
       { name: "defaultRowHeight" },

projects/igniteui-angular-elements/src/app/wrapper/wrapper.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, QueryList, TemplateRef, ViewChildren } from '@angular/core';
+import { ChangeDetectorRef, Component, QueryList, TemplateRef, ViewChildren, inject } from '@angular/core';
 import { Subject } from 'rxjs';
 import { TemplateRefWrapper } from './template-ref-wrapper';
 
@@ -13,6 +13,8 @@ type TemplateFunction = (arg: any) => TemplateResult;
     imports: []
 })
 export class TemplateWrapperComponent {
+    private cdr = inject(ChangeDetectorRef);
+
 
     public templateFunctions: TemplateFunction[] = [];
     public templateRendered = new Subject<HTMLElement>();
@@ -25,8 +27,6 @@ export class TemplateWrapperComponent {
      */
     @ViewChildren(TemplateRef)
     public templateRefs: QueryList<TemplateRef<any>>;
-
-    constructor(private cdr: ChangeDetectorRef) { }
 
     protected litRender(container: HTMLElement, templateFunc: (arg: any) => TemplateResult, arg: any) {
         const part = render(templateFunc(arg), container);

projects/igniteui-angular-elements/src/lib/icon.broadcast.service.ts

@@ -1,4 +1,4 @@
-import { Injectable, Optional } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { PlatformUtil } from 'igniteui-angular/core';
 import { IconMeta, IgxIconService } from 'igniteui-angular/icon';
 
@@ -25,12 +25,12 @@ export interface BroadcastIconsChangeMessage {
 /** @hidden @internal **/
 @Injectable()
 export class IgxIconBroadcastService {
+    protected _iconService = inject(IgxIconService);
+    private _platformUtil = inject(PlatformUtil, { optional: true });
+
     private iconBroadcastChannel: BroadcastChannel | null;
 
-    constructor(
-        protected _iconService: IgxIconService,
-        @Optional() private _platformUtil: PlatformUtil
-    ) {
+    constructor() {
         if (this._platformUtil?.isBrowser) {
             this.create();
 

projects/igniteui-angular-elements/src/lib/state.component.ts

@@ -1,4 +1,4 @@
-import { Component, EnvironmentInjector, EventEmitter, Inject, Injector, Output, ViewContainerRef } from '@angular/core';
+import { Component, EventEmitter, Output, inject } from '@angular/core';
 import { IFilteringExpressionsTree, IGroupingState, IPagingState, ISortingExpression } from 'igniteui-angular/core';
 import { GridFeatures, GridSelectionRange, GridType, IColumnState, IGridStateCollection, IGX_GRID_BASE, IgxGridStateBaseDirective, IPinningConfig, IPivotConfiguration } from 'igniteui-angular/grids/core';
 
@@ -44,15 +44,7 @@ export interface IGridStateInfo {
     standalone: true
 })
 export class IgxGridStateComponent extends IgxGridStateBaseDirective {
-
-    constructor(
-        @Inject(IGX_GRID_BASE) grid: GridType,
-        protected override viewRef: ViewContainerRef, protected  override envInjector: EnvironmentInjector,
-        protected override injector: Injector,
-        ) {
-            super(grid, viewRef, envInjector, injector);
-        }
-
+    public override grid = inject<GridType>(IGX_GRID_BASE);
     /**
      * Restores grid features' state based on the IGridStateInfo object passed as an argument.
      * @param state object to restore state from.

projects/igniteui-angular/accordion/src/accordion/accordion.component.ts

@@ -1,7 +1,4 @@
-import {
-    AfterContentInit, AfterViewInit, ChangeDetectorRef, Component, ContentChildren, EventEmitter,
-    HostBinding, Input, OnDestroy, Output, QueryList, booleanAttribute
-} from '@angular/core';
+import { AfterContentInit, AfterViewInit, ChangeDetectorRef, Component, ContentChildren, EventEmitter, HostBinding, Input, OnDestroy, Output, QueryList, booleanAttribute, inject } from '@angular/core';
 import { fromEvent, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { ACCORDION_NAVIGATION_KEYS } from 'igniteui-angular/core';
@@ -57,6 +54,8 @@ let NEXT_ID = 0;
     standalone: true
 })
 export class IgxAccordionComponent implements AfterContentInit, AfterViewInit, OnDestroy {
+    private cdr = inject(ChangeDetectorRef);
+
     /**
      * Get/Set the `id` of the accordion component.
      * Default value is `"igx-accordion-0"`;
@@ -218,8 +217,6 @@ export class IgxAccordionComponent implements AfterContentInit, AfterViewInit, O
     private _enabledPanels!: IgxExpansionPanelComponent[];
     private _singleBranchExpand = false;
 
-    constructor(private cdr: ChangeDetectorRef) { }
-
     /** @hidden @internal **/
     public ngAfterContentInit(): void {
         this.updatePanelsAnimation();

projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.ts

@@ -13,7 +13,8 @@ import {
     AfterViewInit,
     ElementRef,
     booleanAttribute,
-    AfterContentInit
+    AfterContentInit,
+    inject
 } from '@angular/core';
 
 
@@ -31,7 +32,7 @@ import { IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownItemNavigati
     standalone: true
 })
 export class IgxActionStripMenuItemDirective {
-    constructor(public templateRef: TemplateRef<any>) {}
+    public templateRef = inject<TemplateRef<any>>(TemplateRef);
 }
 
 /* blazorElement */
@@ -82,6 +83,11 @@ export class IgxActionStripMenuItemDirective {
     providers: [{ provide: IgxActionStripToken, useExisting: IgxActionStripComponent }]
 })
 export class IgxActionStripComponent implements IgxActionStripToken, AfterViewInit, AfterContentInit {
+    private _viewContainer = inject(ViewContainerRef);
+    private renderer = inject(Renderer2);
+    protected el = inject(ElementRef);
+    public cdr = inject(ChangeDetectorRef);
+
 
     /* blazorSuppress */
     /**
@@ -186,14 +192,6 @@ export class IgxActionStripComponent implements IgxActionStripToken, AfterViewIn
     private _resourceStrings = getCurrentResourceStrings(ActionStripResourceStringsEN);
     private _originalParent!: HTMLElement;
 
-    constructor(
-        private _viewContainer: ViewContainerRef,
-        private renderer: Renderer2,
-        protected el: ElementRef,
-        /** @hidden @internal **/
-        public cdr: ChangeDetectorRef,
-    ) { }
-
     /**
      * Menu Items list.
      *

projects/igniteui-angular/avatar/src/avatar/avatar.component.ts

@@ -1,13 +1,5 @@
 import { NgTemplateOutlet } from '@angular/common';
-import {
-    Component,
-    ElementRef,
-    HostBinding,
-    Input,
-    OnInit,
-    TemplateRef,
-    ViewChild
-} from '@angular/core';
+import { Component, ElementRef, HostBinding, Input, OnInit, TemplateRef, ViewChild, inject } from '@angular/core';
 
 import { normalizeURI } from 'igniteui-angular/core';
 import { IgxIconComponent } from 'igniteui-angular/icon';
@@ -56,6 +48,8 @@ export type IgxAvatarType = (typeof IgxAvatarType)[keyof typeof IgxAvatarType];
     imports: [IgxIconComponent, NgTemplateOutlet]
 })
 export class IgxAvatarComponent implements OnInit {
+    public elementRef = inject(ElementRef);
+
     /**
      * Returns the `aria-label` attribute of the avatar.
      *
@@ -332,8 +326,6 @@ export class IgxAvatarComponent implements OnInit {
         }
     }
 
-    constructor(public elementRef: ElementRef) { }
-
     /**
      * Returns the css url of the image.
      *

projects/igniteui-angular/banner/src/banner/banner.component.ts

@@ -1,13 +1,4 @@
-import {
-    Component,
-    ContentChild,
-    ElementRef,
-    EventEmitter,
-    HostBinding,
-    Input,
-    Output,
-    ViewChild
-} from '@angular/core';
+import { Component, ContentChild, ElementRef, EventEmitter, HostBinding, Input, Output, ViewChild, inject } from '@angular/core';
 
 import { IgxIconComponent } from 'igniteui-angular/icon';
 import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives';
@@ -52,6 +43,8 @@ export interface BannerCancelEventArgs extends BannerEventArgs, CancelableEventA
     imports: [IgxExpansionPanelComponent, IgxExpansionPanelBodyComponent, IgxButtonDirective, IgxRippleDirective]
 })
 export class IgxBannerComponent implements IToggleView {
+    public elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
+
     /**
      * @hidden
      */
@@ -238,8 +231,6 @@ export class IgxBannerComponent implements IToggleView {
     private _animationSettings: ToggleAnimationSettings;
     private _resourceStrings = getCurrentResourceStrings(BannerResourceStringsEN);
 
-    constructor(public elementRef: ElementRef<HTMLElement>) { }
-
     /**
      * Opens the banner
      *