title: Sweet Alert On Ionic 4, Output Alert Inside Typescript File
body: <p>i am developing a forgot password process, the forgot password process are as below</p>
  
  <ol>
  <li>user key in email to reset password,</li>
  <li>upon user click on submit, a process will be send to server side for backend processing (in this case i make PHP as backend, MySQL is used as database),</li>
  <li>upon email have been successfully submitted, a sweet alert popup will appear telling user that the email was sent successfully</li>
  </ol>
  
  <p>the process that i want to be happened that i am unable to do so is <strong><em>Sweet Alert to appear only after email has been successfuly send, the process happen after a certain value is received on .ts file</em></strong></p>
  
  <p>below are my code at <strong>forget-password.page.html</strong></p>
  
  <pre><code>
  // CODE NO 1 
  &lt;button (click)="confirmSentForgotPassword()" style="letter-spacing: 1px" button margin-top&gt;
        SUBMIT
  &lt;/button&gt;
  
  // CODE NO 2
  //&lt;button [swal]="submit" style="letter-spacing: 1px" button margin-top&gt;
  //     SUBMIT
  //&lt;/button&gt;
  
  &lt;swal
          #submit
          title="Check Your Email"
          text="An email has been sent to that address containing a link to reset your password."
          type="success"
          (confirm)="dismiss()"&gt;
  &lt;/swal&gt;
  </code></pre>
  
  <p>if i use code no 2, i am able to output swal on button submit but i dont want to do this because i want swal to appear upon emel have been successfully submitted,</p>
  
  <p>below are my code at <strong>forget-password.page.ts</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { ModalController } from '@ionic/angular';
  
  import { SweetAlert2Module } from '@sweetalert2/ngx-sweetalert2';
  import { PostProvider } from 'src/providers/post-provider';
  
  import {
    LoadingController,
    ToastController
  } from '@ionic/angular';
  
  @Component({
    selector: 'app-forget-password',
    templateUrl: './forget-password.page.html',
    styleUrls: ['./forget-password.page.scss'],
  })
  export class ForgetPasswordPage implements OnInit {
  
    email: string = null;
  
    constructor(
      private modalCtrl: ModalController, 
      public swal: SweetAlert2Module,
      private loadingCtrl: LoadingController,
      private postPvdr: PostProvider,
      private toastCtrl: ToastController,
      ) { }
  
    ngOnInit() {
    }
  
    async dismiss() {
      this.modalCtrl.dismiss();
    }
  
    async confirmSentForgotPassword() {
  
      let body = {
        action: 'emel-forgot-password',
        email: this.email
      };
  
      let loading = await this.loadingCtrl.create({
        message: 'Loading...'
      });
      await loading.present();
  
      this.postPvdr.postData(body, 'forgotpassword-api.php').subscribe(async data2 =&gt;{
          loading.dismiss();
  
          // CODE ALERT 
          // this.swal({
          //   title: "Check Your Email",
          //   text: "An email has been sent to that address containing a link to reset your password.",
          //   type: "success",
          //   showCancelButton: true,
          //   confirmButtonColor: "#DD6B55",
          //   closeOnConfirm: true
          // },
          // confirmed =&gt; {
          //    if(confirmed) {
          //        this.dismiss();
          //    }
          // });
  
          const toast = await this.toastCtrl.create({
            message: data2.msg,
            duration: 2000
          });
  
          toast.present();
  
      },async err=&gt;{
        loading.dismiss();
  
        console.log(err);
  
        const toast = await this.toastCtrl.create({
          message: "Error On Server Side ",
          duration: 2000
        });
  
        toast.present();
  
      });
  
    }
  
  }
  
  
  </code></pre>
  
  <p>i have tried using below reference</p>
  
  <p><a href="https://stackoverflow.com/questions/38958932/using-sweet-alert-with-typescript-class">Using Sweet alert with Typescript class</a></p>
  
  <p>but when the swal is used the error below come out on my VSCode</p>
  
  <pre><code>This expression is not callable. Type 'SweetAlert2Module' has no call signatures.
  </code></pre>