Using QueryList with Query... following docs and other articles not working with alpha45?

[NathanWalker]

I am in the process of building an Angular2 library to be shared with the community via npm and stumped with QueryList. It always returns an empty list of items upon instantiation and when subscribing to it. Pseudo code to follow.
I've read and followed all the documentation here:
https://angular.io/docs/ts/latest/api/core/QueryList-class.html
https://angular.io/docs/ts/latest/api/core/QueryMetadata-class.html
(...and all other docs realted to query, etc.)
As well as read:
http://victorsavkin.com/post/126514197956/dependency-injection-in-angular-1-and-angular-2
And tried using @ContentChildren as well to no avail.

Given directives similar to following...

@Directive({
  selector: '[container]'
})
class Container {
  items: QueryList<Item>;
  constructor(@Query(Item, {descendants: true}) items: QueryList<Item>) {
    this.items = items;
    this.items.changes.toRx().subscribe((list) => {
      // list is always empty!
      // this.items is also always empty!
    });
  }  
}

@Directive({
  selector: '[item]'
})
class Item {
  @Input() item: string;
  constructor(private el: ElementRef) {
     ...
  }
}

and markup like...

// given a bootstrapped component like...

@Component({
  selector: 'app',
  template: `
    <section container>
      <div *ng-for="#item of items" item>
      </div>
    </section>
  `,
  directives: [Container, Item]
})
export class AppCmp {
  public items: Array<any> = [ .... ]; // items omitted for example here, but this would be full of 20 objects
}

bootstrap(AppCmp, []);

Not sure if I am using it wrong or if this is a bug in alpha45.

[ericmartinezr]

If that's your current code, it looks like you are missing a forwardRef, see that Item is defined after Container

so basically if you do

@Query(forwardRef(() => Item), {descendants: true})

It should work fine.

I opened an issue for this #4489 a time ago, although Query is being removed #4919

[NathanWalker]

@ericmartinezr Thank you! That was precisely it. 👍

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}