Ionic 4 how do I receive componentProps?

Question

In Ionic 4, I am trying to use the modalController to open a modal. I am able to open the modal and send componentProps, but I'm not sure how to receive those properties.

Here's how I open the modal component:

async showUpsert() {
  this.modal = await this.modalController.create({
    component:UpsertComponent,
    componentProps: {test: "123"}
  });
  return await this.modal.present();
}

My question is; in the actual modal, how do I get test: "123" into a variable?

Sergio Escudero · Accepted Answer · 2018-08-23T18:52:15.647

30

You can take those values with Input Component Interaction in the component you will need it, for example:

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: 123, otherValue: 234 }
    });
    return await modal.present();
  }
}

In your modal component with Input you can take those params:

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;
  constructor() { }

  ngOnInit() {
    //print 123
    console.log(this.value);
    //print 234
    console.log(this.otherValue);
  }
}

edited Aug 23 '18 at 18:52

answered Aug 23 '18 at 17:03

Sergio Escudero

1,798
14
21

1

Aah, I haven't used the `@input`s before. Thank you, I will try this out right now – ntgCleaner Aug 23 '18 at 18:32
Great, that worked!! Thank you! May I ask what the string inside of the input is for compared to no string inside? `@Input("value") value;` vs `@Input() value;` . Is this `@Input` able to do self-assignment and if you want it to be a different value, you can change the variable on the end? `@Input('value') newVariable` – ntgCleaner Aug 23 '18 at 18:35
1

You are right my friend. The string inside the input is the name how you are going to receive that param. By default it takes the variable name – Sergio Escudero Aug 23 '18 at 18:49
1

Just a note to someone who might have the same problem as me, the values of these properties marked with ```@Input()``` are not available in constructor, only on ```ngOnInit()``` – Marlon Sep 23 '21 at 19:53
1

@Marlon These values change after the component is redered. This is because of the componen life cycle. The constructor method is the first one being executed, that why the ngOninit was created for... – Sergio Escudero Sep 24 '21 at 20:05

score 5 · Answer 2 · answered Apr 12 '19 at 06:35

You can also use Navparams to get the value of componentProps.

import { CommentModalPage } from '../comment-modal/comment-modal.page';
import { ModalController, IonContent } from '@ionic/angular';


constructor(public modalCtrl : ModalController) {  }

  async commentModal() {
      const modal = await this.modalCtrl.create({
        component: CommentModalPage,

        componentProps: { value: 'data'}
      });
      return await modal.present();
   }

In your commentModalPage, you just have to import navprams and get the value from it.

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

constructor(public navParams : NavParams) {  

              console.log(this.navParams.get('value'));

            }

Ionic 4 how do I receive componentProps?

2 Answers2

Linked