Cómo recibir parámetros con componentProps en un Ionic modal con modalController

Si estás intentando pasar parámetros a un modal mediante componentProps y, al hacerlo, este objeto llega cómo "undefined", no te preocupes, es normal si no te han enseñado cómo hacerlo correctamente. Sigue leyendo, quizás esto te interese.

Mi nombre es Aitor Sánchez, soy desarrollador de apps desde 2014, y en este artículo aprenderás cómo mandar parámetros, mediante componentProps, a tu modal y una vez allí recuperarlos para poder utilizarlos cómo necesites.

Pero antes de continuar, esta es la Flutter Mafia. Es mi newsletter donde aprenderás desarrollo de apps móviles, aso y monetización. Y si te suscribes te regalo mi ebook "Duplica los ingreso de tus apps en 5 minutos" No es broma, quizás te interese.

 

Cómo hacerlo correctamente

Primero observa el componente desde el que queremos lanzar el modal:

import { Component } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { TestComponent } from '../test/test.component';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss']
})
export class HomePage {
  constructor(public modalController: ModalController){}
  async presentModal() {
    const modal = await this.modalController.create({
      component: TestComponent,
      componentProps: { value: "Primer valor", otherValue: "Segundo valor"}
    });
    return await modal.present();
  }
}

 

Y ahora mira el modal en sí que vamos a abrir:

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

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {
  @Input("value") value;
  @Input("otherValue") otherValue;
  constructor() { }

  ngOnInit() {
    console.log(this.value);
    //print Primer valor
    console.log(this.otherValue);
    //print Segundo valor
  }
}

 

Si te fijas en la línea "componentProps: { value: "Primer valor", otherValue: "Segundo valor"}", le pasas los parámetros cómo un objeto plano.

Y, después, desde el modal los recuperas con las siguiente lineas:

• @Input("value") value;
• @Input("otherValue") otherValue;

Podrías hacerlo de diferentes maneras, cómo con un SharedPreferences, o a través del WebStorage, por ejemplo.

Pero la manera que te he expuesto en el código sería la más corriente y la que mejor te funcionaría al pasar las referencias en lugar de persistirlo.

 

Algo más que quizás te interese

Mira, en el momento que tu mejoras el logo de una app que tengas publicada en Google Play, las descargas y los ingresos que esta aplicación genera aumentan. Esto es así. Mejor logo es igual a más dinero.

Basándonos en esto, hemos creado esta herramienta que te permite evaluar, optimizar y mejorar los logos de tus apps para que reciban más descargas. No te quiero espoilear, dentro hay un video explicativo. Entra en el enlace.

 

Geniete, espero haberte ayudado a entender cómo puedes pasar parámetros a un modal en Ionic y nos vemos en el siguiente artículo. Hasta entonces ¡que te vaya bien!