ng-repeat start and endwith in Angular 4

Question

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.

<table width="100%" class="table-condensed responsive-table">
<tr class="panel-heading bgOrg">
    <th class="text-right th-font">&nbsp;</th>
    <th class="text-right th-font">VMs</th>
    ..
</tr>
<tr ng-if="!departments.length" >
    <td colspan="15" class="text-center">No records Found</td>
</tr>
<tr ng-repeat-start="department in departments">
    <td class="table-white-space">
        <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 && !department.show">
        </div>
        <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 && department.show">
        </div>
        <span class="row-label"> <b ng-bind="department.name"></b> </span>
    </td>
    ..
</tr>
<tr ng-repeat-start="item in department.environment" ng-if="department.show">
    ..
</tr>
<tr ng-repeat-start="cItem in item.vm" ng-if="department.show && item.show">
    ..
</tr>
<tr ng-repeat="iItem in cItem.storage" ng-if="department.show && item.show && cItem.show">
    ..
</tr>
<tr ng-repeat-end=""></tr>
<tr ng-repeat-end=""></tr>
<tr ng-repeat-end=""></tr>

How to aheive the same in angular2?

Answer 1

You don't have any ng-repeat-start or end in Angular 4. Instead of that you can use "ng-container".

<ng-container *ngFor="let depertment of departments">
      <!-- Ng-repaet started here -->
      <tr *ngFor="let env of department.environments">
            <td></td>
      </tr>
      <!-- Ng-repeat end -->
      <tr> --Do something-- </tr>
</ng-container>

<ng-container> to the rescue.
The Angular is a grouping element that doesn't interfere with styles or layout because Angular doesn't put it in the DOM.
For additionally, if you need to pass any value use ngTemplateContext