Angular 2 components css styles styleUrls

How to apply styles to a confirmation alert in Ionic 3 Angular 4?

We need to move alert specific styling to the global app.scss. It is little bit confusing and it works global level.

app.scss –
.icon-color{
    color: #C45810 !important;
}

Used Actions Buttons to displayed alert and confirmation box-
<ion-fab right bottom>
  <button ion-fab color="light"><ion-icon name="arrow-dropleft"></ion-icon></button>
  <ion-fab-list side="left">
    <button ion-fab><ion-icon name="trash" (click)="presentConfirm()"></ion-icon></button>
  </ion-fab-list>
</ion-fab>

Home.ts- Using css class in home components
import { Component } from '@angular/core';
import { NavController, App, AlertController } from 'ionic-angular';
import { WelcomePage} from '../../pages/welcome/welcome';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  constructor(public navCtrl: NavController, public app: App, private alertCtrl: AlertController) {  }

  logoout(){
       this.app.getRootNav().setRoot(WelcomePage);
  }

  presentConfirm() {
    let alert = this.alertCtrl.create({
      title: 'Confirm Items',
      message: 'Do you want to remove this?',
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          cssClass:'icon-color',
          handler: () => {
            console.log('Cancel clicked');
          }
        },
        {
          text: 'Ok',
          cssClass:'icon-color',
          handler: data => {
            console.log('Items Removed!');
            //Call you API to remove Items here.
          }
        }
      ]
    });

    alert.present();
  }
}

Result looks like
Stayed Informed Angular 4 Documents and Ionic 3 CLI Angular 4

I hope you are enjoying with this post! Please share with you friends. Thank you so much!
ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.
^