feat: Add provider function, convert to standalone and use inject (#991)

Author: eneajaho

src/app/app.module.ts

@@ -5,7 +5,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { GhButtonModule } from '@ctrl/ngx-github-buttons';
 
-import { ToastrModule, ToastContainerModule, ToastNoAnimationModule } from '../lib/public_api';
+import { ToastNoAnimationModule, ToastContainerDirective } from '../lib/public_api';
 
 import { AppComponent } from './app.component';
 import { FooterComponent } from './footer/footer.component';
@@ -14,6 +14,7 @@ import { HomeComponent } from './home/home.component';
 import { NotyfToast } from './notyf.toast';
 import { PinkToast } from './pink.toast';
 import { BootstrapToast } from './bootstrap.toast';
+import { provideToastr } from '../lib/toastr/toast.provider';
 
 @NgModule({
   declarations: [
@@ -30,10 +31,10 @@ import { BootstrapToast } from './bootstrap.toast';
     FormsModule,
     BrowserAnimationsModule,
     ToastNoAnimationModule,
-    ToastrModule.forRoot(),
-    ToastContainerModule,
+    ToastContainerDirective,
     GhButtonModule,
   ],
+  providers: [provideToastr()],
   bootstrap: [AppComponent],
 })
 export class AppModule {}

src/lib/overlay/overlay-container.ts

@@ -1,13 +1,12 @@
 import { DOCUMENT } from '@angular/common';
-import { Inject, Injectable, OnDestroy } from '@angular/core';
+import { inject, Injectable, OnDestroy } from '@angular/core';
 
 /** Container inside which all toasts will render. */
 @Injectable({ providedIn: 'root' })
 export class OverlayContainer implements OnDestroy {
+  protected _document = inject(DOCUMENT);
   protected _containerElement!: HTMLElement;
 
-  constructor(@Inject(DOCUMENT) protected _document: any) {}
-
   ngOnDestroy() {
     if (this._containerElement && this._containerElement.parentNode) {
       this._containerElement.parentNode.removeChild(this._containerElement);

src/lib/overlay/overlay.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import { DOCUMENT } from '@angular/common';
-import { ApplicationRef, ComponentFactoryResolver, Inject, Injectable } from '@angular/core';
+import { ApplicationRef, ComponentFactoryResolver, inject, Inject, Injectable } from '@angular/core';
 
 import { DomPortalHost } from '../portal/dom-portal-host';
 import { ToastContainerDirective } from '../toastr/toast.directive';
@@ -17,15 +17,14 @@ import { OverlayRef } from './overlay-ref';
  */
 @Injectable({ providedIn: 'root' })
 export class Overlay {
+  private _overlayContainer = inject(OverlayContainer);
+  private _componentFactoryResolver = inject(ComponentFactoryResolver);
+  private _appRef = inject(ApplicationRef);
+  private _document = inject(DOCUMENT);
+
   // Namespace panes by overlay container
   private _paneElements: Map<ToastContainerDirective, Record<string, HTMLElement>> = new Map();
 
-  constructor(
-    private _overlayContainer: OverlayContainer,
-    private _componentFactoryResolver: ComponentFactoryResolver,
-    private _appRef: ApplicationRef,
-    @Inject(DOCUMENT) private _document: any,
-  ) {}
   /**
    * Creates an overlay.
    * @returns A reference to the created overlay.

src/lib/public_api.ts

@@ -3,6 +3,7 @@ export * from './toastr/toast.component';
 export * from './toastr/toastr.service';
 export * from './toastr/toastr-config';
 export * from './toastr/toastr.module';
+export * from './toastr/toast.provider';
 export * from './toastr/toast-ref';
 export * from './toastr/toast-noanimation.component';
 

src/lib/toastr/toast-noanimation.component.ts

@@ -1,4 +1,4 @@
-import { CommonModule } from '@angular/common';
+import { NgIf } from '@angular/common';
 import { ModuleWithProviders } from '@angular/core';
 import {
   ApplicationRef,
@@ -40,6 +40,8 @@ import { ToastrService } from './toastr.service';
     <div class="toast-progress" [style.width]="width + '%'"></div>
   </div>
   `,
+  standalone: true,
+  imports: [NgIf]
 })
 export class ToastNoAnimation implements OnDestroy {
   message?: string | null;
@@ -220,8 +222,7 @@ export const DefaultNoAnimationsGlobalConfig: GlobalConfig = {
 };
 
 @NgModule({
-  imports: [CommonModule],
-  declarations: [ToastNoAnimation],
+  imports: [ToastNoAnimation],
   exports: [ToastNoAnimation],
 })
 export class ToastNoAnimationModule {

src/lib/toastr/toast.component.ts

@@ -10,8 +10,9 @@ import {
   HostBinding,
   HostListener,
   NgZone,
-  OnDestroy
+  OnDestroy,
 } from '@angular/core';
+import { NgIf } from '@angular/common';
 import { Subscription } from 'rxjs';
 import { IndividualConfig, ToastPackage } from './toastr-config';
 import { ToastrService } from './toastr.service';
@@ -43,15 +44,17 @@ import { ToastrService } from './toastr.service';
       state('removed', style({ opacity: 0 })),
       transition(
         'inactive => active',
-        animate('{{ easeTime }}ms {{ easing }}')
+        animate('{{ easeTime }}ms {{ easing }}'),
       ),
       transition(
         'active => removed',
-        animate('{{ easeTime }}ms {{ easing }}')
-      )
-    ])
+        animate('{{ easeTime }}ms {{ easing }}'),
+      ),
+    ]),
   ],
-  preserveWhitespaces: false
+  preserveWhitespaces: false,
+  standalone: true,
+  imports: [ NgIf ],
 })
 export class Toast<ConfigPayload = any> implements OnDestroy {
   message?: string | null;
@@ -206,7 +209,7 @@ export class Toast<ConfigPayload = any> implements OnDestroy {
       clearTimeout(this.timeout);
       this.options.timeOut = 0;
       this.hideTime = 0;
-  
+
       // disable progressBar
       clearInterval(this.intervalId);
       this.width = 0;

src/lib/toastr/toast.directive.ts

@@ -1,22 +1,13 @@
-import {
-  Directive,
-  ElementRef,
-  NgModule,
-} from '@angular/core';
+import { Directive, ElementRef } from '@angular/core';
 
 @Directive({
   selector: '[toastContainer]',
   exportAs: 'toastContainer',
+  standalone: true
 })
 export class ToastContainerDirective {
   constructor(private el: ElementRef) { }
   getContainerElement(): HTMLElement {
     return this.el.nativeElement;
   }
 }
-
-@NgModule({
-  declarations: [ToastContainerDirective],
-  exports: [ToastContainerDirective],
-})
-export class ToastContainerModule {}

src/lib/toastr/toast.provider.ts

@@ -0,0 +1,42 @@
+import { DefaultNoComponentGlobalConfig, GlobalConfig, TOAST_CONFIG } from './toastr-config';
+import { EnvironmentProviders, makeEnvironmentProviders, Provider } from '@angular/core';
+import { Toast } from './toast.component';
+
+export const DefaultGlobalConfig: GlobalConfig = {
+  ...DefaultNoComponentGlobalConfig,
+  toastComponent: Toast,
+};
+
+/**
+ * @description
+ * Provides the `TOAST_CONFIG` token with the given config.
+ *
+ * @param config The config to configure toastr.
+ * @returns The environment providers.
+ *
+ * @example
+ * ```ts
+ * import { provideToastr } from 'ngx-toastr';
+ *
+ * bootstrap(AppComponent, {
+ *   providers: [
+ *     provideToastr({
+ *       timeOut: 2000,
+ *       positionClass: 'toast-top-right',
+ *     }),
+ *   ],
+ * })
+ */
+export const provideToastr = (config: Partial<GlobalConfig> = {}): EnvironmentProviders => {
+  const providers: Provider[] = [
+    {
+      provide: TOAST_CONFIG,
+      useValue: {
+        default: DefaultGlobalConfig,
+        config,
+      }
+    }
+  ];
+
+  return makeEnvironmentProviders(providers);
+};

src/lib/toastr/toastr.module.ts

@@ -1,39 +1,23 @@
-import { CommonModule } from '@angular/common';
 import { ModuleWithProviders, NgModule } from '@angular/core';
 
 import { Toast } from './toast.component';
 import { DefaultNoComponentGlobalConfig, GlobalConfig, TOAST_CONFIG } from './toastr-config';
-
-export const DefaultGlobalConfig: GlobalConfig = {
-  ...DefaultNoComponentGlobalConfig,
-  toastComponent: Toast,
-};
+import { provideToastr } from './toast.provider';
 
 @NgModule({
-  imports: [CommonModule],
-  declarations: [Toast],
+  imports: [Toast],
   exports: [Toast],
 })
 export class ToastrModule {
   static forRoot(config: Partial<GlobalConfig> = {}): ModuleWithProviders<ToastrModule> {
     return {
       ngModule: ToastrModule,
-      providers: [
-        {
-          provide: TOAST_CONFIG,
-          useValue: {
-            default: DefaultGlobalConfig,
-            config,
-          },
-        },
-      ],
+      providers: [provideToastr(config)],
     };
   }
 }
 
-@NgModule({
-  imports: [CommonModule],
-})
+@NgModule({})
 export class ToastrComponentlessModule {
   static forRoot(config: Partial<GlobalConfig> = {}): ModuleWithProviders<ToastrModule> {
     return {