How to get modal data on modal dismiss in Ionic 3?

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 :)