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

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

In This tutorial, Learn how to fix Angular inbuilt directive

  • Can’t bind to ‘ngIf’ since it isn’t a known property of ‘div’
  • Exception: Can’t bind to ‘ngFor’ since it isn’t a known native property

Let’s create an Angular component for testing this.

A:\work\angular-convert-examples>ng generate component ngif-test
CREATE src/app/ngif-test/ngif-test.component.html (24 bytes)
CREATE src/app/ngif-test/ngif-test.component.spec.ts (641 bytes)
CREATE src/app/ngif-test/ngif-test.component.ts (287 bytes)
CREATE src/app/ngif-test/ngif-test.component.scss (0 bytes)
UPDATE src/app/app.module.ts (677 bytes)

ngif-test.component.ts:

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "app-text",
  templateUrl: "./ngif-test.component.html",
  styleUrls: ["./ngif-test.component.scss"],
})
export class TextComponent implements OnInit {
  constructor() {}
  isActive = true;

  ngOnInit(): void {}
}

ngif-test.component.html:

<p>text works!</p>

<div *ngif="isActive">Active=true</div>

It gives an following error

{{% alert theme="warning" %}}
NG0303: Can't bind to 'ngif' since it isn't a known property of 'div'.
{{% /alert %}}

The reason might be due to incorrect syntax or missing the dependent module.

Solution for Angular Can’t bind to ‘ngIf’ since it isn’t a known property of ‘div’

There are multiple ways to fix this.

Incorrect ngIf syntax One way, This is due to an error caused due to misspelling the capital ‘I’ for div.

It should change from

  • from *ngif
  • to *ngIf

The correct way is to use

<div *ngif="isActive">Active=true</div>

Missing Module:

To solve this, Import CommonModule or BroswerModule or both into app.module.ts.

CommonModule: It provides an Inbuilt template such as ngIf ngFor directives in the angular app. BrowserModule: It contains directives and services to start and run code on the browser, and also it imports CommonModule

import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/common';

@NgModule({
    imports: [
      CommonModule,
      BrowserModule
    ],
    declarations: [],
    providers: [],
    exports: [],
})
export class app.module.ts { }

Lazy loaded parent-child modules:

This is also caused due to missing modules in lazy loaded modules of parent and child modules. To fix it, Import BrowserModule in the parent module and CommonModule in ChildModule. Root module always imports browserModule, and feature or child modules import commonmodule.

After importing the modules, The module files are seen below.

parent.module.ts:

import { BrowserModule } from "@angular/common";

@NgModule({
  imports: [BrowserModule],
  declarations: [],
  providers: [],
  exports: [],
})
export class ParentModule {}

child.module.ts

import { CommonModule } from "@angular/common";

@NgModule({
  imports: [CommonModule],
  declarations: [],
  providers: [],
  exports: [],
})
export class ChildModule {}

Let’s also see how we fix this error in Angular unit testing

Angular testing -jasmine karma test cases fix

Sometimes, When you are writing a unit testing an angular component. You will encounter this error.

Please make sure that BrowserModule is imported into the module spec file.

And also if you are using parent-child modules, the parent module should import BrowserModule and the child module should import commonmodule.

import { TestBed } from "@angular/core/testing";
import { RouterTestingModule } from "@angular/router/testing";
import { AppComponent } from "./app.component";
import { BrowserModule } from "@angular/platform-browser";

describe("AppComponent", () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [RouterTestingModule, BrowserModule],
      declarations: [AppComponent],
    }).compileComponents();
  });
});