Creating custom alerts in ionic

Ionic Framework ionic-v3
#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
AlertController background color
#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();

}

#24

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

}

#25

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.

#26

Yeah I mean most recent for 06/2020 I was refering to CLI version

#27