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