Data transmission in modal

Hello,

I have trouble with transmitting data in a modal in my Ionic application with firebase.

My application is a list of request, I can add request, delete request and when I click on a request I would like open a modal with the full description of the request.

my request.html :

<ion-content>
  <ion-list>
    <ion-item-sliding *ngFor="let request of requestList$ | async" detail-push (click)="openRequestModal()">    
      <ion-item>
        <ion-thumbnail item-end > 
          <!-- <img [src]="item.imageUrl"> -->  
        </ion-thumbnail>
        <h2>{{request.title}}</h2>
        <p>{{request.description}} </p>
        <ion-row>
          
          <button ion-button icon-left clear small no-padding>
            <ion-icon name="logo-euro"></ion-icon>
            <div class="price">{{ request.priceMin }}-{{ request.priceMax }}</div>
          </button> 
          
          <button ion-button icon-left clear small>
            <ion-icon name="compass"></ion-icon>
            <div class="pos">{{ request.position }}</div>
          </button>
       </ion-item-sliding>
     </ion-list>
  <ion-fab right bottom #fab>
    <button ion-fab color="bleu" navPush="AddRequestPage"><ion-icon name="create"></ion-icon></button>
  </ion-fab>

here my request.model.ts :

export interface Request {
    key?: string;
    title: string;
    description: string;
    position: string;
    date: string;
    date2: string;
    priceMin: number;
    priceMax: number;
    number: number;
}

my request.ts :

import { Request } from '../../models/request/request.model';
import { RequestModalPage } from '../request-modal/request-modal';
[...]

export class RequestPage {

request: Request;

constructor (
 public navCtrl: NavController,  
 public navParams: NavParams,
 public modalCtrl: ModalController,
) { }

openRequestModal() {
   this.openModal('RequestModalPage');
}

    openModal(RequestModalPage) {
      console.log(this.request);
       this.modalCtrl.create(RequestModalPage, Request, { cssClass: 'inset-modal' })
      .present();
    }    
}

in my request-modal.ts :

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

But it does not work…

You push Request with upper case R in your create methode but you defined

request: Request;

with lower case r.

Thank you for your response I changed that by this.request but I do not recover the data in my

this.navParams.get(‘request’);

Uups. it must be this.request sorry.

this.modalCtrl.create(RequestModalPage, this.request, { cssClass: ‘inset-modal’ })
.present();

like in your console.log

Or something like

this.modalCtrl.create(RequestModalPage, {request: this.request}, { cssClass: ‘inset-modal’ })
.present();

I tried this but it return always undefined on :

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

or

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

No one can help me ?

I always use it in ionViewDidEnter method I think it is not available yet in ionViewWillLoad

ionViewDidEnter () {
    this.imageType = this.navParams.get('imageType');
}

Ok guys after a lot of attempts I succeeded ! :grinning:

request.ts

public request: any;

constructor (...) {
   this.request = this.navParams.get('request');
}
    openModal(request) { 
      let modal = this.modalCtrl.create('RequestModalPage', {request: request} , { cssClass: 'inset-modal' });
      modal.present();
      modal.onDidDismiss(data => console.log(data));
    } 

request.html

<ion-item-sliding *ngFor="let request of requestList$ | async" detail-push (click)="openModal(request)">

request-modal.ts

constructor (...) {
  this.request = this.navParams.get('request');
  console.log(this.request.title);
}

Aaaaaand it wooork !!