Sweet Alert On Ionic 4, Output Alert Inside Typescript File

Question

i am developing a forgot password process, the forgot password process are as below

user key in email to reset password,
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),
upon email have been successfully submitted, a sweet alert popup will appear telling user that the email was sent successfully

the process that i want to be happened that i am unable to do so is Sweet Alert to appear only after email has been successfuly send, the process happen after a certain value is received on .ts file

below are my code at forget-password.page.html


// CODE NO 1 
<button (click)="confirmSentForgotPassword()" style="letter-spacing: 1px" button margin-top>
      SUBMIT
</button>

// CODE NO 2
//<button [swal]="submit" style="letter-spacing: 1px" button margin-top>
//     SUBMIT
//</button>

<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()">
</swal>

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,

below are my code at forget-password.page.ts

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 =>{
        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 => {
        //    if(confirmed) {
        //        this.dismiss();
        //    }
        // });

        const toast = await this.toastCtrl.create({
          message: data2.msg,
          duration: 2000
        });

        toast.present();

    },async err=>{
      loading.dismiss();

      console.log(err);

      const toast = await this.toastCtrl.create({
        message: "Error On Server Side ",
        duration: 2000
      });

      toast.present();

    });

  }

}

i have tried using below reference

Using Sweet alert with Typescript class

but when the swal is used the error below come out on my VSCode

This expression is not callable. Type 'SweetAlert2Module' has no call signatures.

score 0 · Answer 1 · answered Aug 10 '20 at 21:25

Steps to integrate sweet alert in your project ..npm install sweetalert2

..forget-password.ts

import Swal from 'sweetalert2'

@Component({
  selector: 'app-forget-password',
  templateUrl: './forget-password.page.html',
  styleUrls: ['./forget-password.page.scss'],
})
export class ForgetPasswordPage implements OnInit {

  email: string = null;

  constructor() { }

  ngOnInit() {
  }
   
confirmSentForgotPassword(){
Swal.fire({
  position: 'top-end',
  icon: 'success',
  title: 'Your work has been saved',
  showConfirmButton: false,
  timer: 1500
});
  
}

}

forgot-password.page.html

<button (click)="confirmSentForgotPassword()" style="letter-spacing: 1px" button margin-top>
      SUBMIT
</button>

check this link for more examples https://sweetalert2.github.io

Sweet Alert On Ionic 4, Output Alert Inside Typescript File

1 Answers1