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.

Answer 1

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;

Answer 2

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

Answer 3

You can use the index for it.

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