How To Remove Unwanted Div Tags In HTML

Problem Statement :

Html code having unnecessary div tags due to html for loop ,so there is some  invisible empty div's

Solution : By using HTML Template Before Code :

<ul class="items">
    <div *ngFor="let config of configs">      
      <div *ngFor="let group of groups.groups  | objectToArray">
     <div *ngIf="config.Group==group">     
      <li (click)="onSelect(group,config.Client)">
        <span class="badge">{{ group}}</span>
      </li>         
     </div>
      </div>
    </div>

</ul>


After Code : 


 <div class="grid grid-pad">   
  <template ngFor let-config[ngForOf]="configs">
   <template  ngFor let-group [ngForOf]= "groups.groups  | objectToArray">   
    <template [ngIf]="config.Group==group">
      <a [routerLink]="['/search',config.Client,group]"  class="col-1-4"> 
     <div class="module group">      
       <h4>{{group}}</h4>
     </div>       
      </a>
     </template>    
    </template>
  </template>

   </div> 

Notes : here the template tag won't be added into html code