Trying To Use Input From An Alert In Angular

Contents hide

1 Trying to use input from an alert in Angular

Problem Description:

I use a popup with an input field where a value for quantity is entered but cant find a way to reference the value entered. I’ve searched the documentation but can’t seem to find the solution. Below is my code in .ts:

async presentAlert() {
    const alert = await this.atrCtrl.create({
      header: 'Please enter quantity Issued',
      buttons: ['OK'],
      inputs: [
        {
          name: 'quantity',
          type:'number',
          placeholder: 'Quantity issued',
          value: '',
          min: 1,
          max: 100,
        },
      ],
    });
    console.log(name);
    

    await alert.present();
  }

I expect the value entered in input to be displayed in the console after the OK button is pressed

Solution – 1

Use a handler on the button:

async presentAlert() {
    const alert = await this.atrCtrl.create({
      header: 'Please enter quantity Issued',
      buttons: [{
         text: 'OK',
         handler: data => {
            console.log(data.quantity);
         }
      }],
      inputs: [
        {
          name: 'quantity',
          type:'number',
          placeholder: 'Quantity issued',
          value: '',
          min: 1,
          max: 100,
        },
      ],
    });
    

    await alert.present();
  }

Rate this post