@chandroiud You could try with a modal and style it as alert, see the following topic for more details:
@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
how update the alert color with ionic 2 ??
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;
}
}
}
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!
I corrected the example and added the full .scss ( not css)
outstanding. Thank you!
for the color map you can define them like this :
$colors: (
...
success:#23ab50,.
danger: #f50142,
warning: #f56800,
...
.
);
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();
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
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!?
well, i guess this is how it should be done in ionic standard. tnx
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;
});
}
Thanks Buddy, it’s awesome!
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();
}
To people using Ionic 6: as well you put images on the alert by marking tags in the object properties of the alert controller
async function(){
const alert = await this.alertController.create({
cssClass: my-custom-class',
message: '<img src="../../assets/svg/image.svg">',
});
await alert.present();
}
I think you have set your time machine incorrectly, as 5.2.2 is the most recent thing I see in this list of releases.
Yeah I mean most recent for 06/2020 I was refering to CLI version