custom alert messages

Customize Alert Message: Show dynamic message in ionic 3/4 alert component


In one of my client’s projects, there was a situation where I wanted to update the alert message after a certain event but I was not aware of how to do it as it was not mentioned in the official ionic docs. After some searching around the internet, I found the solution, so I thought why not share it with you guys who faced this issue like me and same you some time!

The Problem

In the project, I was using the ionic alert controller to display an alert box that shows the download progress to the user while the user clicks on the download button. So After the download click event, I wanted to show realtime download progress in the alert box. For that, I need to listen to the HTTP event and update the progress into the alert box. In order to update the message, ionic docs don’t specify any method for it.

The Solution

I started searching through the following for a solution:

  • ionic forums
  • stack overflow
  • GitHub

While searching the core file of ionic alert component I found the method to update the message which is as follows:

for ionic 3

this.alert.setMessage('This is an alert message.')

for ionic 4

this.alert.message = 'This the updated Alert Message';

How to use it?

if you are not aware of how to use this method, check the gist below:

import { Component } from '@angular/core';
import { AlertController } from '@ionic/angular';
selector: 'app-home',
templateUrl: '',
styleUrls: ['']
export class HomePage {
alert: any;
constructor(public alertController: AlertController) {}
async presentAlert() {
this.alert = await this.alertController.create({
header: 'Alert',
subHeader: 'Subtitle',
message: 'This is an alert message.',
buttons: ['OK']
await this.alert.present();
updateAlertMessage() {
setTimeout(() => {
// ionic 3
this.alert.setMessage('This the updated Alert Message');
// ionic 4
this.alert.message = 'This the updated Alert Message';
}, 3000);
view raw alert-demo.ts hosted with ❤ by GitHub


The same way can be used for the toast controller too in ionic as it too has a set message method in its controller API. I hope this article was helpful. If you have any doubts/ issues let me know in the comments section below.