QueryList is not iterable

[calebegg]

Docs say

Implements an iterable interface, therefore it can be used in both ES6 javascript for (var i of items) loops as well as in Angular templates with *ngFor="let i of myList".

This is plainly untrue:

https://github.com/angular/angular/blob/master/packages/core/src/linker/query_list.ts

In TS, I get:

TS2488: Type 'QueryList' must have a 'Symbol.iterator' method that returns an iterator.

even though we use --downlevelIteration

[pkozlowski-opensource]

For the reference: #17414, #7022, #5437 and probably many others...

[trotyl]

@pkozlowski-opensource

I don't think there is a way to make TS happy when targeting ES5 (not all browser Angular supports support ES2015 - more specifically Symbol here)

The previous reply doesn't make sense any more, Symbol is a required polyfill in Angular CLI when targeting es5, so there is no issue for supporting Symbol.iterator.

[piotrtomiak]

This issue is also hurting users in WebStorm with *ngFor syntax: https://youtrack.jetbrains.com/issue/WEB-38825 . QueryList is not assignable to NgIterable. I think NgIterable could be defined in a more forgiving way to accept QueryList.

[cexbrayat]

This also affects Ivy users with fullTemplateTypeCheck on (8.0.0-rc.4).
A component like:

@Component({
  selector: 'ns-tabs',
  template: `
  <ul class="nav nav-tabs">
    <li class="nav-item" *ngFor="let tab of tabs">
      <a class="nav-link">{{ tab.title }}</a>
    </li>
  </ul>`
})
export class TabsComponent {
  @ContentChildren(TabDirective) tabs: QueryList<TabDirective>;
}

throws:

__ng_typecheck__.ts:162:24 - error TS2322: Type 'QueryList<TabDirective>' is not assignable to type 'NgIterable<any>'.
  Type 'QueryList<TabDirective>' is missing the following properties from type 'any[]': pop, push, concat, join, and 18 more.

162     var _t2 = _ctor1({ ngForOf: ctx.tabs });

It can be fixed by adding .toArray() but it would be better to fix the underlying issue.

[Splaktar]

We've seen this issue in the Components repo as well. It would be nice to fix the typing to support QueryList in ngForOf.

[cexbrayat]

Update: since the latest v9 releases (9.0.0-rc.0 at the time of writing), you can enable fullTemplateTypeCheck without encountering this issue.

A stricter option, strictTemplates, has been introduced, and the issue is now encountered only with this option activated.

[dhiegoatencio]

This also affects Ivy users with fullTemplateTypeCheck on (8.0.0-rc.4).
A component like:

@Component({
  selector: 'ns-tabs',
  template: `
  <ul class="nav nav-tabs">
    <li class="nav-item" *ngFor="let tab of tabs">
      <a class="nav-link">{{ tab.title }}</a>
    </li>
  </ul>`
})
export class TabsComponent {
  @ContentChildren(TabDirective) tabs: QueryList<TabDirective>;
}

throws:

__ng_typecheck__.ts:162:24 - error TS2322: Type 'QueryList<TabDirective>' is not assignable to type 'NgIterable<any>'.
  Type 'QueryList<TabDirective>' is missing the following properties from type 'any[]': pop, push, concat, join, and 18 more.

162     var _t2 = _ctor1({ ngForOf: ctx.tabs });

It can be fixed by adding .toArray() but it would be better to fix the underlying issue.

using .toArray() in ngFor fixed the problem