Check field exist and based on that show data in angular-CodePudding

I have multiple if else in my code like below

<td>
            <div *ngIf="data?.IsUser; else recentView"> 
            <span span *ngIf="data.user=='primary'; else userType">{{data.Name}}</span>
            <ng-template #userType>
              {{data.Name}}
            </ng-template>
          </div>
          <ng-template #recentView>{{ data.Name }} </ng-template> 
          </td>

but getting

Can't bind to 'ngIf' since it isn't a known property of 'div'.

If data?.IsUser key not exist then show <ng-template> block

any solution Thanks

CodePudding user response：

If you use ng-template, you should use ng-container. I think that it will help you to solve the above problem.

<td>
  <ng-container *ngIf="data?.IsUser; then listView; else recentView"></ng-container>
  
  <ng-template #listView>
    <ng-container *ngIf="data.user=='primary'; then primary; else userType"></ng-container>
  
    <ng-template #primary>
      <!-- Your code -->
    </ng-template>
  
    <ng-template #userType>
      <!-- Your code -->
    </ng-template>
  
  </ng-template>
  
  <ng-template #recentView>
    <!-- Your code -->
  </ng-template>
</td>

CodePudding user response：

Can't bind to 'ngIf' since it isn't a known property of 'div'.

This means your module does not have a import statement for CommonModule

You should add

import {CommonModule} from @angular/core