Angular 4: dynamically setting a local variable # dynamically

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

Specific need: I have the following template created by iterating through * ngFor, and I wanted to assign an angular id to the iteration.

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

And after it is interpreted, it will end up with something like:

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

Now I know about many other ways to get elements, I can assign # to an ul element, etc. etc. but I wonder if there is a way to do this on ngFor.

CHANGE AFTER AFTER RESPONSES AND INCREASE OF COMBINATIONS:

, , * ngFor. , , , .

+4
3

#, :

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

:

@ViewChildren('linkRef') linkRefs;
+6

:

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

:

+1

You can use an index for it.

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

Source: https://habr.com/ru/post/1691211/


All Articles