Angular 2 *ngFor only supports to add 10 elements at a time in inline template

Question

I wanted to repeat particular element several amount of time, so I'm using *ngFor directive with hardcoded array like [1,2,3,4,5,6,7,8,9,10] and that got worked awesome. I achieved what I wanted to do.

Code

@Component({
  selector: 'my-app',
  template: `<h1>My First Angular App</h1>
      <div *ngFor="let item of [1,2,3,4,5,6,7,8,9,10]">
          {{item}}: My Element 
      </div>`
})

Demo Plunkr

But as soon as I increased the array size more than 10, I start getting below error. Which is really annoying.

[email protected]?main=browser:355 Unhandled Promise rejection: Unsupported number of argument for pure functions: 11 ; Zone: ; Task: Promise.then ; Value: Error: Unsupported number of argument for pure functions: 11(…) Error: Unsupported number of argument for pure functions: 11

Template

<div *ngFor="let item of [1,2,3,4,5,6,7,8,9,10,11]">
  {{item}}
</div>`

I'm curious to know why that error is happening as soon as array size increase more than 10? But another interesting thing is when I put the same array in component inside variable items= [1,2,3,4,5,6,7,8,9,10,11] and used items in *ngFor and it got worked.

Is there any reason behind such special case? Parden me if I missing something simple/silly.

Problem Plunkr

Answer 1

This is just a limitation of the Angular2 template parser to avoid complexity in the parser (by design). It's usually a good idea to keep data in the component instance anyway.

https://github.com/angular/angular/blob/d972d8235458a6e65819f96ee56da059ec76321b/modules/%40angular/compiler/src/view_compiler/util.ts#L82