create common reusable alert in ionic5

Question

I am new to ionic and I want to create a custom alert box, and want to use in every page with different header and message. I want to create separate component for it and want to pass header and message value. Could you please suggest me what is the correct way of doing it.

This is my code :

async presentAlertConfirm() {
    const alert = await this.alertController.create({
      cssClass: 'alertCustomCss',
      header: 'Confirm Action',
      message: 'Are you sure you want to delete this <div><img src = "./assets/icon/alert-circle-outline.svg" width="35px" height="35px"></div>',
      buttons: [
        {
          text: 'No',
          role: 'cancel',
          cssClass: 'cancel-btn',
          handler: (blah) => {
            console.log('Confirm Cancel);
          }
        }, {
          text: 'Yes',
          cssClass: 'ok-btn',
          handler: () => {
            console.log('Confirm Okay');
          }
        }
      ]
    });

    await alert.present();
  }

I want to place this code in separate component and want to make it reusable.

Answer 1

You could use a service for that.

Place the alert function to your service like this

async presentAlertConfirm(header: string, massage: string) {
    const alert = await this.alertController.create({
      cssClass: 'alertCustomCss',
      header,
      massage,
      buttons: [
        {
          text: 'No',
          role: 'cancel',
          cssClass: 'cancel-btn',
          handler: (blah) => {
            console.log('Confirm Cancel');
          }
        }, {
          text: 'Yes',
          cssClass: 'ok-btn',
          handler: () => {
            console.log('Confirm Okay');
          }
        }
      ]
    });

    await alert.present();
    return alert;
  }

Then you can use this function anywhere you import your service. (I didn't test the code)