title: Nested *ngFor with Bootstrap collapse
body: <p>For hours i tried to figure how to make it work.<br>
  Searched everywhere and couldn't find the write example.<br>
  The second block where I use j for index won't expand ???</p>
  
  <p>Here is my code..</p>
  
  <pre><code>&lt;div class="col-xs-2"&gt;
      &lt;div class="list-group list-group-root well"&gt;
           &lt;span *ngFor="let region of locations; let i = index"&gt;
              &lt;a  class="list-group-item"
                  data-toggle="collapse" 
                  [attr.data-target]="'#' + i" 
                  (click)="centerOn(region.name, region)"&gt;
                  &lt;i class="glyphicon glyphicon-chevron-right"&gt;&lt;/i&gt;{{ region.name }}
              &lt;/a&gt;
              &lt;div class="list-group collapse" [attr.id]="i"&gt;
                  &lt;span  *ngFor="let city of region.cities; let j = index"&gt;
                      &lt;a  class="list-group-item" 
                          data-toggle="collapse"
                          [attr.data-target]="'#' + j"
                          (click)="centerOn(city.name, city)"&gt;
                          &lt;i class="glyphicon glyphicon-chevron-right"&gt;&lt;/i&gt;{{ city.name }}
                      &lt;/a&gt;
                      &lt;div class="list-group collapse" [attr.id]="j"&gt;
                          &lt;span  *ngFor="let cityArea of city.areas"&gt;
                              &lt;a  class="list-group-item" 
                                  data-toggle="collapse"
                                  (click)="centerOn(cityArea.name, cityArea)"&gt;
                                  {{ cityArea.name }}
                             &lt;/a&gt;
                      &lt;/span&gt;
                  &lt;/div&gt;
              &lt;/span&gt;
          &lt;/div&gt;
      &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>