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

Thanks!!

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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{
}