How to get attributes of nested object with ngFor - html

Question

I am trying to show the value of "type" in ngFor table but I was getting object '[object Object]' of type 'object'.
NgFor only supports binding to Iterables such as Arrays.**
json
[{
"id": 123,
"name": "Paul",
"cars":
{
"type": "toyota",
"year": "2013"
}
},
{
"id": 126,
"name": "Frank"
},
{
"id": 125,
"name": "Joy",
"cars":
{
"type": "bwm",
"year": "2000"
}
},
{
"id": 133,
"name": "Bob"
}]
html
//....
<tr *ngFor="let info of information;">
<td>{{info.name}}</td>
<td *ngFor="let info2 of info.cars;"> //I want to loop through and get the type value of cars
<td>{{info2.type}}</td>
</td>
<td><button type="button" (click)="showDetail()">View</button></td>
</tr>
//...
Some object has cars, how to I get the type value in the table? Another area I would need help is, how to show the "type" value (for object that has cars attribute) on a input field when "View" button is clicked. Below is my .ts file where I need to grab the type value:
comp.ts
//....
information = [];
carsType= {}; to hold type value for objects that has it
showDetail(data: any) {
this.formData.controls.name.setValue( data.name );
// how do I get cars "type" value for each object
}

Answer 1

Try like this:
Working Demo
<table border="1">
<tr *ngFor="let info of information;">
<td>{{info.name}}</td>
<td>{{info.cars?.type}}</td>
<td><button type="button" (click)="carType = info.cars?.type">View</button></td>
</tr>
</table>
<input type="text" [(ngModel)]="carType"/>

Answer 2

Try this
<tr *ngFor="let info of information;">
<td>{{info.name}}</td>
<td>{{info?.cars?.type}}</td>
<td><button type="button" (click)="showDetail()">View</button></td>
</tr>