Creating custom alerts in ionic


#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/


#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:


#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;
    }
  }

}

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)


#13

outstanding. Thank you!


#14

for the color map you can define them like this :

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

#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


#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!?


#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;
    });
  }

#21

Thanks Buddy, it’s awesome!