CODEWITHSUNDEEP
angularionic3
GreenDome
GreenDome

Reputation: 277

How to show message body using variable in AlertController - Ionic 3?

I have the following code in:

home.html

<button (click)="doAlert()" color="primary" ion-button small round>
    <div><span float-right> {{ meetingTimes.meeting1 }} </span></div>
</button>

home.ts

doAlert() {
  let meetingTime = this.alerCtrl.create({
    title: 'Weekly Meeting Times',
    message: 'Meeting 1 time:' {{ meetingTimes.meeting1 }},
    buttons: ['Close']
  });
  meetingTime.present()
}

In home.html the {{ meetingTimes.meeting1 }} works fine but how do I show/use the same value in the doAlert method when clicked?

I understand that I can't use this {{ meetingTimes.meeting1 }} in the component but what's the correct way to do this?

I have tried : message: 'Meeting 1 time:' + meetingTimes.meeting1, but that didn't work.

Upvotes: 4

Views: 567

Answers (2)

Sudarshana Dayananda
Sudarshana Dayananda

Reputation: 5265

You can do it using ModalContoller. You can open another page as modal dialog from home.html. Let's get that page is modal.html.

modal.html

<div id="container">
  <ion-content padding>
    <p class="message">{{message}}</p>
    <button ion-button color="danger" (click)="close()">OK</button>
  </ion-content>
</div>

modal.scss

#container {
  margin: 100px 50px;
  height: 120px;
  box-shadow: -3px -4px 12px 6px rgba(0, 0, 0, 0.4);
}

button {
  float: right;
  margin-bottom: 20px;
}

.message {
  color: red;
  font-weight: bold;
}

ModalPage.ts

export class ModalPage {

  message: string;

  constructor(
    private viewCtrl: ViewController, 
    private navParams: NavParams) {

    this.message = this.navParams.get('message');

  }
  close() {
    this.viewCtrl.dismiss();
  }
}

Now you can open modal.html as a Dialog from your home.html as below.

export class HomePage {

  constructor(private modalCtrl: ModalController) {}

  doAlert()() {
    let myModal = this.modalCtrl.create(ModalPage, { message: `Meeting 1 time: ${this.meetingTimes.meeting1}`});
    myModal.present();
  }
}

I think this will help you. Find working demo HERE

Upvotes: 1

Sudarshana Dayananda
Sudarshana Dayananda

Reputation: 5265

Try this.

  doAlert() {
  let meetingTime = this.alerCtrl.create({
    title: 'Weekly Meeting Times',
    message: `Meeting 1 time: ${this.meetingTimes.meeting1}`,
    buttons: ['Close']
  });
  meetingTime.present()
}

Working demo.

Upvotes: 1

Related Questions