Angular 5 - ngSwitch & ngSwitchCase not to be on real element of html

Question

I am trying to create different html table content based on component field type properties. My concerns is as i am manipulating html table i cannot insert any extra div inside my tbody hence using ng-template to cover this case but i am getting this exception "No provider for NgSwitch Error".

I need ngSwitch & ngSwitchCase not to be on real element of html.

this is the stackblitz url for my scenario

Please suggest what to do here.

Answer 1

ngSwitch can't be on a <ng-template> element, only on real elements like <div> or alternatively you can use <ng-container> instead of real elements

Here is the working example:

https://stackblitz.com/edit/angular-ftqywh?file=app/app.component.html

 <ng-container [ngSwitch]="type">
    <ng-container  *ngSwitchCase="'type1'">

<tr *ngFor="let myobj of obj">
  <td *ngFor="let data of myobj.arr"></td>
</tr>
    </ng-container>
 </ng-container>

Answer 2

instead of using ng-template use ng-container