angular: QueryList changes event not triggered by changes in children.

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 ]

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 7
Comments: 17 (7 by maintainers)

Links to this issue

angular - How can I select an element in a component template? - Stack Overflow

Most upvoted comments

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'))
  }
}

+16

MikaAK on Jul 14, 2016

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

child elements are added but subscribe callback isn’t called …

tolemac on Sep 1, 2016

@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?

filipesilva on Jun 30, 2016

This is actually not true. c3d2459a4e981f96891f14ce460435b379564642 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.

tbosch on Jun 29, 2016