Ionic 5 ion-alert: ngModel is not working when used inside message string


The quantity value is not getting bind in ngModel. can anyone tell how to bind quantity field and get user entered value on dismiss of alert?.
thanks in advance :grinning:


async presentAlertPrompt() {

this.quantity = 0;

const alert = await this.alertController.create({

  cssClass: 'my-custom-class',

  header: 'Prompt!',

  mode: 'ios',

  message: new IonicSafeString(`<ion-list><ion-item><ion-label position="stacked"><span>${this.cs.GlobalValue.quantity}</span></ion-label>

  <ion-input type="number" placeholder="enter quantity" min=0 [(ngModel)]="quantity"></ion-input></ion-item></ion-list>`),

  buttons: [


      text: 'Cancel',

      role: 'cancel',

      cssClass: 'secondary',

      handler: () => {

        console.log('Confirm Cancel');


    }, {

      text: 'Ok',

      handler: (event) => {






await alert.present();

alert.onDidDismiss().then(res => {




Use inputs instead of message.

Hi rapropos. thanks for the reply, yes that is an option when we have only input like (number, text, date etc). I have requirement where i need to show list of items using *ngFor and when i click any item, the value need to be set in ngModel.

Then, as the documentation says:

If you require a complex form UI which doesnโ€™t fit within the guidelines of an alert then we recommend building the form within a modal instead.

I think you are outside of the intended usage zone for alerts.

ok i understood. thank you rapropos.