angulartypescriptfor-loopangular-signals

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.

Solution

  • You have to execute the signal to access the value inside which is the array you want.

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