Data transmission in modal

@flosrn wrote:

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);
   }

Posts: 1

Participants: 1

Read full topic