How to Dynamically Set Angular # Template Reference Variables [duplicate]

Question

I have a list of groups populated from a database and use ngFor to iterate through in the html.

<mat-card  *ngFor="let group of groups" >
  <mat-card-title #group > {{group}}  </mat-card-title>
</mat-card>

I would like the #group to be the value of the group, not hardcoded. That way I can have another component to scroll to the different template variables.

How can I do this? Thanks.

Answer 1

As per my knowelage template reference variables are uniquely scoped to the templates that they are defined in. And structural directive creates a nested template and therefore, introduces a separate scope, in your case mat-card-title.

So basically using group template reference variable inside <mat-card-title #group > will do in your case since it will hold unique scope for itself.

<mat-card  *ngFor="let group of groups" >
  <mat-card-title #group > {{group}}  </mat-card-title>
</mat-card>

For more details please refer answer by @yurzui here