refactor(app): ng generate @angular/core:inject migration

Author: damyanpetev

src/app/app.component.ts

@@ -1,5 +1,5 @@
 
-import { Component, HostListener, Inject, OnInit, DOCUMENT } from '@angular/core';
+import { Component, HostListener, OnInit, DOCUMENT, inject } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 
 @Component({
@@ -9,14 +9,14 @@ import { RouterOutlet } from '@angular/router';
     imports: [RouterOutlet]
 })
 export class AppComponent implements OnInit {
+    private document = inject<Document>(DOCUMENT);
+
     public title = 'Samples';
     private theme = 'default-theme';
     private styleElem: HTMLStyleElement;
     private typefacesLoaded = ['Titillium Web', 'Roboto'];
     private typefaceUrl = 'https://fonts.googleapis.com/css?family=';
 
-    constructor(@Inject(DOCUMENT) private document: Document) {}
-
     public ngOnInit() {
         this.createThemeStyle();
     }

src/app/data-display/badge/badge-icon/badge-icon.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { heartMonitor } from '@igniteui/material-icons-extended';
 import { IgxIconService, IgxAvatarComponent, IgxBadgeComponent } from 'igniteui-angular';
 
@@ -8,8 +8,9 @@ import { IgxIconService, IgxAvatarComponent, IgxBadgeComponent } from 'igniteui-
     templateUrl: './badge-icon.component.html',
     imports: [IgxAvatarComponent, IgxBadgeComponent]
 })
