Data transmission in modal


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-item-sliding *ngFor="let request of requestList$ | async" detail-push (click)="openRequestModal()">    
        <ion-thumbnail item-end > 
          <!-- <img [src]="item.imageUrl"> -->  
        <p>{{request.description}} </p>
          <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 ion-button icon-left clear small>
            <ion-icon name="compass"></ion-icon>
            <div class="pos">{{ request.position }}</div>
  <ion-fab right bottom #fab>
    <button ion-fab color="bleu" navPush="AddRequestPage"><ion-icon name="create"></ion-icon></button>

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() {

    openModal(RequestModalPage) {
       this.modalCtrl.create(RequestModalPage, Request, { cssClass: 'inset-modal' })

in my request-modal.ts :

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

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


Uups. it must be this.request sorry.

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

like in your console.log

Or something like

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

I tried this but it return always undefined on :

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


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

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:


public request: any;

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


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


constructor (...) {
  this.request = this.navParams.get('request');

Aaaaaand it wooork !!