Angular 2/4/6 show and hide divs independently - html

Question

I am fairly new to do things in Angular so I might overlook something:
I am generating a multiple div rows with *ngFor. Each of the row has a toggle button and a hidden sub-div (and the sub-divs can also have hidden sub-divs).
What I want to try and do is to show and hide the sub-divs independently when clicking on the toggle button (and also the toggle button icon should change). I managed to get it working either with opening all divs at the same time or when clicking on one row-toggle it will open the sub-div.
But when I click on another it will close the previous one that was clicked and open the currently clicked on one.
I was thinking about using an array but that would only work for the first layer of divs and not for the nested ones (since I don´t know how many, initially).
Here some illustration of opened sub- and sub-sub divs:
rows rows
>AA -AA
>BB >aa
>CC -> >BB
>DD -CC
>FF -cc
c
>DD
-FF
>ff

Answer 1

<div *ngFor="hero of heroes">
{{ hero.name }}
<button (click)="hero.show = !hero.show">show/hide</button>
<div class="sub" *ngIf="hero.show">
more info here
</div>
</div>
Add some css to emphasize the sub section

Answer 2

You need accordion
try this:
You can make use of simple CSS and make it simple.
HTML
<table class="table">
<tbody>
<tr *ngFor="let game of games; let i = index" [ngClass]="{activetab: isActive(game.label)}">
<div (click)="getSub(game.label);">
<!-- use the uniqueId here -->
<td>{{game.date}}</td>
<td>{{game.label}}</td>
<td>{{game.score}}</td>
</div>
<table>
<tbody [ngClass]="{activetab: isActive(game.label)}">
<tr *ngFor="let subgame of game.sub">
<td>{{subgame.date}}</td>
<td>{{subgame.label}}</td>
<td>{{subgame.score}}</td>
</tr>
</tbody>
</table>
</tr>
</tbody>
</table>
CSS
tr .activetab {
display: block !important;
}
TS
isActive(id) {
return this.selected === id;
}
getSub(id) {
//TODO//
this.selected = (this.selected === id ? null : id);
}
I think this should work fine.