Passing template reference between components in Angular

Question

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

I'm maybe stupid, but am not understanding. Seems you are already opening the modal on click? why you need the reference inside the child? — AVJT82
– AVJT82, Commented Nov 5, 2021 at 18:40

NeNaD · Accepted Answer · 2021-11-05 18:32:46Z

1

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

The route where to navigate (if it's not item that should open dialog)
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
  }
}

answered Nov 5, 2021 at 18:32

NeNaD

20.8k11 gold badges64 silver badges118 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Passing template reference between components in Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related