title: Div is not opening below particular ngFor in Angular 6
body: <p>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 <a href="https://i.stack.imgur.com/tsujQ.png" rel="nofollow noreferrer">like this</a>
  I want to make it open for that partcular row and below that.</p>
  
  <pre><code>&lt;app-filter&gt;&lt;/app-filter&gt;
  
  &lt;div class="bg-white" *ngFor="let data of dashboardData"&gt;
      &lt;div class="container-fluid"&gt;
          &lt;div class="center-align row"&gt;
              &lt;div class="col-sm-12"&gt;
                  &lt;div class="block col-sm-2"&gt;
                      {{data.firstname}}{{data.lastname}}
                  &lt;/div&gt;
                  &lt;div class="block_l col-sm-3"&gt;
                      &lt;span class="light_small"&gt;68%&lt;/span&gt;
                      {{data.stage}}
                  &lt;/div&gt;
                  &lt;div class="block_l col-sm-1"&gt;
                      Customer
                  &lt;/div&gt;
                  &lt;div class="block_l col-sm-1"&gt;
                      &lt;img src="assets/images/call.png"&gt;
                  &lt;/div&gt;
                  &lt;div class="block_l col-sm-1"&gt;
                      &lt;img src="assets/images/mail.png"&gt;
                  &lt;/div&gt;
                  &lt;div class="block_l col-sm-2"&gt;
                      &lt;span class="status_color"&gt;&lt;b&gt;.&lt;/b&gt;&lt;/span&gt;
                      Paused
                  &lt;/div&gt;
                  &lt;div class="block_l col-sm-2"&gt;
                      &lt;a class="btn button_css" (click)="openLayout=!openLayout"&gt;verify Details&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="bg-loader"&gt;&lt;/div&gt;
      &lt;div class="container" [hidden]="openLayout"&gt;
          &lt;div class="row"&gt;
              &lt;app-form-layout&gt;&lt;/app-form-layout&gt;
              &lt;app-form-desc&gt;&lt;/app-form-desc&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/Uc2uh.png" rel="nofollow noreferrer">Now it is coming like this</a></p>
  
  <p><a href="https://i.stack.imgur.com/R2n64.png" rel="nofollow noreferrer">Desired behavior will be like this</a> It's like accordian on click it should open below that row and rest of below rows will be shifted downwards</p>