DEV Community

Jhosep
Jhosep

Posted on

Show detail data of a table with ngFor in Angular

The ngFor core directive allows us to create lists and data display tables in our HTML templates. It also has its own "let" with which we can pass information to show the detail of a table.

In the following example we have this array:

array_heroes

In a table we will show the general part of the array and then we will pass the "info" as a parameter using ngFor so that it is displayed in a second table.

We show the general data in the table, and clicking on the name will show the detail in another table.

first_table

display

detail_data

Now we use the variable that contains the table detail with another ngFor on the table that we want to display.

detail_table

Thanks for reading, you share if it served you 😉

Top comments (0)