Posts

Showing posts with the label component

How to trigger/access the child component method from parent component

  We can do this by using @ViewChild. Reference :  https://angular.io/guide/component-interaction Stackblitz demo :  https://stackblitz.com/edit/angular-child-method-access?file=src/app/app.component.ts Way 1) With type selector Parent component: export   class   ParentComponent   implements   OnInit   { //Type selector    @ ViewChild ( ChildComponent )  childComp :   ChildComponent ;    constructor ()   {}   ngOnInit ()   {}   parentClickEvent ()   {      this . childComp . childMethod ();    } } Child Component: export   class   ChildComponent   implements   OnInit   {   childMethodStatus  =   "Child Method not trigered" ;   count  =   0 ;    constructor ()   {}   ngOnInit ()   {}   childMethod ()   {      thi...

Passing data to component using Modal Controller in ionic 4

Here we can see how to pass the data from angular page to component using ModalController in ionic 4 Invoking the modal popup: //invoking modal with data async invokeAirportModal( title ){ const popover = await this.modalController.create({ component: ModalComponent , componentProps: { value : title } , showBackdrop: true }); //open the modal popup await popover.present(); //Receive data from component when dismiss the modal popup const event: any = await popover.onDidDismiss(); console.log(JSON.stringify(event)) const data: any = event.data; if(data != null) { // Do your code } } Component: We need to use @Input Decorator to receive the data from page @Component({ selector: 'ModalComponent', templateUrl: './ModalComponent.component.html', styleUrls: [ './ModalComponent.component.css' ] }) export class ModalComponent { @Input() value: any; ngOnInit()...