This post helps us to understand about the
display custom “Confirmation Alerts Message” using the Ionic 3 Angular 4.
Please follow the below steps, It might help us to understands.
Steps
1- 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>
<button
ion-fab><ion-icon
name="md-information-circle"
(click) ="infoAlert()"></ion-icon></button>
</ion-fab-list>
</ion-fab>
Step
2 - Using
css class in home components!
home.ts
-
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)
{ }
//Used for notification alert messages
infoAlert (){
let alert
= this.alertCtrl.create({
title: 'Site
Info!',
subTitle: 'My
name is Anil Singh. I born and brought up in Kushinagar (U.P.) India. I have
done B.Sc(Math) and Master of Computer Application (MCA). I’m currently working
as Technical Lead at Australian MNC and have earned total experience of 8+
years in different domain like Telecom, Legal and Casino Gaming industry. I
have written over 1500+ technical articles on my blog http://code-sample.com. I
also have a number of certifications including MCP, MCTS - 515 and MCTS - 513.
My hobbies include - learning new technologies, blogging, writing and sharing
knowledge using social media and so on.',
buttons: ['Dismiss']
});
alert.present();
}
//Used for Confirmation message
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!