diff --git a/README.md b/README.md index 4d97e0c..9ab0889 100644 --- a/README.md +++ b/README.md @@ -32,26 +32,18 @@ npm install flatpickr angularx-flatpickr Next, in your `angular.json` add `"node_modules/flatpickr/dist/flatpickr.css"` to the `styles` array of your application -Then include in your apps module: - -```typescript -import { NgModule } from '@angular/core'; -import { FormsModule } from '@angular/forms'; -import { FlatpickrModule } from 'angularx-flatpickr'; - -@NgModule({ - imports: [FormsModule, FlatpickrModule.forRoot()], -}) -export class MyModule {} -``` - -Finally use in one of your apps components: +Then use in one of your apps components: ```typescript import { Component } from '@angular/core'; +import { FlatpickrDirective, provideFlatpickrDefaults } from 'angularx-flatpickr'; @Component({ - template: ` `, + imports: [FlatpickrDirective], + providers: [provideFlatpickrDefaults()], + template: ``, + standalone: true, + selector: 'my-component', }) export class MyComponent {} ``` diff --git a/projects/angularx-flatpickr/src/lib/flatpickr.directive.ts b/projects/angularx-flatpickr/src/lib/flatpickr.directive.ts index 0c350a6..291efcb 100644 --- a/projects/angularx-flatpickr/src/lib/flatpickr.directive.ts +++ b/projects/angularx-flatpickr/src/lib/flatpickr.directive.ts @@ -44,6 +44,7 @@ export const FLATPICKR_CONTROL_VALUE_ACCESSOR: any = { selector: '[mwlFlatpickr]', providers: [FLATPICKR_CONTROL_VALUE_ACCESSOR], exportAs: 'mwlFlatpickr', + standalone: true, }) export class FlatpickrDirective implements AfterViewInit, OnChanges, OnDestroy, ControlValueAccessor diff --git a/projects/angularx-flatpickr/src/lib/flatpickr.module.ts b/projects/angularx-flatpickr/src/lib/flatpickr.module.ts index 0b1c18f..d89f277 100644 --- a/projects/angularx-flatpickr/src/lib/flatpickr.module.ts +++ b/projects/angularx-flatpickr/src/lib/flatpickr.module.ts @@ -12,16 +12,31 @@ import { export const USER_DEFAULTS = new InjectionToken('flatpickr defaults'); -export function defaultsFactory( - userDefaults: FlatpickrDefaultsInterface, -): FlatpickrDefaults { - const defaults: FlatpickrDefaults = new FlatpickrDefaults(); - Object.assign(defaults, userDefaults); - return defaults; +export function provideFlatpickrDefaults( + userDefaults: FlatpickrDefaultsInterface = {}, +): Provider[] { + return [ + { + provide: USER_DEFAULTS, + useValue: userDefaults, + }, + { + provide: FlatpickrDefaults, + useFactory() { + const defaults: FlatpickrDefaults = new FlatpickrDefaults(); + Object.assign(defaults, userDefaults); + return defaults; + }, + deps: [USER_DEFAULTS], + }, + ]; } +/** + * @deprecated Will be removed in the next major version. Please use the standalone `FlatpickrDirective` and `provideFlatpickrDefaults()` instead. + */ @NgModule({ - declarations: [FlatpickrDirective], + imports: [FlatpickrDirective], exports: [FlatpickrDirective], }) export class FlatpickrModule { @@ -30,17 +45,7 @@ export class FlatpickrModule { ): ModuleWithProviders { return { ngModule: FlatpickrModule, - providers: [ - { - provide: USER_DEFAULTS, - useValue: userDefaults, - }, - { - provide: FlatpickrDefaults, - useFactory: defaultsFactory, - deps: [USER_DEFAULTS], - }, - ], + providers: provideFlatpickrDefaults(userDefaults), }; } } diff --git a/projects/demo/app/demo.component.ts b/projects/demo/app/demo.component.ts index f258d3d..30f205d 100644 --- a/projects/demo/app/demo.component.ts +++ b/projects/demo/app/demo.component.ts @@ -1,7 +1,16 @@ import { Component, ViewEncapsulation } from '@angular/core'; +import { + FlatpickrDirective, + provideFlatpickrDefaults, +} from 'angularx-flatpickr'; +import { FormsModule } from '@angular/forms'; +import { JsonPipe } from '@angular/common'; @Component({ selector: 'mwl-demo-app', + standalone: true, + imports: [FlatpickrDirective, FormsModule, JsonPipe], + providers: [provideFlatpickrDefaults()], template: `
diff --git a/projects/demo/app/demo.module.ts b/projects/demo/app/demo.module.ts deleted file mode 100644 index f43f1bb..0000000 --- a/projects/demo/app/demo.module.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { NgModule } from '@angular/core'; -import { FormsModule } from '@angular/forms'; -import { BrowserModule } from '@angular/platform-browser'; -import { DemoComponent } from './demo.component'; -import { FlatpickrModule } from 'angularx-flatpickr'; - -@NgModule({ - declarations: [DemoComponent], - imports: [BrowserModule, FormsModule, FlatpickrModule.forRoot()], - bootstrap: [DemoComponent], -}) -export class DemoModule {} diff --git a/projects/demo/main.ts b/projects/demo/main.ts index 524e537..b485510 100644 --- a/projects/demo/main.ts +++ b/projects/demo/main.ts @@ -1,13 +1,11 @@ import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { bootstrapApplication } from '@angular/platform-browser'; -import { DemoModule } from './app/demo.module'; import { environment } from './environments/environment'; +import { DemoComponent } from './app/demo.component'; if (environment.production) { enableProdMode(); } -platformBrowserDynamic() - .bootstrapModule(DemoModule) - .catch((err) => console.error(err)); +bootstrapApplication(DemoComponent).catch((err) => console.error(err));