Issue with Ionic 3 modal: Navparams coming back as undefined

Question

Issue with Ionic 3 modal: Navparams coming back as undefined

I'm currently facing an issue where I am passing a string as a parameter to a Modal (specifically a master/detail modal) and although the Modal opens successfully, the string is being returned as undefined.

Below is the TypeScript code for the parent component:

 editReminder(event, data){
    console.log(data);
    let myModal = this.modalCtrl.create(ReminderDetailsPage, data);
    myModal.present();
}

The HTML file displays a list of reminders using ngFor (reminder of reminders). The parameter 'data' is passed like this in the HTML:

 <button ion-fab mini class="mini-button" (click)="editReminder($event, reminder)">
          <ion-icon name="create"></ion-icon>
 </button>

When I console.log(data), it correctly logs the reminder. However, when trying to retrieve it in the ReminderDetails modal:

export class ReminderDetailsPage {

   EditedReminder: string = this.navParams.get('data');

It returns undefined. Both pages have imported navParams and declared them in the constructor.

angular typescript ionic2 ionic3

Answer 1

Answer №1

this.modalCtrl.create(ReminderDetailsPage, { info: information });

Provide a data object to the create() function. Retrieve the data using navParams.get() either in the constructor or within a lifecycle method such as ngOnInit.

Answer 2

this.modalCtrl.create(ReminderDetailsPage, { info: information });

Provide a data object to the create() function. Retrieve the data using navParams.get() either in the constructor or within a lifecycle method such as ngOnInit.

Answer 3

Answer №2

When working with a Modal page

ionViewWillLoad() {
 const content = this.navParams.get('content');
 console.log(content);
}

To send data back from the modal...

import {NavParams, ViewController} from 'ionic-angular';
...
    content: String
     constructor(private navParams: NavParams, private view: ViewController) {}
    ionViewWillLoad() {
     this.content = this.navParams.get('content');
     console.log(this.content);
    }

  closeModal() {
    this.view.dismiss(content);
  }

In your main calling page:

 const myModal: Modal = this.model.create('ModalPage', {content: myContent})
 myModal.present();
 myModal.onWillDimiss(data) => {
     console.log(`About to dismiss with: ${data}`);
 })
 myModal.onDidDimiss(data) => {
     console.log(`Dismissed with: ${data}`);
 })

Answer 4

When working with a Modal page

ionViewWillLoad() {
 const content = this.navParams.get('content');
 console.log(content);
}

To send data back from the modal...

import {NavParams, ViewController} from 'ionic-angular';
...
    content: String
     constructor(private navParams: NavParams, private view: ViewController) {}
    ionViewWillLoad() {
     this.content = this.navParams.get('content');
     console.log(this.content);
    }

  closeModal() {
    this.view.dismiss(content);
  }

In your main calling page:

 const myModal: Modal = this.model.create('ModalPage', {content: myContent})
 myModal.present();
 myModal.onWillDimiss(data) => {
     console.log(`About to dismiss with: ${data}`);
 })
 myModal.onDidDimiss(data) => {
     console.log(`Dismissed with: ${data}`);
 })

Answer 5

Answer №3

If that's the situation, my recommendation is to opt for utilizing storage instead of NavParams.

Answer 6

If that's the situation, my recommendation is to opt for utilizing storage instead of NavParams.

Issue with Ionic 3 modal: Navparams coming back as undefined

Answer №1

Answer №2

Answer №3

Similar questions

Retrieve the component when there is a change in the variable in Angular versions greater than 4

Module import in Ionic

Reducing image file sizes in Ionic 3

Angular2 Dynamic Forms: Unveiling Fields Conditionally

What is the best way to incorporate my own custom component into the Mui Theme options in order to efficiently modify it?

Utilize a singular loader when simultaneously making numerous HTTP requests in Angular with ngx-ui-loader

In the context of Expo and TypeScript, the error message "Type '{}' does not have property 'origin'" appears

Issue with Angular 12 Chart.js: Doughnut chart not rendering

Converting data types in TypeScript function parameters

How can I validate a method for formGroup in Angular 2?

The functionality of 'ngbPopover' in Ng-bootstrap may be affected if the parent container contains a 'transform' css property

How can TypeScript associate enums with union types and determine the type of the returned object property?

How can we update a boolean value in an Angular service using a set function?

How can a custom event bus from a separate account be incorporated into an event rule located in a different account within the CDK framework?

JavaScript module declarations in TypeScript

Tips for incorporating state properties into a component

Guidelines for incorporating Dropdown menus in a Multi-level Carousel themed SideNav using Angular 5 Material

Typically used to describe an item with a variable amount of string attributes

Challenges encountered while running the npm start command

Troubleshooting ngFor in Angular 5