Cómo recibir parámetros con componentProps en un modal abierto 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.

Créeme que no eres el único, ni serás el último, que pasa por aquí a intentar darle solución a esta cuestión. Y, cómo es de esperar, lo consigue.

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.

Pero antes de continuar, este es El Círculo. Es mi newsletter donde te puedo enseñar desarrollo de apps móviles, aso y monetización. Por cierto, si te suscribes te regalo mi ebook Duplica los ingreso de tus apps en 5 minutos. No es broma.

P.D: Darse de alta es gratis y de baja, también.

Cómo hacerlo correctamente

Primero, 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, 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»}», pasamos los parámetros cómo un objeto plano.

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

• @Input(«value») value;
• @Input(«otherValue») otherValue;

Se podrías hacer de más maneras, cómo con un SharedPreferences, o a través del WebStorage, por ejemplo. Pero la manera que hemos expuesto en el código sería la más corriente y la que mejor funcionaria al pasar las referencias en lugar de persistirlo.

Pues espero que este minitutorial te haya sido de ayuda, que para eso los hago 🙂

Sin nada más que agregar, nos vemos en el siguiente artículo. Hasta entonces ¡que vaya bien!