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

Author: IMinchev64

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.spec.ts

@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ActionType, BroadcastIconsChangeMessage, IgxIconBroadcastService, SvgIcon,  } from './icon.broadcast.service';
-import { Component, SecurityContext } from '@angular/core';
+import { Component, SecurityContext, inject } from '@angular/core';
 import { IconMeta, IgxIconService } from 'igniteui-angular';
 import { wait } from 'igniteui-angular/src/lib/test-utils/ui-interactions.spec';
 
@@ -111,5 +111,6 @@ describe('Icon broadcast service', () => {
     providers: [IgxIconBroadcastService, IgxIconService]
 })
 export class BroadcastServiceComponent {
-    constructor(public iconBroadcast: IgxIconBroadcastService, public iconService: IgxIconService) {}
+    iconBroadcast = inject(IgxIconBroadcastService);
+    iconService = inject(IgxIconService);
 }

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/src/lib/core/utils';
 import { IgxIconService } from '../../../igniteui-angular/src/lib/icon/icon.service';
 import { IconMeta } from '../../../igniteui-angular/src/lib/icon/public_api';
@@ -26,12 +26,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, EnvironmentInjector, EventEmitter, Injector, Output, ViewContainerRef, inject } from '@angular/core';
 import { IPinningConfig, GridType, IGX_GRID_BASE}  from '../../../igniteui-angular/src/lib/grids/common/grid.interface';
 import { IFilteringExpressionsTree } from '../../../igniteui-angular/src/lib/data-operations/filtering-expressions-tree';
 import { IPagingState } from '../../../igniteui-angular/src/lib/data-operations/paging-state.interface';
