I am developing an application with angular and I need to display some data that has the following structure:

 { "id": 33, "arg": 7, "date": "2022-01-31", "User": { "Name": "Cristian", "Group": { "NGroup": "Group 1" } }, "Sport": { "NSport": "Sport 1" } },

The idea is to display the information in this way:

id | arg | date | Name (User) | NGroup (Group) | NSport (Sport)

For this I was trying to use keyvalue , the problem with this is that when it brings the User object, it shows me an item called [object Object] that corresponds to group and there is no way to hide it or only select to show only name. This is the current code:

 <tbody> <tr *ngFor="let item of listItems"> <td><div>{{ item.id }}</div></td> <td><div>{{ item.arg}}</div></td> <td><div>{{ item.date }}</div></td> <td *ngFor="let key of item.User | keyvalue "><div>{{ key.value }}</div></td> <td *ngFor="let key of item.User | keyvalue"><div *ngFor="let key2 of key.value | keyvalue" >{{ key2.value }}</div></td> <td *ngFor="let kv of item.Sports | keyvalue"><div>{{kv.value}}</div></td> </tr> </tbody>

The output of this is:

id | arg | date | [Object,Object] | Name(User) | NGroup (Group) | NSport(sport)

Clearly the keyvalue is displaying everything. Investigating I realized that pipes can be made to show the information in a personalized way and I really don't understand much how it works, that's the reason for this question.

Thanks!!