Angular8 ngFor array inside array

Question

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>

pzaenger · Accepted Answer · 2021-05-13 13:45:23Z

1

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>

answered May 13, 2021 at 13:45

pzaenger

12.1k3 gold badges48 silver badges55 bronze badges

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

1 Comment

Kshitij Over a year ago

A good developer will check if c.messages is not null or undefined. you can use ng-container for that.

Collectives™ on Stack Overflow

Angular8 ngFor array inside array

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