Run ng generate @angular/core:inject to migrate from constructor injection to inject()

nstdspace · nstdspace · commit e6014cb8a525 · 2025-07-17T09:39:41.000+02:00
diff --git a/projects/ng2-date-picker/src/lib/date-picker/date-picker.component.ts b/projects/ng2-date-picker/src/lib/date-picker/date-picker.component.ts
@@ -33,7 +33,8 @@ import {
   Renderer2,
   SimpleChanges,
   ViewChild,
-  ViewEncapsulation
+  ViewEncapsulation,
+  inject
 } from '@angular/core';
 import {
   ControlValueAccessor,
@@ -83,6 +84,11 @@ export class DatePickerComponent implements OnChanges,
                                             ControlValueAccessor,
                                             Validator,
                                             OnDestroy {
+  private readonly dayPickerService = inject(DatePickerService);
+  private readonly renderer = inject(Renderer2);
+  private readonly utilsService = inject(UtilsService);
+  readonly cd = inject(ChangeDetectorRef);
+
   isInitialized: boolean = false;
   @Input() config: IDatePickerConfig;
   @Input() mode: CalendarMode = 'day';
@@ -128,13 +134,6 @@ export class DatePickerComponent implements OnChanges,
   origin: ElementRef | HTMLElement;
   private onOpenDelayTimeoutHandler;
 
-  constructor(private readonly dayPickerService: DatePickerService,
-              private readonly elemRef: ElementRef,
-              private readonly renderer: Renderer2,
-              private readonly utilsService: UtilsService,
-              public readonly cd: ChangeDetectorRef) {
-  }
-
   get openOnFocus(): boolean {
     return this.componentConfig.openOnFocus;
   }
diff --git a/projects/ng2-date-picker/src/lib/date-picker/date-picker.directive.spec.ts b/projects/ng2-date-picker/src/lib/date-picker/date-picker.directive.spec.ts
@@ -1,7 +1,8 @@
 import {UtilsService} from '../common/services/utils/utils.service';
 import {DatePickerDirective} from './date-picker.directive';
-import {Component} from '@angular/core';
+import {Component, ComponentFactoryResolver, ElementRef, ViewContainerRef} from '@angular/core';
 import {inject, TestBed} from '@angular/core/testing';
+import {NgControl} from '@angular/forms';
 
 @Component({
     template: '',
@@ -11,14 +12,23 @@ class TestComponent {
 }
 
 describe('Directive: DpDayPicker', () => {
+  let directive: DatePickerDirective;
+
   beforeEach(() => {
     TestBed.configureTestingModule({
       declarations: [TestComponent],
-      providers: [UtilsService]
+      providers: [
+        DatePickerDirective,
+        UtilsService,
+        { provide: ViewContainerRef, useValue: null },
+        { provide: ElementRef, useValue: null },
+        { provide: ComponentFactoryResolver, useValue: null },
+        { provide: NgControl, useValue: null },
+      ]
     });
-  });
 
-  const directive = new DatePickerDirective(null, null, null, null, null);
+    directive = TestBed.inject(DatePickerDirective)
+  });
 
   it('should create an instance', () => {
     expect(directive).toBeTruthy();
diff --git a/projects/ng2-date-picker/src/lib/date-picker/date-picker.directive.ts b/projects/ng2-date-picker/src/lib/date-picker/date-picker.directive.ts
@@ -10,9 +10,9 @@ import {
   HostListener,
   Input,
   OnInit,
-  Optional,
   Output,
-  ViewContainerRef
+  ViewContainerRef,
+  inject
 } from '@angular/core';
 import {NgControl} from '@angular/forms';
 import {INavEvent} from '../common/models/navigation-event.model';
@@ -28,6 +28,12 @@ import {Dayjs} from 'dayjs';
     standalone: false
 })
 export class DatePickerDirective implements OnInit {
+  readonly viewContainerRef = inject(ViewContainerRef);
+  readonly elemRef = inject(ElementRef);
+  readonly componentFactoryResolver = inject(ComponentFactoryResolver);
+  readonly formControl: NgControl | undefined = inject(NgControl, { optional: true });
+  readonly utilsService = inject(UtilsService);
+
 
   @Output() open = new EventEmitter<void>();
   @Output() close = new EventEmitter<void>();
@@ -39,13 +45,6 @@ export class DatePickerDirective implements OnInit {
   datePicker: DatePickerComponent;
   api: IDpDayPickerApi;
 
-  constructor(public readonly viewContainerRef: ViewContainerRef,
-              public readonly elemRef: ElementRef,
-              public readonly componentFactoryResolver: ComponentFactoryResolver,
-              @Optional() public readonly formControl: NgControl,
-              public readonly utilsService: UtilsService) {
-  }
-
   private _config: IDatePickerDirectiveConfig;
 
   get config(): IDatePickerDirectiveConfig {
diff --git a/projects/ng2-date-picker/src/lib/date-picker/date-picker.service.ts b/projects/ng2-date-picker/src/lib/date-picker/date-picker.service.ts
@@ -1,4 +1,4 @@
-import {EventEmitter, Injectable} from '@angular/core';
+import { EventEmitter, Injectable, inject } from '@angular/core';
 import {IDatePickerConfig, IDatePickerConfigInternal} from './date-picker-config.model';
 
 import {UtilsService} from '../common/services/utils/utils.service';
@@ -15,6 +15,10 @@ import {ConnectionPositionPair} from '@angular/cdk/overlay';
   providedIn: 'root'
 })
 export class DatePickerService {
+  private readonly utilsService = inject(UtilsService);
+  private readonly timeSelectService = inject(TimeSelectService);
+  private readonly daytimeCalendarService = inject(DayTimeCalendarService);
+
   readonly onPickerClosed: EventEmitter<null> = new EventEmitter();
   private defaultConfig: IDatePickerConfigInternal = {
     closeOnSelect: true,
@@ -32,11 +36,6 @@ export class DatePickerService {
     hideOnOutsideClick: true,
   };
 
-  constructor(private readonly utilsService: UtilsService,
-              private readonly timeSelectService: TimeSelectService,
-              private readonly daytimeCalendarService: DayTimeCalendarService) {
-  }
-
   // todo:: add unit tests
   getConfig(config: IDatePickerConfig, mode: CalendarMode = 'daytime'): IDatePickerConfigInternal {
     const _config = <IDatePickerConfigInternal>{
diff --git a/projects/ng2-date-picker/src/lib/day-calendar/day-calendar.component.ts b/projects/ng2-date-picker/src/lib/day-calendar/day-calendar.component.ts
@@ -14,7 +14,8 @@ import {
   Output,
   SimpleChange,
   SimpleChanges,
-  ViewEncapsulation
+  ViewEncapsulation,
+  inject
 } from '@angular/core';
 import {DayCalendarService} from './day-calendar.service';
 
@@ -59,6 +60,10 @@ import {dayjsRef} from '../common/dayjs/dayjs.ref';
     standalone: false
 })
 export class DayCalendarComponent implements OnInit, OnChanges, ControlValueAccessor, Validator {
+  readonly dayCalendarService = inject(DayCalendarService);
+  readonly utilsService = inject(UtilsService);
+  readonly cd = inject(ChangeDetectorRef);
+
 
   @Input() config: IDayCalendarConfig;
   @Input() displayDate: SingleCalendarValue;
@@ -91,11 +96,6 @@ export class DayCalendarComponent implements OnInit, OnChanges, ControlValueAcce
     toggleCalendarMode: this.toggleCalendarMode.bind(this)
   };
 
-  constructor(public readonly dayCalendarService: DayCalendarService,
-              public readonly utilsService: UtilsService,
-              public readonly cd: ChangeDetectorRef) {
-  }
-
   _selected: Dayjs[];
 
   get selected(): Dayjs[] {
diff --git a/projects/ng2-date-picker/src/lib/day-calendar/day-calendar.service.ts b/projects/ng2-date-picker/src/lib/day-calendar/day-calendar.service.ts
@@ -1,4 +1,4 @@
-import {Injectable} from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 
 import {WeekDays} from '../common/types/week-days.type';
 import {UtilsService} from '../common/services/utils/utils.service';
@@ -12,6 +12,8 @@ import {dayjsRef} from '../common/dayjs/dayjs.ref';
   providedIn: 'root'
 })
 export class DayCalendarService {
+  private utilsService = inject(UtilsService);
+
   readonly DEFAULT_CONFIG: IDayCalendarConfig = {
     showNearMonthDays: true,
     showWeekNumbers: false,
@@ -26,9 +28,6 @@ export class DayCalendarService {
   };
   private readonly DAYS = ['su', 'mo', 'tu', 'we', 'th', 'fr', 'sa'];
 
-  constructor(private utilsService: UtilsService) {
-  }
-
   getConfig(config: IDayCalendarConfig): IDayCalendarConfigInternal {
     const _config = {
       ...this.DEFAULT_CONFIG,
diff --git a/projects/ng2-date-picker/src/lib/day-time-calendar/day-time-calendar.component.ts b/projects/ng2-date-picker/src/lib/day-time-calendar/day-time-calendar.component.ts
@@ -13,7 +13,8 @@ import {
   Output,
   SimpleChanges,
   ViewChild,
-  ViewEncapsulation
+  ViewEncapsulation,
+  inject
 } from '@angular/core';
 import {
   ControlValueAccessor,
@@ -59,6 +60,10 @@ import {INavEvent} from '../common/models/navigation-event.model';
     standalone: false
 })
 export class DayTimeCalendarComponent implements OnInit, OnChanges, ControlValueAccessor, Validator {
+  dayTimeCalendarService = inject(DayTimeCalendarService);
+  utilsService = inject(UtilsService);
+  cd = inject(ChangeDetectorRef);
+
 
   @Input() config: IDayTimeCalendarConfig;
   @Input() displayDate: SingleCalendarValue;
@@ -79,11 +84,6 @@ export class DayTimeCalendarComponent implements OnInit, OnChanges, ControlValue
     moveCalendarTo: this.moveCalendarTo.bind(this)
   };
 
-  constructor(public dayTimeCalendarService: DayTimeCalendarService,
-              public utilsService: UtilsService,
-              public cd: ChangeDetectorRef) {
-  }
-
   _selected: Dayjs;
 
   get selected(): Dayjs {
diff --git a/projects/ng2-date-picker/src/lib/day-time-calendar/day-time-calendar.service.ts b/projects/ng2-date-picker/src/lib/day-time-calendar/day-time-calendar.service.ts
@@ -1,4 +1,4 @@
-import {Injectable} from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 
 import {UtilsService} from '../common/services/utils/utils.service';
 import {DayCalendarService} from '../day-calendar/day-calendar.service';
@@ -16,12 +16,11 @@ const COMBINED_FORMAT = DAY_FORMAT + TIME_FORMAT;
     providedIn: 'root'
 })
 export class DayTimeCalendarService {
-  readonly DEFAULT_CONFIG: IDayTimeCalendarConfig = {};
+  private utilsService = inject(UtilsService);
+  private dayCalendarService = inject(DayCalendarService);
+  private timeSelectService = inject(TimeSelectService);
 
-  constructor(private utilsService: UtilsService,
-              private dayCalendarService: DayCalendarService,
-              private timeSelectService: TimeSelectService) {
-  }
+  readonly DEFAULT_CONFIG: IDayTimeCalendarConfig = {};
 
   getConfig(config: IDayTimeCalendarConfig): IDayTimeCalendarConfigInternal {
     const _config =  {
diff --git a/projects/ng2-date-picker/src/lib/month-calendar/month-calendar.component.ts b/projects/ng2-date-picker/src/lib/month-calendar/month-calendar.component.ts
@@ -12,7 +12,8 @@ import {
   Output,
   SimpleChange,
   SimpleChanges,
-  ViewEncapsulation
+  ViewEncapsulation,
+  inject
 } from '@angular/core';
 import {IMonth} from './month.model';
 import {MonthCalendarService} from './month-calendar.service';
@@ -56,6 +57,10 @@ import {dayjsRef} from '../common/dayjs/dayjs.ref';
     standalone: false
 })
 export class MonthCalendarComponent implements OnInit, OnChanges, ControlValueAccessor, Validator {
+  readonly monthCalendarService = inject(MonthCalendarService);
+  readonly utilsService = inject(UtilsService);
+  readonly cd = inject(ChangeDetectorRef);
+
 
   @Input() config: IMonthCalendarConfig;
   @Input() displayDate: Dayjs | string;
@@ -86,11 +91,6 @@ export class MonthCalendarComponent implements OnInit, OnChanges, ControlValueAc
     moveCalendarTo: this.moveCalendarTo.bind(this)
   };
 
-  constructor(public readonly monthCalendarService: MonthCalendarService,
-              public readonly utilsService: UtilsService,
-              public readonly cd: ChangeDetectorRef) {
-  }
-
   _selected: Dayjs[];
 
   get selected(): Dayjs[] {
diff --git a/projects/ng2-date-picker/src/lib/month-calendar/month-calendar.service.ts b/projects/ng2-date-picker/src/lib/month-calendar/month-calendar.service.ts
@@ -1,4 +1,4 @@
-import {Injectable} from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 
 import {UtilsService} from '../common/services/utils/utils.service';
 import {IMonth} from './month.model';
@@ -12,6 +12,8 @@ import {dayjsRef} from '../common/dayjs/dayjs.ref';
   providedIn: 'root'
 })
 export class MonthCalendarService {
+  private utilsService = inject(UtilsService);
+
   readonly DEFAULT_CONFIG: IMonthCalendarConfigInternal = {
     allowMultiSelect: false,
     yearFormat: 'YYYY',
@@ -24,9 +26,6 @@ export class MonthCalendarService {
     numOfMonthRows: 3
   };
 
-  constructor(private utilsService: UtilsService) {
-  }
-
   getConfig(config: IMonthCalendarConfig): IMonthCalendarConfigInternal {
     const _config = <IMonthCalendarConfigInternal>{
       ...this.DEFAULT_CONFIG,
diff --git a/projects/ng2-date-picker/src/lib/time-select/time-select.component.ts b/projects/ng2-date-picker/src/lib/time-select/time-select.component.ts
@@ -13,7 +13,8 @@ import {
   Output,
   SimpleChange,
   SimpleChanges,
-  ViewEncapsulation
+  ViewEncapsulation,
+  inject
 } from '@angular/core';
 import {TimeSelectService, TimeUnit} from './time-select.service';
 
@@ -56,6 +57,10 @@ import {dayjsRef} from '../common/dayjs/dayjs.ref';
     standalone: false
 })
 export class TimeSelectComponent implements OnInit, OnChanges, ControlValueAccessor, Validator {
+  readonly timeSelectService = inject(TimeSelectService);
+  readonly utilsService = inject(UtilsService);
+  readonly cd = inject(ChangeDetectorRef);
+
 
   @Input() config: ITimeSelectConfig;
   @Input() displayDate: SingleCalendarValue;
@@ -85,11 +90,6 @@ export class TimeSelectComponent implements OnInit, OnChanges, ControlValueAcces
     triggerChange: this.emitChange.bind(this)
   };
 
-  constructor(public readonly timeSelectService: TimeSelectService,
-              public readonly utilsService: UtilsService,
-              public readonly cd: ChangeDetectorRef) {
-  }
-
   _selected: Dayjs;
 
   get selected(): Dayjs {
diff --git a/projects/ng2-date-picker/src/lib/time-select/time-select.service.ts b/projects/ng2-date-picker/src/lib/time-select/time-select.service.ts
@@ -1,4 +1,4 @@
-import {Injectable} from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 
 import {UtilsService} from '../common/services/utils/utils.service';
 import {ITimeSelectConfig, ITimeSelectConfigInternal} from './time-select-config.model';
@@ -12,6 +12,8 @@ export const FIRST_PM_HOUR = 12;
   providedIn: 'root'
 })
 export class TimeSelectService {
+  private readonly utilsService = inject(UtilsService);
+
   readonly DEFAULT_CONFIG: ITimeSelectConfigInternal = {
     hours12Format: 'hh',
     hours24Format: 'HH',
@@ -25,9 +27,6 @@ export class TimeSelectService {
     timeSeparator: ':',
   };
 
-  constructor(private readonly utilsService: UtilsService) {
-  }
-
   getConfig(config: ITimeSelectConfig): ITimeSelectConfigInternal {
     const timeConfigs = {
       maxTime: this.utilsService.onlyTime(config && config.maxTime),
diff --git a/src/app/demo/demo.component.ts b/src/app/demo/demo.component.ts
@@ -2,7 +2,7 @@ import debounce from '../../../projects/ng2-date-picker/src/lib/common/decorator
 import {IDatePickerConfig} from '../../../projects/ng2-date-picker/src/lib/date-picker/date-picker-config.model';
 import {DatePickerComponent} from '../../../projects/ng2-date-picker/src/lib/date-picker/date-picker.component';
 import {DatePickerDirective} from '../../../projects/ng2-date-picker/src/lib/date-picker/date-picker.directive';
-import {Component, HostListener, OnInit, ViewChild} from '@angular/core';
+import {Component, HostListener, OnInit, ViewChild, inject} from '@angular/core';
 import {UntypedFormControl, UntypedFormGroup, Validators} from '@angular/forms';
 import dayjs, {Dayjs} from 'dayjs';
 import {GaService} from './common/services/ga/ga.service';
@@ -17,6 +17,8 @@ import {ISelectionEvent} from '../../../projects/ng2-date-picker/src/lib/common/
     standalone: false
 })
 export class DemoComponent implements OnInit {
+  private readonly gaService = inject(GaService);
+
   @ViewChild('dateComponent') dateComponent: DatePickerComponent;
   @ViewChild('donateForm') donateForm: any;
   @ViewChild('dateDirectivePicker') datePickerDirective: DatePickerDirective;
@@ -95,9 +97,6 @@ export class DemoComponent implements OnInit {
   formGroup: UntypedFormGroup;
   isAtTop: boolean = true;
 
-  constructor(private readonly gaService: GaService) {
-  }
-
   ngOnInit(): void {
     this.formGroup = this.buildForm();
   }
