Updating to ng20.1

package.json

@@ -58,17 +58,17 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^20.0.0",
-    "@angular/common": "^20.0.0",
-    "@angular/compiler": "^20.0.0",
-    "@angular/core": "^20.0.0",
-    "@angular/elements": "^20.0.0",
-    "@angular/forms": "^20.0.0",
-    "@angular/platform-browser": "^20.0.0",
-    "@angular/platform-browser-dynamic": "^20.0.0",
-    "@angular/platform-server": "^20.0.0",
-    "@angular/router": "^20.0.0",
-    "@angular/ssr": "^20.0.0",
+    "@angular/animations": "^20.1.0",
+    "@angular/common": "^20.1.0",
+    "@angular/compiler": "^20.1.0",
+    "@angular/core": "^20.1.0",
+    "@angular/elements": "^20.1.0",
+    "@angular/forms": "^20.1.0",
+    "@angular/platform-browser": "^20.1.0",
+    "@angular/platform-browser-dynamic": "^20.1.0",
+    "@angular/platform-server": "^20.1.0",
+    "@angular/router": "^20.1.0",
+    "@angular/ssr": "^20.1.0",
     "@igniteui/material-icons-extended": "^3.1.0",
     "@lit-labs/ssr-dom-shim": "^1.3.0",
     "@types/source-map": "0.5.2",
@@ -82,16 +82,16 @@
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/schematics": "^20.0.0",
-    "@angular-eslint/builder": "^19.6.0",
-    "@angular-eslint/eslint-plugin": "^19.6.0",
-    "@angular-eslint/eslint-plugin-template": "^19.6.0",
-    "@angular-eslint/schematics": "^19.6.0",
-    "@angular-eslint/template-parser": "^19.6.0",
-    "@angular/build": "^20.0.0",
-    "@angular/cli": "^20.0.0",
-    "@angular/compiler-cli": "^20.0.0",
-    "@angular/language-service": "^20.0.0",
+    "@angular-devkit/schematics": "^20.1.0",
+    "@angular-eslint/builder": "^20.1.1",
+    "@angular-eslint/eslint-plugin": "^20.1.1",
+    "@angular-eslint/eslint-plugin-template": "^20.1.1",
+    "@angular-eslint/schematics": "^20.1.1",
+    "@angular-eslint/template-parser": "^20.1.1",
+    "@angular/build": "^20.1.0",
+    "@angular/cli": "^20.1.0",
+    "@angular/compiler-cli": "^20.1.0",
+    "@angular/language-service": "^20.1.0",
     "@angularclass/hmr": "^3.0.0",
     "@microsoft/signalr": "^7.0.12",
     "@types/estree": "^1.0.0",
@@ -102,11 +102,11 @@
     "@types/node": "^20.17.6",
     "@types/sass-true": "^6.0.2",
     "@types/webpack-env": "^1.18.3",
-    "@typescript-eslint/eslint-plugin": "^8.15.0",
-    "@typescript-eslint/parser": "^8.15.0",
+    "@typescript-eslint/eslint-plugin": "^8.33.1",
+    "@typescript-eslint/parser": "^8.33.1",
     "autoprefixer": "^10.4.16",
     "del": "^6.0.0",
-    "eslint": "^9.15.0",
+    "eslint": "^9.28.0",
     "fs-extra": "^11.3.0",
     "globby": "^13.2.2",
     "gulp": "^5.0.0",

projects/bundle-test/src/app/form/form.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import {
     IGX_INPUT_GROUP_DIRECTIVES,
@@ -22,9 +22,11 @@ import {
     styleUrls: ['./form.component.scss']
 })
 export class FormComponent {
+    private fb = inject(FormBuilder);
+
     public form: FormGroup;
 
-    constructor(private fb: FormBuilder) {
+    constructor() {
         this.form = this.fb.group({
             'radio': [2, Validators.required],
             'checkbox': [false, Validators.required],

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 @@
     standalone: true
 })
 export class IgxActionStripMenuItemDirective {
-    constructor(public templateRef: TemplateRef<any>) {}
+    templateRef = inject<TemplateRef<any>>(TemplateRef);
 }
 
 /* blazorElement */
@@ -86,6 +70,11 @@
     providers: [{ provide: IgxActionStripToken, useExisting: IgxActionStripComponent }]
 })
 export class IgxActionStripComponent implements IgxActionStripToken, AfterContentInit, AfterViewInit {
+    private _viewContainer = inject(ViewContainerRef);
+    private renderer = inject(Renderer2);
+    protected el = inject(ElementRef);
+    cdr = inject(ChangeDetectorRef);
+
 
     /* blazorSuppress */
     /**
@@ -191,14 +180,6 @@
     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 {
+    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 {
+    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
      *