How to get child elements created by ngFor?

Question

Angular

<select [(ngModel)]="selectedId" appSelect>
  <option #option *ngFor="let item of Items" [ngValue]="item.id ">{{item.name}}</option>
</select>

@ContentChildren('option') options: QueryList<ElementRef>;
...
ngContentViewInit() {
  this.options.changes.subscribe(...);
}

Is it possible to do the same but without #option template variable

Answer 1

how do you use ViewChildren?
Show me please

Answer 2

Artem , there is another option. It is similar, but it can be found in various creators of a bunch of all sorts of components for angular.

<div class="table-body">
    <ul class="table-list"
        directiveList>
      <li *ngFor="let item of items; let i = index; trackBy: trackByFn"
           class="table-item" directiveItem>
          {{item}}
      </li>
    </ul>
  </div>

There is a directiveList, there is a directiveItem.
The directiveList class contains a list of these "child" elements.

@Directive({
  selector: '[directiveList]',
  exportAs: 'directiveList'
})
export class DirectiveList {
/**
   * Children directives which placed on items
   */
  @ContentChildren(DirectiveItem, {read: ElementRef}) // получаем сразу как список ссылок на компоненты класса
  private _items: QueryList<DirectiveItem>;
}

ngAfterContentInit() {
    this._items.changes.subscribe(() => {
      this.coolFunc();
    });

}

What's the Difference?
You get rid of work with elements in a component. Because today you want to do something with the list of elements, but tomorrow you don’t want to, for this you just remove the directives. The component will not change much.
But anyway via @ContentChildren.
p.s. I totally forgot. Here is the empty directive itself

@Directive({
  selector: '[directiveItem]'
})
export class ClassNewInViewItemDirective {

  constructor() { }

}