Angular 4 | creating extra div when *ngIf is triggered

Question

Good day, i am doing right here? im calling an API data but when in my if condition it seems to create extra div when validating to false.

<div *ngFor="let apidata of data">
    <div class="box" *ngIf="apidata.Zone == 8">
      <div class="box-assignmentnumber-holder">
        <span id="AssignmentNumber">{{apidata.Assignment}}</span>
      </div>
      <div class="newAssignment">
        <span>{{ apidata.Operator == null ? 'New' : apidata.Operator }}</span>
      </div>
    </div>
  </div>

what would be the best approach here to eliminate the extra div in my code?

example result below..

<div></div> <---extra div when false
<div></div> <---extra div when false
<div class="box">
     <div class="box-assignmentnumber-holder">
          <span>123123</span>
     </div>
</div>
<div></div> <---extra div when false

Answer 1

All you need to do is replace div with ng-container of *ngFor :

<ng-container *ngFor="let apidata of data">
    <div class="box" *ngIf="apidata.Zone == 8">
        <div class="box-assignmentnumber-holder">
            <span id="AssignmentNumber">{{apidata.Assignment}}</span>
        </div>
        <div class="newAssignment">
            <span>{{ apidata.Operator == null ? 'New' : apidata.Operator }}</span>
        </div>
    </div>
<ng-container>

This will not create extra divs if condition is false.

WORKING DEMO