feat(SwalComponent): add [swalVisible] input to reactively control mo…

…dal visibility
sweetalert2 · Dec 19, 2019 · 778949c · 778949c
1 parent 69acb91
commit 778949c
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 2 deletions.
diff --git a/projects/ngx-sweetalert2-demo/src/app/app.component.html b/projects/ngx-sweetalert2-demo/src/app/app.component.html
@@ -40,5 +40,26 @@ <h3><code>&lt;swal [swalFireOnInit]="true"&gt;&lt;/swal&gt;</code></h3>
 
 <hr>
 
+<h3><code>&lt;swal [swalVisible]="isSwalVisible"&gt;&lt;/swal&gt;</code></h3>
+
+<button (click)="isSwalVisible = true">Fire! by setting isSwalVisible = true</button>
+
+<p>
+    <code>[swalVisible]</code> provides a reactive way to change the modal visibility, if you do not want to use
+    <code>SwalComponent.fire()</code> or <code>SwalComponent.dismiss()</code>.<br>
+    This example uses a simple variable, but another common use case could be using an observable, binding it like this:
+    <code>&lt;swal [swalVisible]="currentError$ | async" [title]="currentError$ | async"&gt;</code>. Don't forget to reset
+    <code>currentError$</code> after though! (maybe <code>[swalFireOnInit]</code> with an <code>*ngIf</code> would be
+    simpler here).
+</p>
+
+<swal
+    text="isSwalVisible = {{ isSwalVisible }}"
+    [swalVisible]="isSwalVisible"
+    (afterClose)="isSwalVisible = false">
+</swal>
+
+<hr>
+
 <a routerLink="nested" routerLinkActive="nested-active">Load submodule</a>
 <router-outlet></router-outlet>
diff --git a/projects/ngx-sweetalert2-demo/src/app/app.component.ts b/projects/ngx-sweetalert2-demo/src/app/app.component.ts
@@ -7,4 +7,6 @@ import { Component } from '@angular/core';
 })
 export class AppComponent {
     public modalFireCondition = false;
+
+    public isSwalVisible = false;
 }
diff --git a/projects/ngx-sweetalert2/src/lib/swal.component.ts b/projects/ngx-sweetalert2/src/lib/swal.component.ts
@@ -139,7 +139,7 @@ export class SwalComponent implements OnInit, AfterViewInit, OnChanges, OnDestro
      * 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>
+     *     <swal *ngIf="error" [title]="error.title" [text]="error.text" icon="error" [swalFireOnInit]="true"></swal>
      */
     @Input()
     public swalFireOnInit?: boolean;
@@ -151,6 +151,15 @@ export class SwalComponent implements OnInit, AfterViewInit, OnChanges, OnDestro
     @Input()
     public swalDismissOnDestroy?: boolean;
 
+    @Input()
+    public set swalVisible(visible: boolean) {
+        visible ? this.fire() : this.dismiss();
+    }
+
+    public get swalVisible(): boolean {
+        return this.isCurrentlyShown;
+    }
+
     /**
      * Emits an event when the modal DOM element has been created.
      * Useful to perform DOM mutations before the modal is shown.
@@ -295,7 +304,7 @@ export class SwalComponent implements OnInit, AfterViewInit, OnChanges, OnDestro
      * Returns the SweetAlert2 promise for convenience and use in code behind templates.
      * Otherwise, (confirm)="myHandler($event)" and (cancel)="myHandler($event)" can be used in templates.
      */
-    public async fire(): Promise<any> {
+    public async fire(): Promise<SweetAlertResult> {
         const swal = await this.sweetAlert2Loader.swal;
 
         //=> Build the SweetAlert2 options