Creating custom alerts in ionic

Ionic Framework ionic-v3
1

I tried to create custom alerts something like this:

 let alert = Alert.create({
      title: 'My Custom alert',
     template: `<h2>This is a custom alert</h2>
                <button>Go to second page</button>`
                <img src="logo.png">
      buttons: ['OK']
    });

It just shows me the title and the OK button it doesn’t show up the content defined under the template section, Is it possible to create custom alerts using ‘template’ in ionic2. Does ionic2 allows to create custom alerts? How to create one?

2

Hmm, so the end goal is supported, but how you’re going about doing it may not correct.

presentAlert() {
  let alert = Alert.create({
    title: 'This is a custom alert',
    buttons: ['OK']
  });
  this.nav.present(alert);
}

I think you should check over the docs again. You’ll find the alert has more than enough properties to create what you need.

http://ionicframework.com/docs/v2/api/components/alert/Alert/

1 Like
3

Can I add images within an alert?

4

Thats not really what the purpose of alerts are.

5

@chandroiud You could try with a modal and style it as alert, see the following topic for more details:

2 Likes
6

@mhartington Is it possible to add other types like ion-datetime?
If yes how do we choose to the format e.g. one might want to show only time HH24:MI format and not seconds.

Thanks & Rgds
Dhaval

8

how update the alert color with ionic 2 ??

10

You can add a class to the alert:

{
.., cssClass:'alert-danger'
}

in the .scss:

ion-alert {
  &.alert-warning {
    .alert-head {
      background: map-get($colors, warning);
      color: #fff;
      margin-bottom: 10px;
    }
  }
  &.alert-danger {
    .alert-head {
      background: map-get($colors, danger);
      color: #fff;
      margin-bottom: 10px;
    }
  }
  &.alert-success {
    .alert-head {
      background: map-get($colors, success);
      color: #fff;
      margin-bottom: 10px;
    }
  }

}
2 Likes
11

Hello JeffreyCarre,

I’m currently trying to figure out how to change the background color of an alert that I posted in the ionic forum, here and I was hoping that your above post would solve it, since I hadn’t seen the & operator before.

Unfortunately, it didn’t work. Where does that code get placed? Does it get placed in the page.scss block?

Thanks in advance!

12

I corrected the example and added the full .scss ( not css)

2 Likes
13

outstanding. Thank you!

14

for the color map you can define them like this :

$colors: (
      ...
        success:#23ab50,.
        danger: #f50142,
        warning: #f56800,
     ...
     .
);
1 Like
15

Would it be possible to have a self destruct confirmation alert ( based on a countdown )? What I want to achieve is a confirmation popup with a limited time ( visible countdown ) available for the user to choose an option. Or should I consider other component type?

Tried this, but not working ( not updating the countdown ):

let count = 20;
let countdown = setInterval(function () {
	if (count > 0) {
		count--;
	} else {
		clearInterval(countdown);
		confirm.dismiss();
	}
}, 1000);

let confirm = this.alertCtrl.create({
	title: 'some title',
	message: 'some message',
	buttons: [
		{
			text: 'Yes',
			handler: () => {
				console.log('Yes selected');
				clearInterval(countdown);
			}
		},
		{
			text: 'No ( ' + count + ' )',
			handler: () => {
				console.log('No selected!');
				clearInterval(countdown);
			}
		}
	]
});

confirm.present();
16

maybe its because of the scope try with this :

let countdown = setInterval(function () {
	if (count > 0) {
		count--;
	} else {
		clearInterval(countdown);
                if(this.confirm)
		  this.confirm.dismiss();
	}
}, 1000);

this.confirm = this.alertCtrl.create({
	title: 'some title',
	message: 'some message',
	buttons: [
		{
			text: 'Yes',
			handler: () => {
				console.log('Yes selected');
				clearInterval(countdown);
			}
		},
		{
			text: 'No ( ' + count + ' )',
			handler: () => {
				console.log('No selected!');
				clearInterval(countdown);
			}
		}
	]
});

this.confirm.present();

you will have to declare confirm :

confirm:any

1 Like
17

Thanks for sharing this code, but in “No” button how can we have a two-way binding to see count value is changing during the time!?

2 Likes
18

well, i guess this is how it should be done in ionic standard. tnx

19

here you can check what i have done trying to customize alerts…

20

HI, SOLUTION. esta lo que necesitas completamente

let alert = this.alertCtrl.create();
    alert.setTitle('Confirm!');
    alert.setMessage('Message <strong>text</strong>!!!');
    alert.addButton({
      text: 'Cancel',
      role: 'cancel',
      cssClass: 'secondary',
      handler: () => {
        console.log('Confirm Cancel');
        this.testConfirmResult = 'Cancel';
        this.testConfirmOpen = false;
      }
    });
    alert.addButton({
      text: 'Okay',
      handler: () => {
        console.log('Confirm Ok');
        this.testConfirmResult = 'Ok';
        this.testConfirmOpen = false;
      }
    });

    alert.present(alert).then(() => {
      this.testConfirmOpen = true;
    });
  }
2 Likes
21

Thanks Buddy, it’s awesome!

23

can any convert this into ionic 5.
"
blePopup() {
let alert = this.alertCtrl.create();
alert.setTitle(‘Select NautAlert Unit’);
for(let i=0; i< this.devices.length; i++) {
alert.addInput({
type: ‘radio’,
label: this.devices[i].name,
value: this.devices[i].id
});
}
alert.addButton(‘Cancel’);
alert.addButton({
text: ‘Ok’,
handler: device => {
//this.setStatus('Connecting to ’ + (device.label || device.value));
//this.setStatus(JSON.stringify(device));
// This is not a promise, the device can call disconnect after it connects, so it’s an observable
this.ble.connect(device).subscribe(
peripheral => this.onConnected(peripheral),
peripheral => {
this.showAlert(‘Disconnected’, ‘The peripheral unexpectedly disconnected’);
this.disconnect();
}
);

});
alert.present();

}