{

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


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

In This tutorial, Learn how to fix in 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>

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 capital ‘I’ for div.

It should change from

  • from *ngif
  • to *ngIf

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 do 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();
  });
});
THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.