How to get the data from Prompt Alerts
Full Code
home.html
<ion-header>
<ion-navbar color="danger">
<ion-title>
JawabAdda - How to get the data from Prompt Alerts
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<button ion-button color="primary" (click)="showPrompt()" block>Add Book Library</button>
<ion-list>
<ion-item *ngFor="let item of bookList" col-12 >
<ion-col col-10>{{item.bookname}}</ion-col>
<ion-col col-2><ion-icon name="trash" (click)="showConfirm(item)" color="danger"></ion-icon></ion-col>
</ion-item>
</ion-list>
</ion-content>
home.ts
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AlertController } from 'ionic-angular';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
public bookList=[]; //array for store Library data
constructor(public navCtrl: NavController,
public alertCtrl: AlertController) {
}
//========== this function for add a book in Library ==========
showPrompt() {
const prompt = this.alertCtrl.create({
title: 'Book Library',
message: "Enter a New Book Name for Library",
inputs: [
{
name: 'bookname',
placeholder: 'Enter the book Name'
},
],
buttons: [
{
text: 'Cancel',
handler: data => {
console.log('Cancel clicked');
}
},
{
text: 'Save',
handler: data => {
console.log('Saved clicked',data.bookname);
let bk={
bookname:data.bookname
}
this.bookList.push(bk)
}
}
]
});
prompt.present();
}
//========== this function for Remove book Library ==========
showConfirm(item) {
const confirm = this.alertCtrl.create({
title: 'Delete Books in Library',
message: 'Are you sure want to delete',
buttons: [
{
text: 'No',
handler: () => {
console.log('No');
}
},
{
text: 'Yes',
handler: () => {
let index: number = this.bookList.indexOf(item); // <-- todo?
if(index > -1){
this.bookList.splice(index, 1);
}
console.log('Yes');
}
}
]
});
confirm.present();
}
}