Angular 11 structural directives (ngif) is not working

Question

I am trying to show and hide the content depending on values in table, but it is not working. If I use ngif directive it is hiding my entire content.

component,ts file

HTML file

<tbody>
    <tr *ngFor="let user of userElement; let i = index">
      <td>{{user.isEdit}}</td>
      <td>
        <div *ngif="!user.isEdit">
        {{user.position}}
      </div>
      <div *ngif="user.isEdit">
        <input type="text" class="form-control" name="position" [(ngModel)]="user.position" />
      </div>
      </td> 
      <td>
        <div *ngif="!user.isEdit">
          {{user.name}}
        </div>
        <div *ngif="user.isEdit">
          <input type="text" class="form-control" name="name" [(ngModel)]="user.name"/>
        </div>
      </td> 
      <td>
        <div *ngif="!user.isEdit">
          {{user.Weight}}
        </div>
        <div *ngif="user.isEdit">
          <input type="text" class="form-control" name="Weight" [(ngModel)]="user.Weight"/>
        </div>
      </td> 
      <td>
        <div *ngif="!user.isEdit">
          {{user.symbol}}
        </div>
        <div *ngif="user.isEdit">
          <input type="text" class="form-control" name="symbol" [(ngModel)]="user.symbol"/>
        </div>
      </td> 
      <td>
       <div class="row" *ngif="!user.isEdit"> 
          <div class="col-md-6">
            <i class="fa-solid fa-pencil" (click)="isEdit(user)" ></i>
          </div>
          <div class="col-md-6">
            <i class="fa-sharp fa-solid fa-trash" (click)="delete(user)"></i>
          </div>
        </div> 
        <div class="row" *ngif="user.isEdit">
          <div class="col-md-6">
            <i class="fa-sharp fa-solid fa-floppy-disk" (click)="save(user)"></i>
          </div>
          <div class="col-md-6">
            <i class="fa-solid fa-xmark" (click)="close(user)"></i>
          </div>
        </div>
      </td> 
    </tr>
  </tbody>

Module.ts file

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import {CommonModule} from '@angular/common';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    CommonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

Looks like a typo. directive name should be ngIf not ngif

    <div *ngIf="user.isEdit">