QueryList changes event not triggered by changes in children.

[filipesilva]

I'm submitting a ... (check one with "x")

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior
Subscription to changes of a QueryList is not triggered by changes in the children of an HTML element.

Expected/desired behavior
Previously (although I cannot tell when this changed), the event was triggered.
Not sure if this is intended or not, @naomiblack @mhevery?

Reproduction of the problem
Documentation showing the expected (previous) behaviour can be found in https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngfortrackby . There is a live example link at the top that will create a plunker.

Lines 450-452 of app/app.component.html contain the template code, while lines 191-223 of app/app.component.ts contain the change detection code.

The relevant code is as follows:

<div #noTrackBy class="box">
  <div *ngFor="let hero of heroes">({{hero.id}}) {{hero.fullName}}</div>
</div>

@ViewChildren('noTrackBy') childrenNoTrackBy: QueryList<ElementRef>;
//...
this.childrenNoTrackBy.changes.subscribe((changes: any) => {
  // never triggered
}

Please tell us about your environment:

• Angular version: 2.0.0-rc.3
• Browser: [all ]
• Language: [TypeScript X.X ]

[tbosch]

We are setting @ViewChild / @ViewChildren and pushing changes to it right after the component has been created, i.e. before ngInit. This was done in c3d2459 so that users can access an ElementRef and do dynamic component loading already in ngOnInit.

I think the new behavior is good. However, we should wait for notification until ngViewChecked as was the case before so that listeners that have been registered in ngOnInit are still being called.

[tbosch]

This is actually not true. c3d2459 only changed the behavior of @ViewChild / @ContentChild but not for @ViewChildren / @ContentChildren.

The problem in the plunker is that the stream is subscribed to in ngAfterViewInit, which is too late. It should be subscribed to in ngOnInit.

[marcalj]

Maybe you can put a console warning if you find this subscription in ngAfterViewInit ? It will help avoid mistakes and headaches :)

[filipesilva]

@tbosch I tried moving the subscription to ngOnInit:

// lines 30-36 of app/app.component.ts
  ngOnInit() {
    this.refreshHeroes();
    this.detectNgForTrackByEffects();
  }

  ngAfterViewInit() {
    // this.detectNgForTrackByEffects();
  }

but it appears that at the time of ngOnInit childrenNoTrackBy is still undefined. Am I missing something?

[kemsky]

I though about posting feature request to initialize QueryList early (deprecated Query was convenient when injected into constructor) with empty list (i.e. after constructor call) so that it would be possible to use/subscribe early. Currently, QueryList has two states: already populated or not initialized which leads to more verbose code.

[MikaAK]

I'm actually having this problem currently! Is there any workaround for now? I tried adding the subscription in ngOnInit but the QueryList is undefined at that time.

export class TextSelector implements OnInit {
  @ContentChildren(TextSelectorItem) public selectItems: QueryList<TextSelectorItem>

  public ngOnInit() {
    this.selectItems.changes // throws "Cannot read property 'changes' of undefined"
      .subscribe(() => console.log('hit'))
  }
}

[ericmartinezr]

@ContentChildren is set at ngAfterContentInit, if you have any question you can ask here https://gitter.im/angular/angular, we will be more than happy to help 😂

[tolemac]

I have a similar issue adding children dynamically, here the plunkr

child elements are added but subscribe callback isn't called ...