Check field exist and based on that show data in angular

Question

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

Isn't it a duplicate of this one: https://stackoverflow.com/questions/39058075/cant-bind-to-ngif-since-it-isnt-a-known-property-of-div ? — joaopfg, Aug 23 '22 at 15:15

score 0 · Answer 1 · answered Aug 23 '22 at 15:39

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>

score 0 · Answer 2 · answered Aug 23 '22 at 15:45

0

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

answered Aug 23 '22 at 15:45

HariHaran

3,642
2
16
33

Check field exist and based on that show data in angular

2 Answers2