Migrate source to angular 19 standalone

projects/angular-datepicker2/src/lib/calendar/angular-datepicker2.component.ts

@@ -24,13 +24,18 @@ import {
   DisabledDates,
 } from "../interfaces";
 import { DayDirective } from "../day.directive";
+import { MonthViewComponent } from "../month-view/month-view.component";
+import { YearSelectComponent } from "../year-select/year-select.component";
+import { CommonModule } from "@angular/common";
 
 @Component({
   selector: "angular-datepicker2",
   templateUrl: "./angular-datepicker2.component.html",
   styleUrls: ["./angular-datepicker2.component.scss"],
   providers: [CalendarService],
   encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [CommonModule, MonthViewComponent, YearSelectComponent, DayDirective],
 })
 export class AngularDatepicker2
   implements

projects/angular-datepicker2/src/lib/day-view/day-view.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from "@angular/core/testing";
+import { ComponentFixture, TestBed } from "@angular/core/testing";
 import { DayViewComponent } from './day-view.component';
 import { DayService } from '../_service/day.service';
 import { CalendarService } from '../_service/calendar.service';
@@ -10,15 +10,12 @@ describe("DayViewComponent", () => {
     let calendarService;
 
 
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-            declarations: [
-                DayViewComponent,
-            ],
-            imports: [],
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [DayViewComponent],
             providers: []
         }).compileComponents();
-    }));
+    });
 
     beforeEach(() => {
         fixture = TestBed.createComponent(DayViewComponent);

projects/angular-datepicker2/src/lib/day-view/day-view.component.ts

@@ -11,12 +11,15 @@ import { CalendarService } from "../_service/calendar.service";
 import { DayService } from "../_service/day.service";
 import { Subscription } from "rxjs";
 import { DayDirective } from "../day.directive";
+import { CommonModule } from "@angular/common";
 
 @Component({
   selector: "app-day-view",
   templateUrl: "./day-view.component.html",
   styleUrls: ["./day-view.component.scss"],
   providers: [DayService],
+  standalone: true,
+  imports: [CommonModule],
 })
 export class DayViewComponent implements OnInit, OnChanges, OnDestroy {
   @Input() date: Date;

projects/angular-datepicker2/src/lib/day.directive.ts

@@ -2,7 +2,7 @@ import { ViewContainerRef, Directive, Input, TemplateRef } from "@angular/core";
 
 @Directive({
   selector: "[ad2day]",
-  //providers: [TemplateRef],
+  standalone: true,
 })
 export class DayDirective {
   context: any | null = null;

projects/angular-datepicker2/src/lib/month-select/month-select.component.ts

@@ -1,10 +1,13 @@
 import { Component, OnInit, Input, ViewChild, ElementRef } from "@angular/core";
 import { CalendarService } from "../_service/calendar.service";
+import { CommonModule } from "@angular/common";
 
 @Component({
   selector: "app-month-select",
   templateUrl: "./month-select.component.html",
-  styleUrls: ["./month-select.component.scss"]
+  styleUrls: ["./month-select.component.scss"],
+  standalone: true,
+  imports: [CommonModule],
 })
 export class MonthSelectComponent implements OnInit {
   constructor(private calendarService: CalendarService) { }

projects/angular-datepicker2/src/lib/month-view/month-view.component.ts

@@ -12,12 +12,16 @@ import { CalendarService } from "../_service/calendar.service";
 import { MonthService } from "../_service/month.service";
 import { Subscription } from "rxjs";
 import { DayDirective } from "../day.directive";
+import { WeekViewComponent } from "../week-view/week-view.component";
+import { CommonModule } from "@angular/common";
 
 @Component({
   selector: "app-month-view",
   templateUrl: "./month-view.component.html",
   styleUrls: ["./month-view.component.scss"],
   providers: [MonthService],
+  standalone: true,
+  imports: [CommonModule, WeekViewComponent],
 })
 export class MonthViewComponent implements OnInit, OnDestroy {
   @Input() date: Date;

projects/angular-datepicker2/src/lib/week-view/week-view.component.ts

@@ -1,12 +1,16 @@
 import { Component, OnInit, Input } from "@angular/core";
 import { DayDirective } from "../day.directive";
 import { WeekService } from "../_service/week.service";
+import { DayViewComponent } from "../day-view/day-view.component";
+import { CommonModule } from "@angular/common";
 
 @Component({
   selector: "app-week-view",
   templateUrl: "./week-view.component.html",
   styleUrls: ["./week-view.component.scss"],
   providers: [WeekService],
+  standalone: true,
+  imports: [CommonModule, DayViewComponent],
 })
 export class WeekViewComponent implements OnInit {
   @Input() date: Date;

projects/angular-datepicker2/src/lib/year-select/year-select.component.ts

@@ -1,9 +1,13 @@
 import { Component, OnInit } from '@angular/core';
+import { MonthSelectComponent } from "../month-select/month-select.component";
+import { CommonModule } from "@angular/common";
 
 @Component({
   selector: 'app-year-select',
   templateUrl: './year-select.component.html',
-  styleUrls: ['./year-select.component.scss']
+  styleUrls: ['./year-select.component.scss'],
+  standalone: true,
+  imports: [CommonModule, MonthSelectComponent],
 })
 export class YearSelectComponent implements OnInit {
 

projects/angular-datepicker2/src/public-api.ts

@@ -3,6 +3,10 @@
  */
 
 export * from "./lib/calendar/angular-datepicker2.component";
-export * from "./lib/angular-datepicker2.module";
 export * from "./lib/interfaces";
 export * from "./lib/day.directive";
+export * from "./lib/month-view/month-view.component";
+export * from "./lib/day-view/day-view.component";
+export * from "./lib/week-view/week-view.component";
+export * from "./lib/month-select/month-select.component";
+export * from "./lib/year-select/year-select.component";

src/app/app.component.spec.ts

@@ -1,14 +1,12 @@
-import { TestBed, async } from '@angular/core/testing';
+import { TestBed } from '@angular/core/testing';
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [
-        AppComponent
-      ],
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AppComponent],
     }).compileComponents();
-  }));
+  });
 
   it('should create the app', () => {
     const fixture = TestBed.createComponent(AppComponent);

src/app/app.component.ts

@@ -6,12 +6,18 @@ import {
   ViewMode,
   Suggest,
   DisabledDates,
+  AngularDatepicker2,
+  DayDirective,
 } from "projects/angular-datepicker2/src/public-api";
+import { FormsModule } from "@angular/forms";
+import { CommonModule } from "@angular/common";
 
 @Component({
   selector: "app-root",
   templateUrl: "./app.component.html",
   styleUrls: ["./app.component.scss"],
+  standalone: true,
+  imports: [CommonModule, FormsModule, AngularDatepicker2, DayDirective],
 })
 export class AppComponent implements OnInit {
   title = "angular-datepicker";

src/main.ts

@@ -1,12 +1,20 @@
 import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { LOCALE_ID } from '@angular/core';
+import { registerLocaleData } from '@angular/common';
+import localeEn from '@angular/common/locales/en';
 
-import { AppModule } from './app/app.module';
+import { AppComponent } from './app/app.component';
 import { environment } from './environments/environment';
 
+registerLocaleData(localeEn, 'en');
+
 if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.error(err));
+bootstrapApplication(AppComponent, {
+  providers: [
+    { provide: LOCALE_ID, useValue: 'en' }
+  ]
+}).catch(err => console.error(err));