title: ng-repeat start and endwith in Angular 4
body: <p>I have nested ng-repeat to construct the collpasable grid. Need to achive the same in Angular 4. I could not find the solution in *ngFor. Example Code which I Implemented using anuglar js.</p>
  
  <pre><code>&lt;table width="100%" class="table-condensed responsive-table"&gt;
  &lt;tr class="panel-heading bgOrg"&gt;
      &lt;th class="text-right th-font"&gt;&amp;nbsp;&lt;/th&gt;
      &lt;th class="text-right th-font"&gt;VMs&lt;/th&gt;
      ..
  &lt;/tr&gt;
  &lt;tr ng-if="!departments.length" &gt;
      &lt;td colspan="15" class="text-center"&gt;No records Found&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr ng-repeat-start="department in departments"&gt;
      &lt;td class="table-white-space"&gt;
          &lt;div class="handpointer glyphicon glyphicon-chevron-right" data-ng-click="department.show = !department.show;collapse($event)" data-target="#view_{{department.departmentid}}" data-toggle="collapse" 
              aria-expanded="false" 
              data-ng-if="department.environment!=null &amp;&amp; !department.show"&gt;
          &lt;/div&gt;
          &lt;div class="handpointer glyphicon glyphicon-chevron-down" data-ng-click="department.show = !department.show;collapse($event)" data-target="#view_{{department.departmentid}}" data-toggle="collapse" 
              aria-expanded="false" 
              data-ng-if="department.environment!=null &amp;&amp; department.show"&gt;
          &lt;/div&gt;
          &lt;span class="row-label"&gt; &lt;b ng-bind="department.name"&gt;&lt;/b&gt; &lt;/span&gt;
      &lt;/td&gt;
      ..
  &lt;/tr&gt;
  &lt;tr ng-repeat-start="item in department.environment" ng-if="department.show"&gt;
      ..
  &lt;/tr&gt;
  &lt;tr ng-repeat-start="cItem in item.vm" ng-if="department.show &amp;&amp; item.show"&gt;
      ..
  &lt;/tr&gt;
  &lt;tr ng-repeat="iItem in cItem.storage" ng-if="department.show &amp;&amp; item.show &amp;&amp; cItem.show"&gt;
      ..
  &lt;/tr&gt;
  &lt;tr ng-repeat-end=""&gt;&lt;/tr&gt;
  &lt;tr ng-repeat-end=""&gt;&lt;/tr&gt;
  &lt;tr ng-repeat-end=""&gt;&lt;/tr&gt;
  </code></pre>
  
  <p></p>
  
  <p>How to aheive the same in angular2? </p>
  
  <p><a href="https://i.stack.imgur.com/RDGdr.png" rel="noreferrer"><img src="https://i.stack.imgur.com/RDGdr.png" alt="enter image description here"></a></p>