-export class BadgeIconComponent implements OnInit { 
-    constructor (protected _iconService: IgxIconService) {}
+export class BadgeIconComponent implements OnInit {
+    protected _iconService = inject(IgxIconService);
+
 
     public ngOnInit() {
         this._iconService.addSvgIconFromText(heartMonitor.name, heartMonitor.value, 'imx-icons');

src/app/data-display/chip/chip-area-sample/chip-area-sample.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component } from '@angular/core';
+import { ChangeDetectorRef, Component, inject } from '@angular/core';
 import { IBaseChipEventArgs, IChipsAreaReorderEventArgs, IgxChipsAreaComponent, IgxChipComponent, IgxAvatarComponent, IgxPrefixDirective, IgxIconComponent } from 'igniteui-angular';
 
 
@@ -10,6 +10,8 @@ import { IBaseChipEventArgs, IChipsAreaReorderEventArgs, IgxChipsAreaComponent,
 })
 
 export class ChipAreaSampleComponent {
+    changeDetectionRef = inject(ChangeDetectorRef);
+
     public chipList = [
         {
             id: '770-504-2217',
@@ -28,9 +30,6 @@ export class ChipAreaSampleComponent {
         }
     ];
 
-
-    constructor(public changeDetectionRef: ChangeDetectorRef) { }
-
     public chipRemoved(event: IBaseChipEventArgs) {
         this.chipList = this.chipList.filter((item) => item.id !== event.owner.id);
         this.changeDetectionRef.detectChanges();

src/app/data-display/chip/chip-simple/chip-simple.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component } from '@angular/core';
+import { ChangeDetectorRef, Component, inject } from '@angular/core';
 import { IBaseChipEventArgs, IgxChipComponent, IgxIconComponent, IgxPrefixDirective } from 'igniteui-angular';
 
 
@@ -10,6 +10,8 @@ import { IBaseChipEventArgs, IgxChipComponent, IgxIconComponent, IgxPrefixDirect
 })
 
 export class ChipSimpleComponent {
+    changeDetectionRef = inject(ChangeDetectorRef);
+
     public chipList = [
         {
            text: 'Country',
@@ -33,8 +35,6 @@ export class ChipSimpleComponent {
         }
     ];
 
-    constructor(public changeDetectionRef: ChangeDetectorRef) { }
-
 
     public chipRemoved(event: IBaseChipEventArgs) {
         this.chipList = this.chipList.filter((item) => item.id !== event.owner.id);

src/app/data-display/chip/chip-styling/chip-styling.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component } from '@angular/core';
+import { ChangeDetectorRef, Component, inject } from '@angular/core';
 import { IBaseChipEventArgs, IChipsAreaReorderEventArgs, IgxChipsAreaComponent, IgxChipComponent, IgxIconComponent, IgxPrefixDirective } from 'igniteui-angular';
 
 
@@ -10,6 +10,8 @@ import { IBaseChipEventArgs, IChipsAreaReorderEventArgs, IgxChipsAreaComponent,
 })
 
 export class ChipStylingSampleComponent {
+    changeDetectionRef = inject(ChangeDetectorRef);
+
     public chipList = [
         {
            text: 'Country',
@@ -33,8 +35,6 @@ export class ChipStylingSampleComponent {
         }
     ];
 
-    constructor(public changeDetectionRef: ChangeDetectorRef) { }
-
 
     public chipRemoved(event: IBaseChipEventArgs) {
         this.chipList = this.chipList.filter((item) => item.id !== event.owner.id);

src/app/data-display/icon/icon-service-sample/icon-service-sample.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { IgxIconService, IgxCardComponent, IgxCardHeaderComponent, IgxAvatarComponent, IgxIconComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardActionsComponent, IgxButtonDirective, IgxSuffixDirective } from 'igniteui-angular';
 
 @Component({
@@ -8,6 +8,8 @@ import { IgxIconService, IgxCardComponent, IgxCardHeaderComponent, IgxAvatarComp
     imports: [IgxCardComponent, IgxCardHeaderComponent, IgxAvatarComponent, IgxIconComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardActionsComponent, IgxButtonDirective, IgxSuffixDirective]
 })
 export class IconServiceSampleComponent {
+    private iconService = inject(IgxIconService);
+
     private weather = [{
         icon: 'partly_cloudy',
         description: '18° Partly Cloudy'
@@ -25,7 +27,7 @@ export class IconServiceSampleComponent {
         return this.weather.at(0).description
     };
 
-    constructor(private iconService: IgxIconService) {
+    constructor() {
         // Add the SVG assets to the icon service collection
         this.iconService.addSvgIcon('partly_cloudy', 'assets/images/icons/partly_cloudy.svg', 'weather');
         this.iconService.addSvgIcon('sunny', 'assets/images/icons/sunny.svg', 'weather');

src/app/data-display/icon/material-icons-extended/material-icons-extended.component.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/member-ordering */
-import { Component, Inject, OnInit, Pipe, PipeTransform, Renderer2, forwardRef, DOCUMENT } from '@angular/core';
+import { Component, OnInit, Pipe, PipeTransform, Renderer2, forwardRef, DOCUMENT, inject } from '@angular/core';
 import * as fileSaver from 'file-saver';
 
 import { IgxIconService, ISelectionEventArgs, IgxSelectComponent, IgxLabelDirective, IgxSelectItemComponent, IgxInputGroupComponent, IgxInputDirective, IgxPrefixDirective, IgxIconComponent, IgxSuffixDirective, IgxButtonDirective } from 'igniteui-angular';
@@ -22,11 +22,10 @@ interface ICategoryOption {
     imports: [IgxSelectComponent, IgxLabelDirective, IgxSelectItemComponent, IgxInputGroupComponent, IgxInputDirective, IgxPrefixDirective, IgxIconComponent, IgxSuffixDirective, IgxButtonDirective, forwardRef(() => CategoriesFilterPipe), forwardRef(() => FilterByName)]
 })
 export class MaterialIconsExtendedComponent implements OnInit {
-    constructor(
-        private iconService: IgxIconService,
-        @Inject(DOCUMENT) private document: Document,
-        private renderer: Renderer2
-    ) { }
+    private iconService = inject(IgxIconService);
+    private document = inject<Document>(DOCUMENT);
+    private renderer = inject(Renderer2);
+
 
     public categories: ICategoryOption[] = [
         {

src/app/data-display/icon/material-symbols/material-symbols.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { IgxIconService, IgxIconComponent } from 'igniteui-angular';
 
 @Component({
@@ -8,7 +8,8 @@ import { IgxIconService, IgxIconComponent } from 'igniteui-angular';
     imports: [IgxIconComponent]
 })
 export class MaterialSymbolsComponent implements OnInit {
-    constructor(private iconService: IgxIconService) { }
+    private iconService = inject(IgxIconService);
+
 
     public ngOnInit() {
         this.iconService.registerFamilyAlias('material-symbols', 'material-symbols-outlined');

src/app/data-display/icon/svg-icon-sample/svg-icon-sample.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { IgxIconService, IgxIconComponent } from 'igniteui-angular';
 
 @Component({
@@ -8,8 +8,8 @@ import { IgxIconService, IgxIconComponent } from 'igniteui-angular';
     imports: [IgxIconComponent]
 })
 export class SvgIconSampleComponent implements OnInit {
+    private iconService = inject(IgxIconService);
 
-    constructor(private iconService: IgxIconService) { }
 
     public ngOnInit() {
         // register custom SVG icons

src/app/data-display/text-highlight/text-highlight-sample-1/text-highlight-sample-1.component.ts

@@ -1,5 +1,5 @@
 /* eslint-disable max-len */
-import { Component, OnDestroy, ViewChild } from '@angular/core';
+import { Component, OnDestroy, ViewChild, inject } from '@angular/core';
 import { IgxTextHighlightDirective, IgxTextHighlightService, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, IgxInputDirective, IgxSuffixDirective, IgxIconButtonDirective, IgxRippleDirective } from 'igniteui-angular';
 
 import { FormsModule } from '@angular/forms';
@@ -11,6 +11,8 @@ import { FormsModule } from '@angular/forms';
     imports: [IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, FormsModule, IgxInputDirective, IgxSuffixDirective, IgxIconButtonDirective, IgxRippleDirective, IgxTextHighlightDirective]
 })
 export class TextHighlightSample1Component implements OnDestroy {
+    private highlightService = inject(IgxTextHighlightService);
+
     @ViewChild(IgxTextHighlightDirective, { read: IgxTextHighlightDirective, static: true })
     public highlight: IgxTextHighlightDirective;
     // tslint:disable max-line-length
@@ -29,8 +31,6 @@ export class TextHighlightSample1Component implements OnDestroy {
     public caseSensitive = false;
     public index = 0;
 
-    constructor(private highlightService: IgxTextHighlightService) { }
-
     public ngOnDestroy() {
         this.highlightService.destroyGroup('group1');
     }