CODEWITHSUNDEEP
angularionic-frameworkionic4
Han Che
Han Che

Reputation: 8519

ionic 4 - how to retrieve data passed to a modal

According to the Ionic 4 docs, you can pass data via the componentProps property. In Ionic3 I can retrieve it with the navParams Service. How do I do it in Ionic 4?

async presentModal() {
    const modal = await this.modalController.create({
      component: ModalPage,
      componentProps: { value: 123 }
    });
    return await modal.present();
  }

Upvotes: 10

Views: 17794

Answers (4)

harun_me
harun_me

Reputation: 301

homepage

async presentModal(urlm) {

const modal = await this.modalController.create({
  component: ShowmediaPage,
  componentProps: { url: urlm ,
  from:status},
});

return await modal.present();

}

ShowmediaPage

@Input() url: string;

@Input() from:string;

Upvotes: 0

soni
soni

Reputation: 1

You just need to add your modal page module name into the app-module.ts under import:[ your -modal-module-page-name]. If you want to call a modal into a page there is no need to call into the page-module

    import { Component, OnInit } from '@angular/core';
    import { ModalController } from '@ionic/angular';
    import { CountryCodePage } from '../country-code/country-code.page';

    @Component({
      selector: 'app-login',
      templateUrl: './login.page.html',
      styleUrls: ['./login.page.scss'],
    })
    export class LoginPage implements OnInit {

      constructor(public modalController: ModalController) { }

      ngOnInit() {
      }

      openCountryModal(){
    this.presentModal();
      }


      async presentModal() {
        const modal = await this.modalController.create({
          component: CountryCodePage,
          componentProps:{"dataArr":{
            FirstName:"chitranjan",
            Lastname:"soni",
            Ambition :"coding"
          }}
        });
        return await modal.present();
      }
    }

    <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>


    import { Component, OnInit ,Input } from '@angular/core';
    import { NavParams } from '@ionic/angular';

    @Component({
      selector: 'app-country-code',
      templateUrl: './country-code.page.html',
      styleUrls: ['./country-code.page.scss'],
    })
    export class CountryCodePage implements OnInit {
      @Input() dataArr: string;
      constructor(private navParams: NavParams) {
        console.log(JSON.stringify(navParams.get('dataArr')));
       }
      ngOnInit() {
      }

    }


<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>


import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule } from '@angular/common/http';
import { CountryCodePageModule } from './country-code/country-code.module';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,CountryCodePageModule,
    HttpClientModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Upvotes: 0

Joel
Joel

Reputation: 1064

Navparams still works in Ionic 4 Beta-15

Page1.ts

   import { ModalPage } from './modal.page';

   async presentModal() {
    const modal = await this.modalController.create({
      component: ModalPage,
      componentProps: { value: 123 }
    });

    //insert onDidDismiss() here

    return await modal.present();
   }

ModalPage.ts

import { NavParams } from '@ionic/angular';

  export class ModalPage {
  public value = this.navParams.get('value');

  constructor(private navParams: NavParams) {}

}

To get a returned value from the ModaPage to Page1:

Page1.ts

modal.onDidDismiss().then((data) => {
  console.log(data);
})

IMPORTANT:

  1. To use ModalPage inside Page1 you need to import ModalPageModule module inside page1.module.ts file.

Upvotes: 4

Suresh Kumar Ariya
Suresh Kumar Ariya

Reputation: 9764

You need to use @Input() decorator.

async presentModal() {
    const modal = await this.modalController.create({
      component: ModalPage,
      componentProps: { value: 123 }
    });
    return await modal.present();
  }

Component:

@Component({
  selector: 'ModalPage',
  templateUrl: './ModalPage.component.html',
  styleUrls: [ './ModalPage.component.css' ]
})
export class ModalPage  {
  name = 'Angular';
  @Input() value: any;
}

Upvotes: 30

Related Questions