Ionic page not getting value from model


#1

Hi,
I developed an ionic app with model. I want to pass the value to my page when dismiss the model. I have used onDidDismiss method.
But it getting null. I tried so many times. My code is shown below.

home.html

<ion-content>
<ion-input type="text" maxlength="50" name="name1" placeholder="eg: Software Engineer" (input)="openModalNew();"></ion-input>
</ion-content>

home.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ModalController, ModalOptions, Modal } from 'ionic-angular';
import { NavController, NavParams } from 'ionic-angular';
import { DetailsPage } from '../details/details'

@Component({
	selector: 'page-home',
		templateUrl: 'home.html'
})
export class HomePage {
constructor(public modalCtrl: ModalController,public params: NavParams) {

}

	openModalNew() {
	let MyNewModal = this.modalCtrl.create(DetailsPage);
	MyNewModal.onDidDismiss(data => {
	console.log(data);  // getting as null
	});
	MyNewModal.present();
	}

}

Details.html

<ion-header>
<ion-navbar>
	<ion-title>ModalPage</ion-title>
	<ion-buttons end>
	<button ion-button (click)="closeModal()">Close</button>
	</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content padding>
</ion-content>

details.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { ViewController } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-details',
  templateUrl: 'details.html',
})
export class DetailsPage {
constructor(public navCtrl: NavController, public navParams: NavParams, public viewCtrl : ViewController) {

}

ionViewDidLoad() {
	console.log('ionViewDidLoad ModalPage');
}

public closeModal(){
  
	let data = { 'name':'myName','id':'456123' };
	this.viewCtrl.dismiss(data);
	}

#2

You have to use navParams in order to grab data that has been returned to the Modal caller.


#3

I got the solution by adding the model “DetailsPage” in entryComponents of app.module.ts .

app.module.ts

@NgModule({
declarations: [
DetailsPage
],
entryComponents: [
DetailsPage
],

And i change the code in home.ts is

let MyNewModal = this.modalCtrl.create(DetailsPage);

instead of

let MyNewModal = this.modalCtrl.create("DetailsPage");