Can we use *ngFor to bind data dynamically to view within AlertController

Ionic Framework ionic-v3
1

Hi Folks,

Was wondering if we can use something like below, not working for me. Am i missing something ?

this.multipleNumber.push([
  {
    "name": "Number1",
    "number": "8782374"
  },
  {
    "name": "Number2",
    "number": "9863453"
  },
  {
    "name": "Number3",
    "number": "4512345"
  }
])

let alert = this.alertCtrl.create({
     title: `<p *ngFor='let post of multipleNumber'>{{post.number}}</p>`,
     subTitle: '10% of battery remaining',
     buttons: ['Dismiss']
   });
alert.present();
2

No, do this instead.

let alert = this.alertCtrl.create({
     title: multipleNumber.map(n => n.number).join(','),
     subTitle: '10% of battery remaining',
     buttons: ['Dismiss']
   });
alert.present();
3

@Judgewest2000 it helped. But i need some event on the individual numbers listed, on click i should get the number for using it in my app.

Can we do something like that, or is there any other way.

4

I wouldn’t suggest it on your title - it would look horrible!

   const alert = this.alertController.create();

   alert.setTitle('whatever');

   this.multipleNumber.forEach(l => {
            alert.addInput({
                type: 'radio',
                label: l.name,
                value: l.number
            });
        });

        alert.addButton({
            text: 'Cancel',
            role: 'cancel',
        });

        alert.addButton({
            text: 'OK',
            handler: id => {
                //this point you should have the proper "number" value
                doSomethingWithTheNumber(id);
            }
        });

        alert.present();
5

let itemsList = ``;

let imageList = ``;

let items = [1,2,3];

let images: any[] = ['../../assets/basic_logo_2.png', '../../assets/basic_logo_3.png', '../../assets/basic_logo_4.png']  

items.map((item)=>{

  itemsList += `<li>${item}</li>`

  imageList += `<li> <img src ='${images[0]}'  class="alert-img" > </li>`

  });

let message = `<ul>${itemsList}</ul>`;

let message1 = `<ul> ${imageList}</ul>`;

const alert = await this.alertCntrl.create({

  header: 'Title',

  message:  message + message1 + ` <span>message body</span> <div>  <img src="../../assets/basic_logo_2.png" alt="g-maps" class="alert-img" ></div>` ,

  buttons: [

    {

      text: 'Cancel',

      role: 'cancel',         

      handler: (blah) => {

        console.log('Confirm Cancel: blah');

      }

    }, {

      text: 'Replay',

      handler: () => {

        console.log('Confirm Okay');

      }

    }

  ]

});

await alert.present();

}[quote=“champion007, post:1, topic:119855, full:true”]
Hi Folks,

Was wondering if we can use something like below, not working for me. Am i missing something ?

this.multipleNumber.push([
  {
    "name": "Number1",
    "number": "8782374"
  },
  {
    "name": "Number2",
    "number": "9863453"
  },
  {
    "name": "Number3",
    "number": "4512345"
  }
])

let alert = this.alertCtrl.create({
     title: `<p *ngFor='let post of multipleNumber'>{{post.number}}</p>`,
     subTitle: '10% of battery remaining',
     buttons: ['Dismiss']
   });
alert.present();

[/quote]

Look at this code here … here is array is dynamically loop in message of ionic-alert box

6

Alerts are supposed to be super-simple. If you need anything more elaborate, I would suggest simply making your own popover, where you get to supply the component.