Angular 13 – NG0303: Can't bind to 'ngif' since it isn't a known property of 'h3'

Good morning everyone,

Error:

core.mjs:10178 NG0303: Can’t bind to ‘ngif’ since it isn’t a known
property of ‘h3’.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

Maybe it’s already blocked, but I can’t solve this incident.

I already imported the commonModule and I have declared my component in the module and in app.module I have BrowserModule but it still doesn’t work.

Can anybody help me ?

RecepcionVisitasDetalleComponent

<div class="container">
  <h3 mat-dialog-title *ngif="data.id_cit == null">Agregar Visita</h3>
  <h3 mat-dialog-title *ngif="data.id_cit != null">Editar Visita</h3>

  <form class="mat-dialog-content" (ngSubmit)="submit" #formControl="ngForm">

    <div class="form">
      <mat-form-field color="accent">
        <input matInput #input class="form-control" placeholder="Id" [(ngModel)]="data.id_cit" name="id" required >
        <mat-error *ngIf="formControl.invalid">{{getErrorMessage()}}</mat-error>
      </mat-form-field>
    </div>

    <!--Textarea for demo purposes-->
    <div class="form">
      <mat-form-field color="accent">
        <textarea matInput #input class="form-control" placeholder="Title" [(ngModel)]="data.cit_residen" name="title" required ></textarea>
        <mat-error *ngIf="formControl.invalid">{{getErrorMessage()}}</mat-error>
      </mat-form-field>
    </div>

    <!--Contains mat-hint for characters count and has maxLengt set-->
    <div class="form">
      <mat-form-field color="accent">
        <input matInput #inputstate class="form-control" placeholder="State" [(ngModel)]="data.vis_nombre" name="state" maxlength="10" required >
        <mat-error *ngIf="formControl.invalid">{{getErrorMessage()}}</mat-error>
        <mat-hint align="end">{{inputstate.value?.length || 0}}/10</mat-hint>
      </mat-form-field>
    </div>


    <div mat-dialog-actions>
      <button mat-button [disabled]="!formControl.valid" [mat-dialog-close]="1" (click)="guardaVisita()">Save</button>
      <button mat-button (click)="onNoClick()" tabindex="-1">Cancel</button>
    </div>
  </form>
</div>

Receptions Module

@NgModule({
  declarations: [
    RecepcionVisitasComponent,
    RecepcionVisitasDetalleComponent
  ],
  imports: [
    CommonModule,
    RecepcionesRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    MatExpansionModule,
    AngularMaterialModule,
  ],
  exports: []
})
export class RecepcionesModule { }

FeaturesModule

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    AngularMaterialModule
  ]
})
export class FeaturesModule { }

app.module

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    SidebarMenuComponent,
    LayoutComponent
  ],
  imports: [
    CommonModule,
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    FeaturesModule,
    AngularMaterialModule,
    CoreModule,
    HttpClientModule,
    ReactiveFormsModule,
    SharedModule,
    RouterModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Project Structure

>Solution :

<h3 mat-dialog-title *ngif="data.id_cit == null">Agregar Visita</h3>
<h3 mat-dialog-title *ngif="data.id_cit != null">Editar Visita</h3>

It should be *ngIf not *ngif