CODEWITHSUNDEEP
angularionic-frameworkionic2ionic3
Franco Coronel
Franco Coronel

Reputation: 730

AlertCtrl message html with ngFor Ionic 3

I know i can put html with ``(backticks) in the message but i cannot put *ngFor inside a div it doesnt render the array of items. How can i do to put a *ngFor inside the div with the backticks.In code it will be something like this:

let items = [1,2,3]

let alert = this.alertCtrl.create({
    title: 'Confirm purchase',
    message: `<div *ngFor="let item of items"> {{item}}</div>`,
    buttons: [
      {
        text: 'Cancel',
        role: 'cancel',
        handler: () => {
          console.log('Cancel clicked');
        }
      },
      {
        text: 'Buy',
        handler: () => {
          console.log('Buy clicked');
        }
      }
    ]
  });

Upvotes: 0

Views: 1348

Answers (2)

Anand Acharya
Anand Acharya

Reputation: 89

    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();
  }

enter image description here

Upvotes: 0

Sumama Waheed
Sumama Waheed

Reputation: 3609

Why not make the html list yourself:

let itemsList = ``;

items.map((item)=>{
   itemsList += `<li>${item}</li>`
})

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

let alert = this.alertCtrl.create({
  title: 'Confirm purchase',
  message: message ,
  buttons: [
    {
    text: 'Cancel',
    role: 'cancel',
    handler: () => {
      console.log('Cancel clicked');
    }
  },
  {
    text: 'Buy',
    handler: () => {
      console.log('Buy clicked');
    }
  }
 ]
});

Upvotes: 3

Related Questions