Using QueryLists and Observables to follow changes in ViewChildren

One very useful piece of behavior in components is the ability to track changes to the collections of children in the view. In many ways, this is quite a nebulous subject, as the number of ways in which view collections can be altered is numerous and subtle. Thankfully, Angular 2 provides a solid foundation for tracking these changes.

Note

The code, links, and a live example of this are available at http://ngcookbook.herokuapp.com/4112/.

Getting ready

Suppose you begin with the following skeleton application:

[app/inner.component.ts] 
 
import {Component, Input} from '@angular/core'; 
 
@Component({ 
  selector: 'inner', 
  template: `<p>{{val}}` 
}) 
export class InnerComponent { 
  @Input() val:number; 
} 
[app/outer.component.ts] 
 
import {Component} from '@angular/core'; 
 
@Component({ 
  selector: 'outer', 
  template: ` 
  ...