@@ -50,14 +50,23 @@ export interface IGridStateInfo {
     standalone: true
 })
 export class IgxGridStateComponent extends IgxGridStateBaseDirective {
+    protected override viewRef: ViewContainerRef;
+    protected override envInjector: EnvironmentInjector;
+    protected override injector: Injector;
+
+
+    constructor() {
+            const grid = inject<GridType>(IGX_GRID_BASE);
+            const viewRef = inject(ViewContainerRef);
+            const envInjector = inject(EnvironmentInjector);
+            const injector = inject(Injector);
 
-    constructor(
-        @Inject(IGX_GRID_BASE) grid: GridType,
-        protected override viewRef: ViewContainerRef, protected  override envInjector: EnvironmentInjector,
-        protected override injector: Injector,
-        ) {
             super(grid, viewRef, envInjector, injector);
-        }
+        
+            this.viewRef = viewRef;
+            this.envInjector = envInjector;
+            this.injector = injector;
+    }
 
     /**
      * Restores grid features' state based on the IGridStateInfo object passed as an argument.

projects/igniteui-angular/src/lib/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 '../core/utils';
@@ -55,6 +52,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"`;
@@ -216,8 +215,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/src/lib/action-strip/action-strip.component.ts

@@ -1,20 +1,4 @@
-import {
-    Component,
-    Directive,
-    HostBinding,
-    Input,
-    Renderer2,
-    ViewContainerRef,
-    ContentChildren,
-    QueryList,
-    ViewChild,
-    TemplateRef,
-    AfterContentInit,
-    ChangeDetectorRef,
-    AfterViewInit,
-    ElementRef,
-    booleanAttribute
-} from '@angular/core';
+import { Component, Directive, HostBinding, Input, Renderer2, ViewContainerRef, ContentChildren, QueryList, ViewChild, TemplateRef, AfterContentInit, ChangeDetectorRef, AfterViewInit, ElementRef, booleanAttribute, inject } from '@angular/core';
 import { ActionStripResourceStringsEN, IActionStripResourceStrings } from '../core/i18n/action-strip-resources';
 import { IgxDropDownComponent } from '../drop-down/drop-down.component';
 import { CloseScrollStrategy, OverlaySettings } from '../services/public_api';
@@ -35,7 +19,7 @@ import { trackByIdentity } from '../core/utils';
     standalone: true
 })
 export class IgxActionStripMenuItemDirective {
-    constructor(public templateRef: TemplateRef<any>) {}
+    public templateRef = inject<TemplateRef<any>>(TemplateRef);
 }
 
 /* blazorElement */
@@ -86,6 +70,11 @@ export class IgxActionStripMenuItemDirective {
     providers: [{ provide: IgxActionStripToken, useExisting: IgxActionStripComponent }]
 })
 export class IgxActionStripComponent implements IgxActionStripToken, AfterContentInit, AfterViewInit {
+    private _viewContainer = inject(ViewContainerRef);
+    private renderer = inject(Renderer2);
+    protected el = inject(ElementRef);
+    public cdr = inject(ChangeDetectorRef);
+
 
     /* blazorSuppress */
     /**
@@ -191,14 +180,6 @@ export class IgxActionStripComponent implements IgxActionStripToken, AfterConten
     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/src/lib/action-strip/grid-actions/grid-actions-base.directive.ts

@@ -1,5 +1,5 @@
 import { IgxGridActionButtonComponent } from './grid-action-button.component';
-import { Directive, Input, AfterViewInit, QueryList, ViewChildren, IterableDiffers, booleanAttribute } from '@angular/core';
+import { Directive, Input, AfterViewInit, QueryList, ViewChildren, IterableDiffers, booleanAttribute, inject } from '@angular/core';
 import { IgxActionStripComponent } from '../action-strip.component';
 import { IgxRowDirective } from '../../grids/row.directive';
 import { IgxIconService } from '../../icon/icon.service';
@@ -14,6 +14,9 @@ import { IgxIconService } from '../../icon/icon.service';
     standalone: true
 })
 export class IgxGridActionsBaseDirective implements AfterViewInit {
+    protected iconService = inject(IgxIconService);
+    protected differs = inject(IterableDiffers);
+
     /** @hidden @internal **/
     @ViewChildren(IgxGridActionButtonComponent)
     public buttons: QueryList<IgxGridActionButtonComponent>;
@@ -51,9 +54,6 @@ export class IgxGridActionsBaseDirective implements AfterViewInit {
         return this.isRow(this.strip?.context) && !this.strip.context.inEditMode;
     }
 
-    constructor(protected iconService: IgxIconService,
-        protected differs: IterableDiffers) { }
-
     /**
      * @hidden
      * @internal

projects/igniteui-angular/src/lib/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 '../core/utils';
 import { IgxIconComponent } from '../icon/icon.component';
@@ -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/src/lib/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 '../icon/icon.component';
 import { IToggleView } from '../core/navigation';
@@ -51,6 +42,8 @@ export interface BannerCancelEventArgs extends BannerEventArgs, CancelableEventA
     imports: [IgxExpansionPanelComponent, IgxExpansionPanelBodyComponent, IgxButtonDirective, IgxRippleDirective]
 })
 export class IgxBannerComponent implements IToggleView {
+    public elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
+
     /**
      * @hidden
      */
@@ -237,8 +230,6 @@ export class IgxBannerComponent implements IToggleView {
     private _animationSettings: ToggleAnimationSettings;
     private _resourceStrings = getCurrentResourceStrings(BannerResourceStringsEN);
 
-    constructor(public elementRef: ElementRef<HTMLElement>) { }
-
     /**
      * Opens the banner
      *

projects/igniteui-angular/src/lib/buttonGroup/buttonGroup.component.ts

@@ -1,19 +1,4 @@
-import {
-    AfterViewInit,
-    Component,
-    ContentChildren,
-    ChangeDetectorRef,
-    EventEmitter,
-    HostBinding,
-    Input,
-    Output,
-    QueryList,
-    Renderer2,
-    ViewChildren,
-    OnDestroy,
-    ElementRef,
-    booleanAttribute
-} from '@angular/core';
+import { AfterViewInit, Component, ContentChildren, ChangeDetectorRef, EventEmitter, HostBinding, Input, Output, QueryList, Renderer2, ViewChildren, OnDestroy, ElementRef, booleanAttribute, inject } from '@angular/core';
 import { Subject } from 'rxjs';
 import { IgxButtonDirective } from '../directives/button/button.directive';
 import { IgxRippleDirective } from '../directives/ripple/ripple.directive';
@@ -59,6 +44,10 @@ let NEXT_ID = 0;
     imports: [IgxButtonDirective, IgxRippleDirective, IgxIconComponent]
 })
 export class IgxButtonGroupComponent implements AfterViewInit, OnDestroy {
+    private _cdr = inject(ChangeDetectorRef);
+    private _renderer = inject(Renderer2);
+    private _el = inject(ElementRef);
+
     /**
      * A collection containing all buttons inside the button group.
      */
@@ -309,12 +298,6 @@ export class IgxButtonGroupComponent implements AfterViewInit, OnDestroy {
       subtree: true,
     };
 
-    constructor(
-        private _cdr: ChangeDetectorRef,
-        private _renderer: Renderer2,
-        private _el: ElementRef
-    ) {}
-
     /**
      * Gets the selected button/buttons.
      * ```typescript