Div is not opening below particular ngFor in Angular 6 - accordion

Question

I am iterating ngFor in angular 6. When i am clicking on button a div should open beside row of that particular button but it is opening below ngFor like this
I want to make it open for that partcular row and below that.
<app-filter></app-filter>
<div class="bg-white" *ngFor="let data of dashboardData">
<div class="container-fluid">
<div class="center-align row">
<div class="col-sm-12">
<div class="block col-sm-2">
{{data.firstname}}{{data.lastname}}
</div>
<div class="block_l col-sm-3">
<span class="light_small">68%</span>
{{data.stage}}
</div>
<div class="block_l col-sm-1">
Customer
</div>
<div class="block_l col-sm-1">
<img src="assets/images/call.png">
</div>
<div class="block_l col-sm-1">
<img src="assets/images/mail.png">
</div>
<div class="block_l col-sm-2">
<span class="status_color"><b>.</b></span>
Paused
</div>
<div class="block_l col-sm-2">
<a class="btn button_css" (click)="openLayout=!openLayout">verify Details</a>
</div>
</div>
</div>
</div>
<div class="bg-loader"></div>
<div class="container" [hidden]="openLayout">
<div class="row">
<app-form-layout></app-form-layout>
<app-form-desc></app-form-desc>
</div>
</div>
</div>
Now it is coming like this
Desired behavior will be like this It's like accordian on click it should open below that row and rest of below rows will be shifted downwards

Answer 1

The problem resides into openLayout variable that is shared for all your rows.
You need one openLayout for each row. you can add it dinamically to your data like this:
<div class="bg-white" *ngFor="let data of dashboardData">
<div class="container-fluid">
<div class="center-align row">
<div class="col-sm-12">
<div class="block col-sm-2">
{{data.firstname}}{{data.lastname}}
</div>
<div class="block_l col-sm-3">
<span class="light_small">68%</span>
{{data.stage}}
</div>
<div class="block_l col-sm-1">
Customer
</div>
<div class="block_l col-sm-1">
<img src="assets/images/call.png">
</div>
<div class="block_l col-sm-1">
<img src="assets/images/mail.png">
</div>
<div class="block_l col-sm-2">
<span class="status_color"><b>.</b></span>
Paused
</div>
<div class="block_l col-sm-2">
<a class="btn button_css" (click)="data.openLayout=!data.openLayout">verify Details</a>
</div>
</div>
</div>
</div>
<div class="bg-loader"></div>
<div class="container" [hidden]="data.openLayout">
<div class="row">
<app-form-layout></app-form-layout>
<app-form-desc></app-form-desc>
</div>
</div>
</div>
At the beginning it will be false because undefined is like false.