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:

<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);
}

CodePudding user response：

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
  }
}