title: Angular 4: setting the local variable # dynamically
body: <p>Is there a way to dynamically set the #id, the HTML attribute that angular uses to construct the @ViewChild element reference?</p>
  
  <p>Specific need: i have the following template, created by iterating through *ngFor, and i wanted to assign the Angular id on the iteration. </p>
  
  <pre><code>&lt;ul&gt;
     &lt;li *ngFor="let link of links"&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>And after it gets interpreted, end up with something like:</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li #link1&gt;
     &lt;/li&gt;
    &lt;li #link2&gt;
     &lt;/li&gt;
   &lt;/ul&gt;
  </code></pre>
  
  <p>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. </p>
  
  <p><strong>EDIT AFTER SEEING THE ANSWERS AND TRYING OUT COMBINATIONS:</strong></p>
  
  <p>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. </p>