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