根据* ngFor'first'变量写出任意html标签属性？

Question

I have a component which uses *ngFor to display a list of widgets/DIVs, each of which contains a textarea element.

I want to set the focus on the first textarea to appear from this list of widgets/DIVs.

Can I use the 'first' variable of the ngFor directive to write arbitrary html? In my case, I would like to add the 'autofocus' tag/attribute into the first textarea element my component writes:

eg <textarea autofocus></textarea>

I put a sample plunkr here that works, but it uses the ngAfterViewInit() method, which seems clunky to me when my component knows which element is first in the list: https://embed.plnkr.co/a3zXZd9WBFNTj6yu1oU6/

Thank you.

Answer 1

You can just bind first local variable to autofocus:

<div *ngFor="let name of NAME_LIST; let first = first;">
  {{name}}<br />
  <textarea [autofocus]="first"></textarea> <br /><br />
</div>

Answer 2

you can use index variable :

<div *ngFor="let name of NAME_LIST; let i = index;">
  {{name}}<br />
  <textarea [autofocus]="i === 0"></textarea> <br /><br />
</div>

Answer 3

You can use setAttribute() method as below,

HTML will be as

<div>
  <h2>How to set focus on first TEXTAREA element from list?</h2>
</div>
<div *ngFor="let name of NAME_LIST">
    {{name}}<br />{{first}}
    <textarea ></textarea><br /><br />
</div>
<span> {{getFocused()}} </span>

Typescript method:

getFocused(){
    document.querySelectorAll('textarea')[0].setAttribute("autofocus", "true");
  }

LIVE DEMO UPDATED PLUNKER