CODEWITHSUNDEEP
arraysangularngfor
filip
filip

Reputation: 45

Angular8 ngFor array inside array

This is my array which have property message which have another array.

chat = [{id:1, toUser:10, fromUser:11, seen:null, name:'Filip', messages:[{message:'Hello'},{message:'Hello again'}]}];

This is my HTML

<div *ngFor="let c of chat">
<h1>{{c.name}}</h1> //this works fine
<p>{{c.messages.message}}</p> //There I cant get anything. If I set c.messages[0].message I only get first result
</div>

Upvotes: 1

Views: 353

Answers (1)

pzaenger
pzaenger

Reputation: 11993

Use a second nested ngFor. Something like:

<div *ngFor="let c of chat">
  <h1>{{c.name}}</h1>
  <p *ngFor="let item of c.messages">{{item.message}}</p>
</div>

Upvotes: 1

Related Questions