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.

Could you share the same in stackblitz as the question is not very much clear to me. — Pujan Shah
– Pujan Shah, Commented Dec 27, 2019 at 5:10

Selaka Nanayakkara · Accepted Answer · 2019-12-27 05:19:16Z

4

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

answered Dec 27, 2019 at 5:19

Selaka Nanayakkara

6,9863 gold badges27 silver badges60 bronze badges

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

3 Comments

Marcus Gallegos Over a year ago

Let me expand, I want to be able to scroll to each of the groups. So sure the scope may not be conflicting but I do need the value of the group from the ngFor.

Selaka Nanayakkara Over a year ago

So cant you use a method inside the<mat-card-title (click)="getGroup(group)" #group > {{group}} </mat-card-title> like this to get the group or something silmilar?

Eliseo Over a year ago

Always you can use a ViewChildren to get in a QueryList the elements -ende the Nativeelement and so, but as SelakaN say inside the *ngFor you can use group without conflict

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related