Ionic 4 how do I receive componentProps?
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);
}
}
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'));
}