Ionic 2 Alert customization

Question

I want to customize my alerts in Ionic 2. I know that I can do it globally in the variables.scss, but I want to modify a specific one, in a specific page.

I tried cssClass in the alert code, I tried other different things, that work, but globally, not for a specific one.

Is there any way to do it?

Tadija Bagarić · Answer 1 · 2018-02-28T15:35:08.140

Edit all your AlertController.create methods to look like this:

const alert = this.alertCtrl.create({
    title: title,
    subTitle: msg,
    buttons: ['OK'],
    cssClass: 'alertCustomCss' // <- added this
});

And add this to app.scss:

.alertCustomCss {
    // text color for basic alerts
    color: white; 

    // alert modal page bg color. Warning this will remove the alert transparency
    background-color: color($colors, dark, base); 

    button {
        color: white !important; // button text color
        background-color: color($colors, secondary, base) !important;
            //button bg color
    }

    .alert-message {
        color: white; // text color for confirm alerts
    }

    .alert-wrapper {
        background-color: color($colors, dark, base); // bg color of alert content
    }
  }

score 3 · Answer 2 · edited Sep 08 '17 at 10:41

Adding the styles in app.css and calling it in page.ts

showAlert() {
    let alert = this.alertCtrl.create({
      title: 'New Friend!',
      subTitle: 'Your friend, Obi wan Kenobi, just accepted your friend request!',
      buttons: ['OK'],
      cssClass: 'alertCustomCss'
    });
    alert.present();
}

In App.css

.alertCustomCss{
  background-color: white;
  color: blue;
  button{
      color: blue;
  }
}

Andrea Rega · Answer 3 · 2017-11-09T08:26:02.833

If you created your specific page (let's call it Sample1) with the ionic CLI command ionic g page Sample1, you will find in your project a directory called Sample1 with 3 files: Sample1.html, Sample1.ts and Sample1.scss.

In Sample1.scss you will find:

sample1-page {

}

In that place you must define your custom css class or redefine the ionic element style and all your styles will have scope only onto the Sample1 page.

Hope this could help you

UPDATE

As Duannx mentions the alert components are not child of your page so if you put the css class into the specific page .scss file it will not be applied to the alert but if you put it into app.scss it will be applied. So this is an example:

app.scss

.alertCustomCss{
  background-color: white;
  color: blue;
  button{
      color: blue;
  }
}

Sample1.html

<button ion-button block outline (click)="showAlert()">Alert</button>
<button ion-button block outline (click)="showAlert2()">Alert2</button>

Sample1.ts

  showAlert() {
    let alert = this.alertCtrl.create({
      title: 'New Friend!',
      subTitle: 'Your friend, Obi wan Kenobi, just accepted your friend request!',
      buttons: ['OK'],
      cssClass: 'alertCustomCss'
    });
    alert.present();
  }

  showAlert2() {
    let alert = this.alertCtrl.create({
      title: 'New Friend!',
      subTitle: 'Your friend, Obi wan Kenobi, just accepted your friend request!',
      buttons: ['OK']
    });
    alert.present();
  }

Now you will see that the button "Alert" will show a customized alert while the button "Alert2" will show the alter with the default css style

You might want to note that the selector property in the component determines the element name. — misha130, Apr 19 '17 at 16:57
Hi, I know where I need to do it, the thing is, that I can't modify an alert if its not globally, I already tried what you said, I know the classes that the alert uses, but even if I override them, the alert still remains the same. — Mystearica, Apr 19 '17 at 19:54
You can not add style for alert inside `some-page.scss` because alert is not a child of your page. Just inspect it in chrome and see. So add style into `app.scss` is the right answer — Duannx, Nov 09 '17 at 02:34

score 1 · Answer 4 · answered Jun 21 '18 at 11:11

Just add any name you want in cssClass of alert as i named alertCustomCss

logOut() {
  this.alrtCtrl.create({
                title: "Log out ?",
                message: "Are you sure to logout?",
                buttons: [
                    {
                        text: "Cancel",
                        role: 'cancel',
                        handler: () => {
                        //something to do 
                        }
                    },
                    {
                        text: "Confirm",
                        handler: () => {
                            //log Out

                        }
                    }
                ],
                cssClass: 'alertCustomCss'
            }).present();

Adding Styles to alertCustomCss class

.alertCustomCss{
    background-color: red;
    color: white;
    button{
        color: green!important;
    }
    .alert-wrapper{
        background: yellow;
    }
    .alert-message {
        color: skyblue;
    }
    .alert-title{
        color: black;
    }
}

View Image after applying above style => Image Link

score 0 · Answer 5 · answered Dec 10 '18 at 16:00

Though this is coming from Ionic 3, but you could always put the style outside of the page-something block from your something.scss file if you still want to keep local changes in your local files instead of the app.scss.

.alert-style{
    padding-left: 16px;
}

page-something{
}

Ionic 2 Alert customization

5 Answers5

UPDATE

Linked