refactor: migrate constructor-based dependency injection to inject function

Author: xidedix

projects/coreui-angular-chartjs/src/lib/chartjs.component.ts

@@ -1,23 +1,4 @@
-import {
-  afterRender,
-  AfterViewInit,
-  booleanAttribute,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  EventEmitter,
-  HostBinding,
-  Input,
-  NgZone,
-  numberAttribute,
-  OnChanges,
-  OnDestroy,
-  Output,
-  Renderer2,
-  SimpleChanges,
-  ViewChild
-} from '@angular/core';
+import { afterRender, AfterViewInit, booleanAttribute, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, Input, NgZone, numberAttribute, OnChanges, OnDestroy, Output, Renderer2, SimpleChanges, ViewChild, inject } from '@angular/core';
 
 import merge from 'lodash-es/merge';
 
@@ -38,6 +19,10 @@ let nextId = 0;
   // host: { ngSkipHydration: 'true' }
 })
 export class ChartjsComponent implements AfterViewInit, OnDestroy, OnChanges {
+  private readonly ngZone = inject(NgZone);
+  private readonly renderer = inject(Renderer2);
+  private readonly changeDetectorRef = inject(ChangeDetectorRef);
+
   /**
    * Enables custom html based tooltips instead of standard tooltips.
    * @type boolean
@@ -126,11 +111,7 @@ export class ChartjsComponent implements AfterViewInit, OnDestroy, OnChanges {
     };
   }
 
-  constructor(
-    private readonly ngZone: NgZone,
-    private readonly renderer: Renderer2,
-    private readonly changeDetectorRef: ChangeDetectorRef
-  ) {
+  constructor() {
     // todo: verify afterRender / afterNextRender for chartjs (spec fails with 17.0.10)
     afterRender({
       write: () => {

projects/coreui-angular/src/lib/breadcrumb/breadcrumb-router/breadcrumb-router.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
+import { Component, inject, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
 import { Observable, Observer } from 'rxjs';
 import { AsyncPipe } from '@angular/common';
 
@@ -8,14 +8,12 @@ import { BreadcrumbRouterService } from './breadcrumb-router.service';
 import { BreadcrumbItemComponent } from '../breadcrumb-item/breadcrumb-item.component';
 
 @Component({
-    selector: 'c-breadcrumb-router, [cBreadcrumbRouter]',
-    templateUrl: './breadcrumb-router.component.html',
-    imports: [BreadcrumbComponent, BreadcrumbItemComponent, AsyncPipe]
+  selector: 'c-breadcrumb-router, [cBreadcrumbRouter]',
+  templateUrl: './breadcrumb-router.component.html',
+  imports: [BreadcrumbComponent, BreadcrumbItemComponent, AsyncPipe]
 })
 export class BreadcrumbRouterComponent implements OnChanges, OnDestroy, OnInit {
-  constructor(
-    public service: BreadcrumbRouterService
-  ) {}
+  readonly service = inject(BreadcrumbRouterService);
 
   /**
    * Optional array of IBreadcrumbItem to override default BreadcrumbRouter behavior. [docs]
@@ -36,13 +34,11 @@ export class BreadcrumbRouterComponent implements OnChanges, OnDestroy, OnInit {
 
   setup(): void {
     if (this.items && this.items.length > 0) {
-      this.breadcrumbs = new Observable<IBreadcrumbItem[]>(
-        (observer: Observer<IBreadcrumbItem[]>) => {
-          if (this.items) {
-            observer.next(this.items);
-          }
+      this.breadcrumbs = new Observable<IBreadcrumbItem[]>((observer: Observer<IBreadcrumbItem[]>) => {
+        if (this.items) {
+          observer.next(this.items);
         }
-      );
+      });
     }
   }
 

projects/coreui-angular/src/lib/breadcrumb/breadcrumb-router/breadcrumb-router.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
 import { BehaviorSubject, Observable } from 'rxjs';
@@ -9,21 +9,25 @@ import { IBreadcrumbItem } from '../breadcrumb-item/breadcrumb-item';
   providedIn: 'root'
 })
 export class BreadcrumbRouterService {
+  readonly #router = inject(Router);
+  readonly #activatedRoute = inject(ActivatedRoute);
+
   public outlet = 'primary';
 
-  readonly #breadcrumbsBehaviorSubject: BehaviorSubject<IBreadcrumbItem[]> = new BehaviorSubject<IBreadcrumbItem[]>(new Array<IBreadcrumbItem>());
+  readonly #breadcrumbsBehaviorSubject: BehaviorSubject<IBreadcrumbItem[]> = new BehaviorSubject<IBreadcrumbItem[]>(
+    new Array<IBreadcrumbItem>()
+  );
   readonly breadcrumbs$: Observable<IBreadcrumbItem[]> = this.#breadcrumbsBehaviorSubject.asObservable();
 
-  constructor(private router: Router, private route: ActivatedRoute) {
-
-    this.router.events
+  constructor() {
+    this.#router.events
       .pipe(
         takeUntilDestroyed(),
         filter((event) => event instanceof NavigationEnd)
       )
       .subscribe((event) => {
         const breadcrumbs: any[] = [];
-        let currentRoute: ActivatedRoute | null = this.route.root;
+        let currentRoute: ActivatedRoute | null = this.#activatedRoute.root;
         let url = '';
         do {
           const childrenRoutes: ActivatedRoute[] = currentRoute.children;

projects/coreui-angular/src/lib/carousel/carousel-control/carousel-control.component.ts

@@ -5,6 +5,7 @@ import {
   ElementRef,
   HostBinding,
   HostListener,
+  inject,
   Input,
   ViewChild
 } from '@angular/core';
@@ -16,24 +17,22 @@ import { CarouselState } from '../carousel-state';
   templateUrl: './carousel-control.component.html'
 })
 export class CarouselControlComponent implements AfterViewInit {
-  constructor(
-    private changeDetectorRef: ChangeDetectorRef,
-    private carouselState: CarouselState
-  ) {}
+  readonly #changeDetectorRef = inject(ChangeDetectorRef);
+  readonly #carouselState = inject(CarouselState);
 
-  private _caption?: string;
   /**
    * Carousel control caption. [docs]
    * @type string
    */
   @Input()
   set caption(value) {
-    this._caption = value;
+    this.#caption = value;
   }
 
   get caption(): string {
-    return !!this._caption ? this._caption : this.direction === 'prev' ? 'Previous' : 'Next';
+    return !!this.#caption ? this.#caption : this.direction === 'prev' ? 'Previous' : 'Next';
   }
+  #caption?: string;
 
   /**
    * Carousel control direction. [docs]
@@ -79,11 +78,11 @@ export class CarouselControlComponent implements AfterViewInit {
 
   ngAfterViewInit(): void {
     this.hasContent = this.content?.nativeElement.childNodes.length ?? false;
-    this.changeDetectorRef.detectChanges();
+    this.#changeDetectorRef.detectChanges();
   }
 
   private play(direction = this.direction): void {
-    const nextIndex = this.carouselState.direction(direction);
-    this.carouselState.state = { activeItemIndex: nextIndex };
+    const nextIndex = this.#carouselState.direction(direction);
+    this.#carouselState.state = { activeItemIndex: nextIndex };
   }
 }

projects/coreui-angular/src/lib/carousel/carousel-indicators/carousel-indicators.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, inject, OnDestroy, OnInit } from '@angular/core';
 import { Subscription } from 'rxjs';
 
 import { CarouselState } from '../carousel-state';
@@ -9,14 +9,12 @@ import { CarouselService } from '../carousel.service';
   templateUrl: './carousel-indicators.component.html'
 })
 export class CarouselIndicatorsComponent implements OnInit, OnDestroy {
-  constructor(
-    private carouselService: CarouselService,
-    private carouselState: CarouselState
-  ) {}
+  readonly #carouselService = inject(CarouselService);
+  readonly #carouselState = inject(CarouselState);
 
   items: (number | undefined)[] = [];
   active = 0;
-  private carouselIndexSubscription?: Subscription;
+  #carouselIndexSubscription?: Subscription;
 
   ngOnInit(): void {
     this.carouselStateSubscribe();
@@ -29,20 +27,20 @@ export class CarouselIndicatorsComponent implements OnInit, OnDestroy {
   onClick(index: number): void {
     if (index !== this.active) {
       const direction = index < this.active ? 'prev' : 'next';
-      this.carouselState.state = { direction, activeItemIndex: index };
+      this.#carouselState.state = { direction, activeItemIndex: index };
     }
   }
 
   private carouselStateSubscribe(subscribe: boolean = true): void {
     if (subscribe) {
-      this.carouselIndexSubscription = this.carouselService.carouselIndex$.subscribe((nextIndex) => {
-        this.items = this.carouselState?.state?.items?.map((item) => item.index) ?? [];
+      this.#carouselIndexSubscription = this.#carouselService.carouselIndex$.subscribe((nextIndex) => {
+        this.items = this.#carouselState?.state?.items?.map((item) => item.index) ?? [];
         if ('active' in nextIndex) {
           this.active = nextIndex.active ?? 0;
         }
       });
     } else {
-      this.carouselIndexSubscription?.unsubscribe();
+      this.#carouselIndexSubscription?.unsubscribe();
     }
   }
 }

projects/coreui-angular/src/lib/carousel/carousel-inner/carousel-inner.component.ts

@@ -4,6 +4,7 @@ import {
   Component,
   ContentChildren,
   HostBinding,
+  inject,
   QueryList
 } from '@angular/core';
 
@@ -18,23 +19,23 @@ import { CarouselState } from '../carousel-state';
   animations: [slideAnimation, fadeAnimation]
 })
 export class CarouselInnerComponent implements AfterContentInit, AfterContentChecked {
-  constructor(private carouselState: CarouselState) {}
+  readonly #carouselState = inject(CarouselState);
 
   @HostBinding('class.carousel-inner') carouselInnerClass = true;
   activeIndex?: number;
   animate?: boolean;
   slide = { left: true };
   transition = 'slide';
   @ContentChildren(CarouselItemComponent) private contentItems!: QueryList<CarouselItemComponent>;
-  private prevContentItems!: QueryList<CarouselItemComponent>;
+  #prevContentItems!: QueryList<CarouselItemComponent>;
 
   ngAfterContentInit(): void {
     this.setItems();
   }
 
   ngAfterContentChecked(): void {
     this.setItems();
-    const state = this.carouselState?.state;
+    const state = this.#carouselState?.state;
     const nextIndex = state?.activeItemIndex;
     const nextDirection = state?.direction;
     if (this.activeIndex !== nextIndex) {
@@ -46,9 +47,9 @@ export class CarouselInnerComponent implements AfterContentInit, AfterContentChe
   }
 
   setItems(): void {
-    if (this.prevContentItems !== this.contentItems) {
-      this.prevContentItems = this.contentItems;
-      this.carouselState.setItems(this.contentItems);
+    if (this.#prevContentItems !== this.contentItems) {
+      this.#prevContentItems = this.contentItems;
+      this.#carouselState.setItems(this.contentItems);
     }
   }
 }

projects/coreui-angular/src/lib/carousel/carousel-item/carousel-item.component.ts

@@ -4,6 +4,7 @@ import {
   ChangeDetectorRef,
   Component,
   HostBinding,
+  inject,
   Input,
   OnDestroy
 } from '@angular/core';
@@ -18,23 +19,26 @@ import { CarouselService } from '../carousel.service';
   host: { class: 'carousel-item' }
 })
 export class CarouselItemComponent implements OnDestroy, AfterViewInit {
+  readonly #carouselService = inject(CarouselService);
+  readonly #changeDetectorRef = inject(ChangeDetectorRef);
+
   index?: number;
-  private carouselIndexSubscription?: Subscription;
+  #carouselIndexSubscription?: Subscription;
 
   /**
    * @ignore
    */
   @Input({ transform: booleanAttribute })
   set active(value) {
-    this._active = value;
-    this.changeDetectorRef.markForCheck();
+    this.#active = value;
+    this.#changeDetectorRef.markForCheck();
   }
 
   get active(): boolean {
-    return this._active;
+    return this.#active;
   }
 
-  private _active = false;
+  #active = false;
 
   /**
    * Time delay before cycling to next item. If -1, uses carousel interval value.
@@ -51,11 +55,6 @@ export class CarouselItemComponent implements OnDestroy, AfterViewInit {
     };
   }
 
-  constructor(
-    private carouselService: CarouselService,
-    private changeDetectorRef: ChangeDetectorRef
-  ) {}
-
   ngOnDestroy(): void {
     this.carouselStateSubscribe(false);
   }
@@ -68,13 +67,13 @@ export class CarouselItemComponent implements OnDestroy, AfterViewInit {
 
   private carouselStateSubscribe(subscribe: boolean = true): void {
     if (subscribe) {
-      this.carouselIndexSubscription = this.carouselService.carouselIndex$.subscribe((nextIndex) => {
+      this.#carouselIndexSubscription = this.#carouselService.carouselIndex$.subscribe((nextIndex) => {
         if ('active' in nextIndex) {
           this.active = nextIndex.active === this.index;
         }
       });
     } else {
-      this.carouselIndexSubscription?.unsubscribe();
+      this.#carouselIndexSubscription?.unsubscribe();
     }
   }
 }