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.


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

<ng-template #deactivateDialog>
  //dialog markup

openDialog(dialog) {
  //opening dialog


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

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

navigate() {

>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

<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){
  } else {
    // Open dialog

Leave a Reply