PrimeNG Datatable with row exansion call new service and display data in a row Angular 5

Question

I am trying to add extra array of the object to the PrimeNG expandable row but I am kind of new to PrimeNG so not sure where to proceed for this issue.

Desired Behaviour:

Basically I would like to call the extra service onclick of the row and want to fetch new array of objects and display extra details in the expandable row.

for example:

click of first row should trigger service to fetch the first car owner name and surname and display the data in expandable row.

I have tried following stackblitz

Answer 1

Your data structure between your car and your owner should be linked in a single object for optimzation.

You can retrieve the owner information by filtering through the vin property :

this.carownerData.filter(c => c.vin == car.vin)[0]

Anyway, because in your template, you defined let-carownerData, you should call showCar(carownerData) instead of showCar(car).

See working Stackblitz