Angular2 ViewChild ViewChildren

angular2 ViewChild ViewChildren.md

Access DOM elements with Angular2's ViewChild and ViewChildren. I know it's not the preferred way, but sometimes handy.

Add a #label to the element in html.

Access that in the component by setting queries in the component decorator.

Then after the view is initialised we can get the nativeElement.

ViewChildren gives us a QueryList. The children aren't accessed directly through that, but we can filter/map/foreach that to get to the elements.

home.html

  <div #newCard > new card </div>

  <div #existingCard *ngFor='let item of items'>
    {{item}}
  </div>

home.ts

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

@Component({
  templateUrl: 'home.html',
  queries : {
    newCard : new ViewChild('newCard'),
    existingCard : new ViewChildren('existingCard')
  }
})
export class Home {

  items: any = ['a', 'b', 'c', 'd'];

  @ViewChild('newCard') newCard: any;
  @ViewChildren('existingCard') existingCards: any;

  constructor() {}

  ngAfterViewInit() {

    // get a DOM element
    let target = this.newCard.nativeElement;

    // This gives us Angular's QueryList object for 
    // the collection of DOM elements we reference via ViewChildren
    console.log(this.existingCards);
     // Will be called every time an item is added/removed
    this.existingCards.changes.subscribe( () => console.log('Something has changed') );
    // Loop through or filter/mpa/reduce to get individual elements
    this.existingCards.forEach( (i) => console.log(i) );
  }

}