feat(SweetAlert2Module, SwalComponent): implement "fire on init" stra…

…tegy

Closes #145

projects/ngx-sweetalert2-demo/src/app/app.component.html

@@ -21,5 +21,24 @@ <h3>Using the <code>[swal]="swalRef"</code> syntax with a <code>&lt;swal #swalRe
 
 <hr>
 
+<h3><code>&lt;swal [swalFireOnInit]="true"&gt;&lt;/swal&gt;</code></h3>
+
+<button (click)="modalFireCondition = true">Fire! by setting modalFireCondition = true</button>
+<p>
+    The modal's presence in the DOM is conditioned by the <code>modalFireCondition</code> variable.<br>
+    As soon as this variable is set to <code>true</code>, the <code>*ngIf</code> on the <code>&lt;swal&gt;</code> element
+    creates the component, and the modal fires immediately since it has <code>[swalFireOnInit]="true"</code>.<br>
+    When the modal is closed, <code>modalFireCondition</code> is reset to <code>false</code>, the modal component is
+    then destroyed by <code>*ngIf</code>, so you can click the button again.
+</p>
+<swal
+    *ngIf="modalFireCondition"
+    text="modalFireCondition = {{ modalFireCondition }}"
+    [swalFireOnInit]="true"
+    (afterClose)="modalFireCondition = false">
+</swal>
+
+<hr>
+
 <a routerLink="nested" routerLinkActive="nested-active">Load submodule</a>
 <router-outlet></router-outlet>

projects/ngx-sweetalert2-demo/src/app/app.component.ts

@@ -6,5 +6,5 @@ import { Component } from '@angular/core';
     styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-    public show = false;
+    public modalFireCondition = false;
 }

projects/ngx-sweetalert2/src/lib/di.ts

@@ -1,6 +1,8 @@
 import { InjectionToken } from '@angular/core';
 import Swal from 'sweetalert2';
 
-export const swalProviderToken = new InjectionToken<typeof Swal>('@sweetalert2/ngx-sweetalert2#swalLibraryToken');
+export const swalProviderToken = new InjectionToken<typeof Swal>('@sweetalert2/ngx-sweetalert2#swalProvider');
 
-export const dismissOnDestroyToken = new InjectionToken<typeof Swal>('@sweetalert2/ngx-sweetalert2#dismissOnDestroy');
+export const fireOnInitToken = new InjectionToken<boolean>('@sweetalert2/ngx-sweetalert2#fireOnInit');
+
+export const dismissOnDestroyToken = new InjectionToken<boolean>('@sweetalert2/ngx-sweetalert2#dismissOnDestroy');

projects/ngx-sweetalert2/src/lib/swal.component.spec.ts

@@ -1,5 +1,5 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { dismissOnDestroyToken, swalProviderToken } from './di';
+import { dismissOnDestroyToken, fireOnInitToken, swalProviderToken } from './di';
 
 import { SwalComponent } from './swal.component';
 import { SweetAlert2LoaderService } from './sweetalert2-loader.service';
