How to get modal data on modal dismiss in Ionic 3? - ionic-framework

Question

I have a Page with a List. From that page I open a MODAL.
That modal contains a Text box and a Add Item Button.
When I enter an Item in the Box and Hit Add Item, I need to
1) Dismiss the Modal
2) Add the entered Item in the List in the Previous List
I need to do this via On Dismiss().
HOME.HTML
<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item *ngFor="let grocery of itemsArray">{{grocery}}</ion-item>
</ion-list>
<button ion-button round (click)="addItem()">Add Item</button>
</ion-content>
HOME.TS
export class HomePage {
public itemsArray = [];
newItem: String;
constructor(public navCtrl: NavController, public modalCtrl: ModalController, public navParams: NavParams) {
}
ionViewDidLoad() {
this.newItem = this.navParams.get('data');
this.itemsArray = [
'Bread',
'Milk',
'Cheese',
'Snacks',
'Apples',
'Bananas',
'Peanut Butter',
'Chocolate',
'Avocada',
'Vegemite',
'Muffins',
'Paper towels'
];
this.itemsArray.push(this.newItem)
}
public addItem() {
let modalPage = this.modalCtrl.create(ModalPage);
modalPage.onDidDismiss(data => {
this.newItem = data;
});
modalPage.present();
}
}
MODAL.HTML
<ion-header>
<ion-navbar>
<ion-title>Add Item</ion-title>
<ion-buttons end>
<button ion-button (click)="closeModal()">Close</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-item>
<ion-label>Item</ion-label>
<ion-input type="text" [(ngModel)]="newItem"></ion-input>
</ion-item>
<button ion-button color="secondary" (click)="add()">Add Item</button>
</ion-list>
</ion-content>
MODAL.TS
export class ModalPage {
name:any;
constructor(public navCtrl: NavController, public viewCtrl: ViewController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad ModalPage');
}
public closeModal() {
this.viewCtrl.dismiss();
}
add() {
let data = {"name": this.name};
this.viewCtrl.dismiss(data)
}
}

Answer 1

Your code seems to be fine overall.
Change this part.
public addItem() {
let modalPage = this.modalCtrl.create(ModalPage);
modalPage.onDidDismiss(data => {
this.itemsArray.push(data);
});
modalPage.present();
}
Change the name of your variable on the html or the TS file.
name to newItem or vice-versa
You are using [(ngModel)]="newItem" but in your TS file your using this.name
You're adding the item on ionViewDidLoad() but the new item arrives at modalPage.onDidDismiss()
Give it a try. I'll help you further if it still does not work.

Answer 2

First you need to pass object/string of item/data from you mode while you are closing the same
this.viewCtrl.dismiss(data);
And you have to subscribe model closing event at the page from where you have opened it for ex.
let modal = this.modalCtrl.create(ModelPage);
modal.onDidDismiss(data => {
this.badge = data;
});
modal.present();
After you can simply push you new item in to items array :)