Angular @ViewChildren

app.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent {
  name = 'Angular';
  @ViewChildren('foo') list: QueryList<ElementRef>;

  items = [
    {id: 1, name: 'coffee machine'},
    {id: 2, name: 'refrigerator'},
    {id: 3, name: 'toaster'}
  ]

  ngAfterViewInit() {
    this.list.toArray().forEach( (l: ElementRef) => {
      console.log(l.nativeElement.dataset.index);
    });
  }
}

equivalent.ts

import { Component, OnInit} from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent {
  name = 'Angular';

  items = [
    {id: 1, name: 'milad'},
    {id: 2, name: 'Alexandra'},
    {id: 3, name: 'Sara'}
  ]

  ngAfterViewInit() {
   const list: NodeListOf<HTMLElement> = document.querySelectorAll('#foo');
   list.forEach( i => console.log(i.dataset.index));
  }
}