I have create a custom ionic alert with a progress bar using Ionic 7 Angular. but not opening the custom alert

Custom Alert Component Template (custom-alert.component.html):

<div class="custom-alert">
  <ion-icon name="close-circle-outline" class="icon-error"></ion-icon>
  <h2 class="title">Wrong OTP</h2>
  <p class="message">Please enter valid 4 digit verification code</p>
  <div class="progress-bar">
    <div class="progress"></div>
  </div>
</div>

Custom Alert Component Styles (custom-alert.component.scss):

.custom-alert {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

  .icon-error {
    font-size: 24px;
    color: #ff5252;
  }

  .title {
    margin: 8px 0;
    font-size: 18px;
    font-weight: bold;
    color: #00bcd4;
  }

  .message {
    margin-bottom: 16px;
    font-size: 14px;
    color: #757575;
    text-align: center;
  }

  .progress-bar {
    width: 100%;
    height: 4px;
    background-color: #e0e0e0;
    border-radius: 2px;
    overflow: hidden;

    .progress {
      width: 50%; /* Set the progress value as needed */
      height: 100%;
      background-color: #00bcd4;
      animation: progressAnimation 2s linear infinite;
    }

    @keyframes progressAnimation {
      0% {
        width: 0;
      }
      100% {
        width: 100%;
      }
    }
  }
}

Custom Alert Component Logic (custom-alert.component.ts):

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-custom-alert',
  templateUrl: './custom-alert.component.html',
  styleUrls: ['./custom-alert.component.scss'],
})
export class CustomAlertComponent implements OnInit {
  constructor() {}

  ngOnInit() {}
}

Using the custom alert in your page (example in home.page.ts):

import { Component } from '@angular/core';
import { AlertController } from '@ionic/angular';
import { CustomAlertComponent } from '../components/custom-alert/custom-alert.component';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  constructor(private alertController: AlertController) {}

  async presentCustomAlert() {
    const alert = await this.alertController.create({
      header: 'Alert',
      cssClass: 'custom-alert-class',
      message: '',
      buttons: ['OK'],
      backdropDismiss: false,
    });

    await alert.present();

    const alertElement = document.querySelector('.custom-alert-class .alert-message');
    if (alertElement) {
      alertElement.innerHTML = '<app-custom-alert></app-custom-alert>';
    }
  }
}

Add CSS to global styles (global.scss):

.custom-alert-class .alert-wrapper {
  background: transparent;
  box-shadow: none;
}

Update the module (app.module.ts):

Ensure your CustomAlertComponent is declared in your AppModule.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { CustomAlertComponent } from './components/custom-alert/custom-alert.component';

@NgModule({
  declarations: [AppComponent, CustomAlertComponent],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})
export class AppModule {}

Now you have a custom Ionic alert with a progress bar that matches the design in the image. You can trigger this alert from any part of your app using the presentCustomAlert method.