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

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - https://code-sample.com and https://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.
ASK Questions