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

Question

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.

Naren Murali · Accepted Answer · 2025-08-20 17:50:13Z

0

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>

answered Aug 20 at 17:50

Naren Murali

66.2k6 gold badges51 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vladmere Aug 20 at 17:52

Gah. Thank you. I have been staring at this trying all sorts of different things and I keep forgetting that I can't access it directly.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related