
Angular – Pass Data to Modals & Popover
Table of Contents
Intro
Little snippet shows how to pass data in a modal or popover in ionic 5. This technique is useful when updating dynamic data.
Sources
Snippet For Modal
// mainPage
import { Component } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { ModalPage } from '../modal/modal.page';
@Component()
export class SomeParentComponent {
constructor(public modalController: ModalController) {}
async presentModal() {
const modal = await this.modalController.create({
component: ModalPage,
componentProps: {
foo: 'hello',
bar: 'world'
}
});
return await modal.present();
}
}
// child to pass data
import { Component, OnInit } from '@angular/core';
@Component()
export class ModalPage implements OnInit {
foo;
bar;
ngOnInit() {
console.log(`${foo} ${bar}`)
}
}
Other Way
import { Router } from '@angular/router';
private route: Router
this.route.navigate(['products', { id: 128}]);
import { ActivatedRoute } from '@angular/router';
private activatedRoute: ActivatedRoute
ngOnInit() {
this.activatedRoute.params.subscribe((params) => {
console.log('Params: ', params);
});
}
Or
import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
...
})
export class HomeComponent {
constructor(private router: Router){}
navigate(){
this.router.navigate(['/detail', { id: "123" }]);
}
}
let id = this.route.snapshot.paramMap.get('id')