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')