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