refactor : migrate components package to inject() DI

npm/ng-packs/packages/components/chart.js/src/chart.component.ts

@@ -1,16 +1,17 @@
-import {
+import { 
-  AfterViewInit,
+  AfterViewInit, 
-  ChangeDetectionStrategy,
+  ChangeDetectionStrategy, 
-  ChangeDetectorRef,
+  ChangeDetectorRef, 
-  Component,
+  Component, 
-  ElementRef,
+  ElementRef, 
-  EventEmitter,
+  EventEmitter, 
-  Input,
+  Input, 
-  OnChanges,
+  OnChanges, 
-  OnDestroy,
+  OnDestroy, 
-  Output,
+  Output, 
-  SimpleChanges,
+  SimpleChanges, 
-  ViewChild,
+  ViewChild, 
+  inject 
 } from '@angular/core';
 
 let Chart: any;
@@ -35,6 +36,9 @@ let Chart: any;
   exportAs: 'abpChart',
 })
 export class ChartComponent implements AfterViewInit, OnDestroy, OnChanges {
+  el = inject(ElementRef);
+  private cdr = inject(ChangeDetectorRef);
+
   @Input() type!: string;
 
   @Input() data: any = {};
@@ -57,11 +61,6 @@ export class ChartComponent implements AfterViewInit, OnDestroy, OnChanges {
 
   chart: any;
 
-  constructor(
-    public el: ElementRef,
-    private cdr: ChangeDetectorRef,
-  ) {}
-
   ngAfterViewInit() {
     import('chart.js/auto').then(module => {
       Chart = module.default;

npm/ng-packs/packages/components/extensible/src/lib/components/abstract-actions/abstract-actions.component.ts

@@ -1,4 +1,4 @@
-import { Directive, Injector, Input } from '@angular/core';
+import { Directive, Injector, Input, inject } from '@angular/core';
 import { ActionData, ActionList, InferredAction } from '../../models/actions';
 import { ExtensionsService } from '../../services/extensions.service';
 import { EXTENSIONS_ACTION_TYPE, EXTENSIONS_IDENTIFIER } from '../../tokens/extensions.token';
@@ -16,7 +16,9 @@ export abstract class AbstractActionsComponent<
 
   @Input() record!: InferredData<L>['record'];
 
-  protected constructor(injector: Injector) {
+  protected constructor() {
+    const injector = inject(Injector);
+
     super();
     this.getInjected = injector.get.bind(injector);
     const extensions = injector.get(ExtensionsService);

npm/ng-packs/packages/components/extensible/src/lib/components/grid-actions/grid-actions.component.ts

@@ -1,9 +1,10 @@
-import {
+import { 
-  ChangeDetectionStrategy,
+  ChangeDetectionStrategy, 
-  Component,
+  Component, 
-  Injector,
+  Injector, 
-  Input,
+  Input, 
-  TrackByFunction,
+  TrackByFunction, 
+  inject 
 } from '@angular/core';
 import { EntityAction, EntityActionList } from '../../models/entity-actions';
 import { EXTENSIONS_ACTION_TYPE } from '../../tokens/extensions.token';
@@ -43,7 +44,9 @@ export class GridActionsComponent<R = any> extends AbstractActionsComponent<Enti
 
   readonly trackByFn: TrackByFunction<EntityAction<R>> = (_, item) => item.text;
 
-  constructor(injector: Injector) {
+  constructor() {
-    super(injector);
+    const injector = inject(Injector);
+
+    super();
   }
 }

npm/ng-packs/packages/components/extensible/src/lib/components/page-toolbar/page-toolbar.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Injector, TrackByFunction } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Injector, TrackByFunction, inject } from '@angular/core';
 import {
   HasCreateInjectorPipe,
   ToolbarAction,
@@ -35,6 +35,8 @@ export class PageToolbarComponent<R = any>
   extends AbstractActionsComponent<ToolbarActionList<R>>
   implements HasCreateInjectorPipe<R>
 {
+  readonly injector: Injector;
+
   defaultBtnClass = 'btn btn-sm btn-primary';
 
   getData = () => this.data;
@@ -42,8 +44,12 @@ export class PageToolbarComponent<R = any>
   readonly trackByFn: TrackByFunction<ToolbarComponent<R>> = (_, item) =>
     item.action || item.component;
 
-  constructor(public readonly injector: Injector) {
+  constructor() {
+    const injector = inject(Injector);
+
     super(injector);
+  
+    this.injector = injector;
   }
 
   asToolbarAction(value: ToolbarActionDefault): { value: ToolbarAction } {

npm/ng-packs/packages/components/extensible/src/lib/directives/prop-data.directive.ts

@@ -1,12 +1,13 @@
 /* eslint-disable @angular-eslint/no-input-rename */
-import {
+import { 
-  Directive,
+  Directive, 
-  Injector,
+  Injector, 
-  Input,
+  Input, 
-  OnChanges,
+  OnChanges, 
-  OnDestroy,
+  OnDestroy, 
-  TemplateRef,
+  TemplateRef, 
-  ViewContainerRef,
+  ViewContainerRef, 
+  inject 
 } from '@angular/core';
 import { PropData, PropList } from '../models/props';
 
@@ -18,6 +19,9 @@ export class PropDataDirective<L extends PropList<any>>
   extends PropData<InferredData<L>>
   implements OnChanges, OnDestroy
 {
+  private tempRef = inject<TemplateRef<any>>(TemplateRef);
+  private vcRef = inject(ViewContainerRef);
+
   @Input('abpPropDataFromList') propList?: L;
 
   @Input('abpPropDataWithRecord') record!: InferredData<L>['record'];
@@ -26,11 +30,9 @@ export class PropDataDirective<L extends PropList<any>>
 
   readonly getInjected: InferredData<L>['getInjected'];
 
-  constructor(
+  constructor() {
-    private tempRef: TemplateRef<any>,
+    const injector = inject(Injector);
-    private vcRef: ViewContainerRef,
+
-    injector: Injector,
-  ) {
     super();
 
     this.getInjected = injector.get.bind(injector);

npm/ng-packs/packages/components/page/src/page-part.directive.ts

@@ -1,18 +1,17 @@
-import {
+import { 
-  Directive,
+  Directive, 
-  TemplateRef,
+  TemplateRef, 
-  ViewContainerRef,
+  ViewContainerRef, 
-  Input,
+  Input, 
-  InjectionToken,
+  InjectionToken, 
-  Optional,
+  OnInit, 
-  Inject,
+  OnDestroy, 
-  OnInit,
+  Injector, 
-  OnDestroy,
+  OnChanges, 
-  Injector,
+  SimpleChanges, 
-  OnChanges,
+  SimpleChange, 
-  SimpleChanges,
+  inject
-  SimpleChange,
+ } from '@angular/core';
-} from '@angular/core';
 import { Observable, Subscription, of } from 'rxjs';
 
 export interface PageRenderStrategy {
@@ -28,6 +27,11 @@ export const PAGE_RENDER_STRATEGY = new InjectionToken<PageRenderStrategy>('PAGE
   selector: '[abpPagePart]',
 })
 export class PagePartDirective implements OnInit, OnDestroy, OnChanges {
+  private templateRef = inject<TemplateRef<any>>(TemplateRef);
+  private viewContainer = inject(ViewContainerRef);
+  private renderLogic = inject<PageRenderStrategy>(PAGE_RENDER_STRATEGY, { optional: true })!;
+  private injector = inject(Injector);
+
   hasRendered = false;
   type!: string;
   subscription!: Subscription;
@@ -48,13 +52,6 @@ export class PagePartDirective implements OnInit, OnDestroy, OnChanges {
     }
   };
 
-  constructor(
-    private templateRef: TemplateRef<any>,
-    private viewContainer: ViewContainerRef,
-    @Optional() @Inject(PAGE_RENDER_STRATEGY) private renderLogic: PageRenderStrategy,
-    private injector: Injector,
-  ) {}
-
   ngOnChanges({ context }: SimpleChanges): void {
     if (this.renderLogic?.onContextUpdate) {
       this.renderLogic.onContextUpdate(context);

npm/ng-packs/packages/components/tree/src/lib/templates/expanded-icon-template.directive.ts

@@ -1,8 +1,8 @@
-import { Directive, TemplateRef } from '@angular/core';
+import { Directive, TemplateRef, inject } from '@angular/core';
+
+@Directive({
+  selector: '[abpTreeExpandedIconTemplate],[abp-tree-expanded-icon-template]',
+})
+export class ExpandedIconTemplateDirective {
  template = inject<TemplateRef<any>>(TemplateRef);
 
-@Directive({
+}
-  selector: '[abpTreeExpandedIconTemplate],[abp-tree-expanded-icon-template]',
-})
-export class ExpandedIconTemplateDirective {
-  constructor(public template: TemplateRef<any>) {}
-}

npm/ng-packs/packages/components/tree/src/lib/templates/tree-node-template.directive.ts

@@ -1,8 +1,8 @@
-import { Directive, TemplateRef } from '@angular/core';
+import { Directive, TemplateRef, inject } from '@angular/core';
+
+@Directive({
+  selector: '[abpTreeNodeTemplate],[abp-tree-node-template]',
+})
+export class TreeNodeTemplateDirective {
  template = inject<TemplateRef<any>>(TemplateRef);
 
-@Directive({
+}
-  selector: '[abpTreeNodeTemplate],[abp-tree-node-template]',
-})
-export class TreeNodeTemplateDirective {
-  constructor(public template: TemplateRef<any>) {}
-}