Ionic 5 + Angular: custom Alert enter and leave animations

Since it’s hard to find an example in the documentation and elsewhere on the Internet, here’s a simple implemention of a custom fade-in animation for Ionic 5 alerts with Angular. Note that we choose what elements of an ion-alert to animate by using querySelector on HTMLElement baseEl. The div with class alert-wrapper is the dialog, but you can also query select ion-backdrop for the backdrop.

  private alertCtrl: AlertController,
  private animationCtrl: AnimationController
) {


private async showAlert() {
  const alert = await this.alertCtrl.create({
    message: 'Hello world',
    enterAnimation: (baseEl: any, opts?: any) => {
          { offset: 0, opacity: '0' },
          { offset: 1, opacity: '1' }

  await alert.present();
0 thoughts on “Ionic 5 + Angular: custom Alert enter and leave animations”

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: