typescript Angular - QueryList ElementRef

Posted 2021-05-20

export class ViewContainerRefWidgetComponent implements OnInit, AfterViewInit {
  allBooks: Book[] = [];
  // selects all 'book' elements from this component
  @ViewChildren('book') books:  QueryList<ElementRef>;

  constructor(private ren: Renderer2) {
  }

  ngOnInit() {
    this.initBooksCollection();
  }
  ngAfterViewInit(): void {
    // here your DOM elements are available
    // you can subscribe to the QueryList and each time an element is added or removed
    // you can see the new QueryList
    this.books.changes.subscribe((val: QueryList<ElementRef>) => {
      console.log(val.toArray());
    });
  }
  filterByGenere(genere: string) {
    this.books.filter(elem => {
      // filters for a speciffic genere
      return this.genereMatches(elem, genere);
    }).forEach(bookNode => {
      // applies CSS to each DOM node
      this.ren.setStyle(bookNode.nativeElement, 'border', '3px solid red')
    });
  }
  addBook() {
    this.allBooks.push({
      id: 'book-6',
      author: 'Stephen King',
      genere: 'fiction'
    })
  }
  genereMatches(element, genere) {
    return element.genere === genere;
  }
  initBooksCollection() {
    return;
  }
}