Angular 4: setting the local variable # dynamically

Question

Is there a way to dynamically set the #id, the HTML attribute that angular uses to construct the @ViewChild element reference?

Specific need: i have the following template, created by iterating through *ngFor, and i wanted to assign the Angular id on the iteration.

<ul>
   <li *ngFor="let link of links">
  </li>
</ul>

And after it gets interpreted, end up with something like:

<ul>
  <li #link1>
   </li>
  <li #link2>
   </li>
 </ul>

Now I know of many other ways to get the elements, i can assign the # to the ul element, etc, etc, but wondering on whether there is a way to do it on the ngFor.

EDIT AFTER SEEING THE ANSWERS AND TRYING OUT COMBINATIONS:

There doesn't seem to be a way to assign distinct local variable identifiers to the single elements generated by *ngFor. You can either get them all, like the accepted answer suggests, or just get the parent element, and find your way from there.

Can we do this the other way around? Meaning, can we dynamically add a template reference variable to a dynamically created DOM element? — Akash Kriplani
– Akash Kriplani, Commented Oct 12, 2022 at 15:27

Estus Flask · Accepted Answer · 2017-12-22 18:19:05Z

21

Despite the seeming resemblance between regular variables and #, multiple elements can be assigned to single local template reference variable:

<ul>
   <li *ngFor="let link of links" #linkRef></li>
</ul>

Which can be obtained with:

@ViewChildren('linkRef') linkRefs;

edited Dec 22, 2017 at 18:19

answered Dec 22, 2017 at 3:53

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

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

2 Comments

amy8374 Over a year ago

tried this, and it references just the first <li> element.

Estus Flask Over a year ago

@amy8374 it certainly doesn't. ViewChild references single element. ViewChildren references multiple.

Wang Xiao · Accepted Answer · 2017-12-22 03:01:24Z

4

You can use like this code:

<ul>
    <li *ngFor="let item of items;let i = index;" #itemRef{{i}}>{{item.xyz}}</li>
</ul>

Look this question: enter link description here

answered Dec 22, 2017 at 3:01

Wang Xiao

3153 silver badges14 bronze badges

1 Comment

Wang Xiao Over a year ago

@amy8374 It working,But you cannot use @ViewChild get it and must use @ViewChildren.

Naji Aboo · Accepted Answer · 2017-12-21 23:55:29Z

-6

You can use the index for it.

 <ul>
<li *ngFor="let link of links; let i=index;">
{{link.title}}{{i}} 
</li>
</ul>

answered Dec 21, 2017 at 23:55

Naji Aboo

111 silver badge6 bronze badges

1 Comment

amy8374 Over a year ago

i want to set the # not append to the text of <li>

Collectives™ on Stack Overflow

Angular 4: setting the local variable # dynamically

3 Answers 3

2 Comments

1 Comment

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

1 Comment

Linked

Related