@@ -13,6 +13,7 @@ describe('NgxSweetalert2Component', () => {
             providers: [
                 SweetAlert2LoaderService,
                 { provide: swalProviderToken, useValue: () => import('sweetalert2') },
+                { provide: fireOnInitToken, useValue: false },
                 { provide: dismissOnDestroyToken, useValue: true }
             ],
             declarations: [SwalComponent]

projects/ngx-sweetalert2/src/lib/swal.component.ts

@@ -1,8 +1,9 @@
 import {
+    AfterViewInit,
     ChangeDetectionStrategy, Component, EventEmitter, Inject, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges
 } from '@angular/core';
 import Swal, { SweetAlertOptions, SweetAlertResult } from 'sweetalert2';
-import { dismissOnDestroyToken } from './di';
+import { dismissOnDestroyToken, fireOnInitToken } from './di';
 import * as events from './swal-events';
 import { SweetAlert2LoaderService } from './sweetalert2-loader.service';
 
@@ -32,7 +33,7 @@ import { SweetAlert2LoaderService } from './sweetalert2-loader.service';
     template: '',
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class SwalComponent implements OnInit, OnChanges, OnDestroy {
+export class SwalComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy {
     @Input() public title: SweetAlertOptions['title'];
     @Input() public titleText: SweetAlertOptions['titleText'];
     @Input() public text: SweetAlertOptions['text'];
@@ -133,9 +134,19 @@ export class SwalComponent implements OnInit, OnChanges, OnDestroy {
         return options;
     }
 
+    /**
+     * Whether to fire the modal as soon as the <swal> component is created and initialized in the view.
+     * When left undefined (default), the value will be inherited from the module configuration, which is `false`.
+     *
+     * Example:
+     *     <swal *ngIf="error" [title]="error.title" [text]="error.text" icon="error"></swal>
+     */
+    @Input()
+    public swalFireOnInit?: boolean;
+
     /**
      * Whether to dismiss the modal when the <swal> component is destroyed by Angular (for any reason) or not.
-     * When left undefined (default), the value will be inherited from the module configuration.
+     * When left undefined (default), the value will be inherited from the module configuration, which is `true`.
      */
     @Input()
     public swalDismissOnDestroy?: boolean;
@@ -144,29 +155,34 @@ export class SwalComponent implements OnInit, OnChanges, OnDestroy {
      * Emits an event when the modal DOM element has been created.
      * Useful to perform DOM mutations before the modal is shown.
      */
-    @Output() public readonly beforeOpen = new EventEmitter<events.BeforeOpenEvent>();
+    @Output()
+    public readonly beforeOpen = new EventEmitter<events.BeforeOpenEvent>();
 
     /**
      * Emits an event when the modal is shown.
      */
-    @Output() public readonly open = new EventEmitter<events.OpenEvent>();
+    @Output()
+    public readonly open = new EventEmitter<events.OpenEvent>();
 
     /**
      * Emits an event when the modal DOM is rendered.
      */
-    @Output() public readonly render = new EventEmitter<events.RenderEvent>();
+    @Output()
+    public readonly render = new EventEmitter<events.RenderEvent>();
 
     /**
      * Emits an event when the modal will be closed.
      * If you just want to know when the user dismissed the modal, prefer the higher-level (cancel) output.
      */
-    @Output() public readonly close = new EventEmitter<events.CloseEvent>();
+    @Output()
+    public readonly close = new EventEmitter<events.CloseEvent>();
 
     /**
      * Emits an event after the modal had been closed.
      * If you just want to know when the user dismissed the modal, prefer the higher-level (cancel) output.
      */
-    @Output() public readonly afterClose = new EventEmitter<void>();
+    @Output()
+    public readonly afterClose = new EventEmitter<void>();
 
     /**
      * Emits when the user clicks "Confirm".
@@ -179,7 +195,8 @@ export class SwalComponent implements OnInit, OnChanges, OnDestroy {
      *         // ... save user email
      *     }
      */
-    @Output() public readonly confirm = new EventEmitter<any>();
+    @Output()
+    public readonly confirm = new EventEmitter<any>();
 
     /**
      * Emits when the user clicks "Cancel", or dismisses the modal by any other allowed way.
@@ -194,7 +211,8 @@ export class SwalComponent implements OnInit, OnChanges, OnDestroy {
      *         // ... do something
      *     }
      */
-    @Output() public readonly cancel = new EventEmitter<Swal.DismissReason | undefined>();
+    @Output()
+    public readonly cancel = new EventEmitter<Swal.DismissReason | undefined>();
 
     /**
      * This Set retains the properties that have been changed from @Inputs, so we can know precisely
@@ -215,6 +233,7 @@ export class SwalComponent implements OnInit, OnChanges, OnDestroy {
 
     public constructor(
         private readonly sweetAlert2Loader: SweetAlert2LoaderService,
+        @Inject(fireOnInitToken) private readonly moduleLevelFireOnInit: boolean,
         @Inject(dismissOnDestroyToken) private readonly moduleLevelDismissOnDestroy: boolean) {
     }
 
@@ -229,6 +248,18 @@ export class SwalComponent implements OnInit, OnChanges, OnDestroy {
         this.sweetAlert2Loader.preloadSweetAlertLibrary();
     }
 
+    /**
+     * Angular lifecycle hook.
+     * Fires the modal, if the component or module is configured to do so.
+     */
+    public ngAfterViewInit(): void {
+        const fireOnInit = this.swalFireOnInit === undefined
+            ? this.moduleLevelFireOnInit
+            : this.swalFireOnInit;
+
+        fireOnInit && this.fire();
+    }
+
     /**
      * Angular lifecycle hook.
      * Updates the SweetAlert options, and if the modal is opened, asks SweetAlert to render it again.

projects/ngx-sweetalert2/src/lib/sweetalert2.module.ts

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { ModuleWithProviders, NgModule } from '@angular/core';
-import { dismissOnDestroyToken, swalProviderToken } from './di';
+import { dismissOnDestroyToken, fireOnInitToken, swalProviderToken } from './di';
 import { SwalPortalComponent } from './swal-portal.component';
 import { SwalPortalDirective } from './swal-portal.directive';
 import { SwalComponent } from './swal.component';
@@ -9,6 +9,7 @@ import { SwalProvider, SweetAlert2LoaderService } from './sweetalert2-loader.ser
 
 export interface Sweetalert2ModuleConfig {
     provideSwal?: SwalProvider;
+    fireOnInit?: boolean;
     dismissOnDestroy?: boolean;
 }
 
@@ -37,6 +38,7 @@ export class SweetAlert2Module {
             providers: [
                 SweetAlert2LoaderService,
                 { provide: swalProviderToken, useValue: options.provideSwal || provideDefaultSwal },
+                { provide: fireOnInitToken, useValue: options.fireOnInit || false },
                 { provide: dismissOnDestroyToken, useValue: options.dismissOnDestroy || true }
             ]
         };
@@ -50,6 +52,9 @@ export class SweetAlert2Module {
                     SweetAlert2LoaderService,
                     { provide: swalProviderToken, useValue: options.provideSwal }
                 ] : [],
+                ...options.fireOnInit !== undefined ? [
+                    { provide: fireOnInitToken, useValue: options.fireOnInit }
+                ] : [],
                 ...options.dismissOnDestroy !== undefined ? [
                     { provide: dismissOnDestroyToken, useValue: options.dismissOnDestroy }
                 ] : []