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);
}
You can move navigation logic to the TypeScript file, and pass 2 arguments to the function:
<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
}
}