Есть ли способ создать динамические ссылки для HTML, которые будут использоваться Angular?

Question

Иногда мы можем создать несколько полезных ссылок для элементов в HTML и использовать их в нашем угловом коде, например:

<input #myInput>

Я хотел бы сейчас, если есть способ динамически создавать эти ссылки, что-токак:

<div *ngFor="items of list; let i = index">
  <input #myInput-{{i}}/>
</div>

Будет генерироваться # myInput-0, # myInput-1 ... # myInput-N.

Answer 1

Вы можете использовать @ ViewChildren для достижения этого.

TS:

import { ViewChildren, QueryList } from '@angular/core';

  @ViewChildren('myInput') myInputs: QueryList<ElementRef>


  ngAfterViewInit() {
    console.log(this.myInputs._results);
  }

Шаблон:

<div *ngFor="let items of list">
  <input #myInput/>
</div>

См. Рабочая демонстрация