Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Passing template reference between components in Angular

I have a parent grid component that contains child grid-item components. Most of my child grid item components navigate to a route on click.
However I have one child that needs to open a modal window on click instead of navigating.

Can I pass my child component a reference to the template #deactivateDialog?
My current usage of @Input route sends it as a string, when I need the template itself.

Parent:

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

<app-grid-item route="deactivateDialog" (navigationType)="openDialog($event)"></app-grid-item>
//more app-grid-items

<ng-template #deactivateDialog>
  //dialog markup
</ng-template>

openDialog(dialog) {
  //opening dialog
}

Child:

<div (click)="navigate()">

@Input() route;
@Output() navigationType = new EventEmitter();

navigate() {
  this.navigationType.emit(this.route);
}

>Solution :

You can move navigation logic to the TypeScript file, and pass 2 arguments to the function:

  1. The route where to navigate (if it’s not item that should open dialog)
  2. true/false (true if you should navigate, and false if you have to open the dialog)
<ng-template #deactivateDialog>
  //dialog markup
</ng-template>

<app-grid-item (click)="custom_function('route_to_navigate', true)"></app-grid-item>

Now in TypeScript file create custom_function() that will check if you should navigate or you should open the dialog.

custom_function(route_to_navigate, is_navigating){
  if (is_navigating){
    this.router.navigate([route_to_navigate]);
  } else {
    // Open dialog
  }
}
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading