Unable to use @for loop on array of custom objects. Receiving error

Using Angular V18. Attempting to use the @for loop to render multiple child components, but receiving error "Type 'InputSignal<LoopTile[]>' must have a 'Symbol.iterator' method that returns an iterator.".

This only seems to happen when I bind the value to an input. If I manually set the variable to an array with the same values it works fine.

app.component.ts -- snippet

tiles: LoopTile[] = [{ id: 1, name: 'bob', description: 'bobs description but from main app' }]


app.component.html -- snippet

<app-loop-tile-list [tileList]="tiles"></app-loop-tile-list>


loop-tile-list.component.html -- snippet

<div class="loop-tile-list">
@for(tile of tileList; track tile.id) {
<app-loop-tile [tile]="tile"></app-loop-tile>
}
</div>


loop-tile-list.component.ts

export class LoopTileListComponent {
tileList = input.required<LoopTile[]>();
}


it seems to have an issue with iterating over tileList from loop-tile-list.component.ts when it is accepting it as input. When I hardcode tileList to be an array of LoopTiles it seems to work fine.

Continue reading...