Can't declare an object in *ngFor iterator of Angular

Question

I'm using the following code to iterate a bunch of custom controls. Since those need to know some stuff, like index and position in the structure, I'm passing in a config object to keep the junk together like this.

<div *ngFor="let thing of stuff; let first=first; let last=last; let index = index;">
  <app-thingy [data]="thing"
              [config]="{first:first,last:last,index:index}">
  </app-thingy>
</div>

I'd prefer to keep the code more compact and it seems like a very repetitive syntax with let this and let that. So I figured that I could create the object straight off in the iterative tag like this.

<div *ngFor="let thing of stuff; let config={first:first,last:last,index:index};">
  <app-thingy [data]="thing"
              [config]="config">
  </app-thingy>
</div>

However, Angular barks at this claiming that the curly bracket in the definition of config is an invalid syntax.

Uncaught Error: Template parse errors:
Parser Error: Unexpected token {, expected identifier, keyword, or string at column 45 in [let thing of stuff; let config={first:first,last:last,index:index};] in
...
<div [ERROR ->]*ngFor="let thing of stuff; let config=

As far I can goolearch it, the syntax is wrong but I can't see why. Can someone, please, shed some light on why those two samples aren't equivalent?

I noticed that using new MyType(...) in the HTML markup isn't working neither but that's apparently by design. However, this is a anonymous object (type any) so I'm a bit puzzled.

Sajeetharan Sajeetharan · Accepted Answer · 2017-10-31T19:19:18

You cannot declare an object using let inside the component.html

WRONG

<div *ngFor="let thing of stuff; let config={first:first,last:last,index:index};">

Instead you can create the object in ts and pass it in the HTML

Can't declare an object in *ngFor iterator of Angular

2 Answers