refactor: migrate to inject function (remove constructor-based dependency injection)

xidedix · xidedix · commit e99972408e98 · 2025-06-16T14:10:57.000+02:00
diff --git a/src/app/views/base/accordion/accordions.component.ts b/src/app/views/base/accordion/accordions.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { RowComponent, ColComponent, TextColorDirective, CardComponent, CardHeaderComponent, CardBodyComponent, AccordionComponent, AccordionItemComponent, TemplateIdDirective, AccordionButtonDirective, BgColorDirective } from '@coreui/angular';
 import { DocsExampleComponent } from '@docs-components/public-api';
@@ -10,12 +10,10 @@ import { DocsExampleComponent } from '@docs-components/public-api';
     imports: [RowComponent, ColComponent, TextColorDirective, CardComponent, CardHeaderComponent, CardBodyComponent, DocsExampleComponent, AccordionComponent, AccordionItemComponent, TemplateIdDirective, AccordionButtonDirective, BgColorDirective]
 })
 export class AccordionsComponent {
+  private sanitizer = inject(DomSanitizer);
 
-  items = [1, 2, 3, 4];
 
-  constructor(
-    private sanitizer: DomSanitizer
-  ) { }
+  items = [1, 2, 3, 4];
 
   getAccordionBodyText(value: string|number) {
     const textSample = `
diff --git a/src/app/views/base/carousels/carousels.component.ts b/src/app/views/base/carousels/carousels.component.ts
@@ -1,4 +1,4 @@
-import { Component, signal } from '@angular/core';
+import { Component, signal, inject } from '@angular/core';
 import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
 import { DocsExampleComponent } from '@docs-components/public-api';
 import {
@@ -27,13 +27,17 @@ export type Slide = { id: number, src: SafeUrl | string, title: string, subtitle
   // providers: [{ provide: CarouselConfig, useClass: CarouselCustomConfig  }]
 })
 export class CarouselsComponent {
+  private domSanitizer = inject(DomSanitizer);
+
 
 
   readonly imageSrc: string[] = ['assets/images/angular.jpg', 'assets/images/react.jpg', 'assets/images/vue.jpg', 'https://picsum.photos/id/1/800/400', 'https://picsum.photos/id/1026/800/400', 'https://picsum.photos/id/1031/800/400'];
   readonly slidesLight: string[] = ['data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1607923e7e2%20text%20%7B%20fill%3A%23AAA%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1607923e7e2%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23F5F5F5%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.9296875%22%20y%3D%22217.75625%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E', 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa20%20text%20%7B%20fill%3A%23BBB%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa20%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23EEE%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3203125%22%20y%3D%22218.3%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E', 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa21%20text%20%7B%20fill%3A%23999%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa21%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23E5E5E5%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22277%22%20y%3D%22218.3%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E'];
   readonly slides: Slide[][] = [];
 
-  constructor(private domSanitizer: DomSanitizer) {
+  constructor() {
+    const domSanitizer = this.domSanitizer;
+
     this.slides[0] = [{
       id: 0,
       src: domSanitizer.bypassSecurityTrustUrl(this.imageSrc[0]),
diff --git a/src/app/views/base/list-groups/list-groups.component.ts b/src/app/views/base/list-groups/list-groups.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { UntypedFormBuilder, ReactiveFormsModule } from '@angular/forms';
 import { DocsExampleComponent } from '@docs-components/public-api';
 import { RowComponent, ColComponent, TextColorDirective, CardComponent, CardHeaderComponent, CardBodyComponent, ListGroupDirective, ListGroupItemDirective, BadgeComponent, FormDirective, FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective, ButtonDirective } from '@coreui/angular';
@@ -10,10 +10,8 @@ import { RowComponent, ColComponent, TextColorDirective, CardComponent, CardHead
     imports: [RowComponent, ColComponent, TextColorDirective, CardComponent, CardHeaderComponent, CardBodyComponent, DocsExampleComponent, ListGroupDirective, ListGroupItemDirective, BadgeComponent, ReactiveFormsModule, FormDirective, FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective, ButtonDirective]
 })
 export class ListGroupsComponent {
+  private formBuilder = inject(UntypedFormBuilder);
 
-  constructor(
-    private formBuilder: UntypedFormBuilder
-  ) { }
 
   readonly breakpoints: (string | boolean)[] = [true, 'sm', 'md', 'lg', 'xl', 'xxl'];
   readonly colors: string[] = ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'];
diff --git a/src/app/views/buttons/button-groups/button-groups.component.ts b/src/app/views/buttons/button-groups/button-groups.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, ReactiveFormsModule } from '@angular/forms';
 import { RouterLink } from '@angular/router';
 import { DocsExampleComponent } from '@docs-components/public-api';
@@ -11,6 +11,8 @@ import { RowComponent, ColComponent, TextColorDirective, CardComponent, CardHead
     imports: [RowComponent, ColComponent, TextColorDirective, CardComponent, CardHeaderComponent, CardBodyComponent, DocsExampleComponent, ButtonGroupComponent, ButtonDirective, RouterLink, ReactiveFormsModule, FormCheckLabelDirective, ButtonToolbarComponent, InputGroupComponent, InputGroupTextDirective, FormControlDirective, ThemeDirective, DropdownComponent, DropdownToggleDirective, DropdownMenuDirective, DropdownItemDirective, DropdownDividerDirective]
 })
 export class ButtonGroupsComponent {
+  private formBuilder = inject(UntypedFormBuilder);
+
 
   formCheck1 = this.formBuilder.group({
     checkbox1: false,
@@ -21,10 +23,6 @@ export class ButtonGroupsComponent {
     radio1: new UntypedFormControl('Radio1')
   });
 
-  constructor(
-    private formBuilder: UntypedFormBuilder
-  ) { }
-
   setCheckBoxValue(controlName: string) {
     const prevValue = this.formCheck1.get(controlName)?.value;
     const value = this.formCheck1.value;
diff --git a/src/app/views/forms/checks-radios/checks-radios.component.ts b/src/app/views/forms/checks-radios/checks-radios.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { FormControl, UntypedFormBuilder, ReactiveFormsModule } from '@angular/forms';
 import { DocsExampleComponent } from '@docs-components/public-api';
 import { RowComponent, FormDirective, ColComponent, TextColorDirective, CardComponent, CardHeaderComponent, CardBodyComponent, FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective, ButtonGroupComponent, ButtonDirective } from '@coreui/angular';
@@ -10,6 +10,8 @@ import { RowComponent, FormDirective, ColComponent, TextColorDirective, CardComp
     imports: [RowComponent, ReactiveFormsModule, FormDirective, ColComponent, TextColorDirective, CardComponent, CardHeaderComponent, CardBodyComponent, DocsExampleComponent, FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective, ButtonGroupComponent, ButtonDirective]
 })
 export class ChecksRadiosComponent {
+private formBuilder = inject(UntypedFormBuilder);
+
 
 inputDisabled: null = null;
 
@@ -38,11 +40,6 @@ inputDisabled: null = null;
     })
   });
 
-
-  constructor(
-    private formBuilder: UntypedFormBuilder
-  ) { }
-
   setCheckBoxValue(controlName: string) {
     const btnCheckGroup = this.formGroup.controls['btnCheckGroup'];
     const prevValue = btnCheckGroup.get(controlName)?.value;
diff --git a/src/app/views/icons/coreui-icons.component.ts b/src/app/views/icons/coreui-icons.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
 import { IconDirective, IconSetService } from '@coreui/icons-angular';
@@ -20,12 +20,15 @@ import { DocsLinkComponent } from '@docs-components/public-api';
     ]
 })
 export class CoreUIIconsComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+  iconSet = inject(IconSetService);
+
   public title = 'CoreUI Icons';
   public icons!: [string, string[]][];
 
-  constructor(
-    private route: ActivatedRoute, public iconSet: IconSetService
-  ) {
+  constructor() {
+    const iconSet = this.iconSet;
+
     iconSet.icons = { ...freeSet, ...brandSet, ...flagSet };
   }
 
diff --git a/src/app/views/theme/colors.component.ts b/src/app/views/theme/colors.component.ts
@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, HostBinding, Inject, Input, OnInit, Renderer2, forwardRef, DOCUMENT } from '@angular/core';
+import { AfterViewInit, Component, HostBinding, Input, OnInit, Renderer2, forwardRef, DOCUMENT, inject } from '@angular/core';
 import { NgClass } from '@angular/common';
 
 import { getStyle, rgbToHex } from '@coreui/utils';
@@ -9,12 +9,9 @@ import { TextColorDirective, CardComponent, CardHeaderComponent, CardBodyCompone
     imports: [TextColorDirective, CardComponent, CardHeaderComponent, CardBodyComponent, RowComponent, forwardRef(() => ThemeColorComponent)]
 })
 export class ColorsComponent implements OnInit, AfterViewInit {
+  private document = inject<Document>(DOCUMENT);
+  private renderer = inject(Renderer2);
 
-  constructor(
-    @Inject(DOCUMENT) private document: Document,
-    private renderer: Renderer2
-  ) {
-  }
 
   public themeColors(): void {
     Array.from(this.document.querySelectorAll('.theme-color')).forEach(
diff --git a/src/app/views/widgets/widgets-brand/widgets-brand.component.ts b/src/app/views/widgets/widgets-brand/widgets-brand.component.ts
@@ -1,4 +1,4 @@
-import { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, Input } from '@angular/core';
+import { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, inject } from '@angular/core';
 import { ChartjsComponent } from '@coreui/angular-chartjs';
 import { IconDirective } from '@coreui/icons-angular';
 import { ColComponent, RowComponent, WidgetStatDComponent } from '@coreui/angular';
@@ -21,10 +21,8 @@ type BrandData = {
     imports: [RowComponent, ColComponent, WidgetStatDComponent, IconDirective, ChartjsComponent]
 })
 export class WidgetsBrandComponent implements AfterContentInit {
+  private changeDetectorRef = inject(ChangeDetectorRef);
 
-  constructor(
-    private changeDetectorRef: ChangeDetectorRef
-  ) {}
 
   @Input() withCharts?: boolean;
   // @ts-ignore
diff --git a/src/app/views/widgets/widgets-dropdown/widgets-dropdown.component.ts b/src/app/views/widgets/widgets-dropdown/widgets-dropdown.component.ts
@@ -1,12 +1,4 @@
-import {
-  AfterContentInit,
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  OnInit,
-  ViewChild
-} from '@angular/core';
+import { AfterContentInit, AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, ViewChild, inject } from '@angular/core';
 import { getStyle } from '@coreui/utils';
 import { ChartjsComponent } from '@coreui/angular-chartjs';
 import { RouterLink } from '@angular/router';
@@ -21,10 +13,8 @@ import { RowComponent, ColComponent, WidgetStatAComponent, TemplateIdDirective,
     imports: [RowComponent, ColComponent, WidgetStatAComponent, TemplateIdDirective, IconDirective, ThemeDirective, DropdownComponent, ButtonDirective, DropdownToggleDirective, DropdownMenuDirective, DropdownItemDirective, RouterLink, DropdownDividerDirective, ChartjsComponent]
 })
 export class WidgetsDropdownComponent implements OnInit, AfterContentInit {
+  private changeDetectorRef = inject(ChangeDetectorRef);
 
-  constructor(
-    private changeDetectorRef: ChangeDetectorRef
-  ) {}
 
   data: any[] = [];
   options: any[] = [];
diff --git a/src/app/views/widgets/widgets-e/widgets-e.component.ts b/src/app/views/widgets/widgets-e/widgets-e.component.ts
@@ -1,4 +1,4 @@
-import { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
+import { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, inject } from '@angular/core';
 import { getStyle } from '@coreui/utils';
 import { ChartjsComponent } from '@coreui/angular-chartjs';
 import { RowComponent, ColComponent, WidgetStatEComponent, TextColorDirective } from '@coreui/angular';
@@ -11,10 +11,10 @@ import { RowComponent, ColComponent, WidgetStatEComponent, TextColorDirective }
     imports: [RowComponent, ColComponent, TextColorDirective, WidgetStatEComponent, ChartjsComponent]
 })
 export class WidgetsEComponent implements AfterContentInit {
+  private changeDetectorRef = inject(ChangeDetectorRef);
 
-  constructor(
-    private changeDetectorRef: ChangeDetectorRef
-  ) {
+
+  constructor() {
     this.prepareLabels();
     this.prepareDatasets();
     this.prepareData();
diff --git a/src/app/views/widgets/widgets/widgets.component.ts b/src/app/views/widgets/widgets/widgets.component.ts
@@ -1,4 +1,4 @@
-import { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
+import { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, inject } from '@angular/core';
 import { WidgetsBrandComponent } from '../widgets-brand/widgets-brand.component';
 import { IconDirective } from '@coreui/icons-angular';
 import { WidgetsEComponent } from '../widgets-e/widgets-e.component';
@@ -14,9 +14,8 @@ import { TextColorDirective, CardComponent, CardHeaderComponent, CardBodyCompone
     imports: [TextColorDirective, CardComponent, CardHeaderComponent, CardBodyComponent, DocsExampleComponent, WidgetsDropdownComponent, RowComponent, ColComponent, WidgetStatBComponent, ProgressBarDirective, ProgressComponent, WidgetsEComponent, WidgetStatFComponent, TemplateIdDirective, IconDirective, WidgetsBrandComponent, CardGroupComponent, WidgetStatCComponent]
 })
 export class WidgetsComponent implements AfterContentInit {
-  constructor(
-    private changeDetectorRef: ChangeDetectorRef
-  ) {}
+  private changeDetectorRef = inject(ChangeDetectorRef);
+
 
   ngAfterContentInit(): void {
     this.changeDetectorRef.detectChanges();
diff --git a/src/components/docs-example/docs-example.component.ts b/src/components/docs-example/docs-example.component.ts
@@ -1,12 +1,4 @@
-import {
-  AfterContentInit,
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  HostBinding,
-  Input
-} from '@angular/core';
+import { AfterContentInit, AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, Input, inject } from '@angular/core';
 
 import packageJson from '../../../package.json';
 import { IconDirective } from '@coreui/icons-angular';
@@ -21,10 +13,8 @@ import { NavComponent, NavItemComponent, NavLinkDirective } from '@coreui/angula
     imports: [NavComponent, NavItemComponent, NavLinkDirective, RouterLink, IconDirective]
 })
 export class DocsExampleComponent implements AfterContentInit, AfterViewInit {
+  private changeDetectorRef = inject(ChangeDetectorRef);
 
-  constructor(
-    private changeDetectorRef: ChangeDetectorRef
-  ) {}
 
   @Input() fragment?: string;
 
