chevron_left
600 points
7 3 2

Both programmers and entrepreneurs adore the set of benefits provided by Angular technology. This framework has long been regarded as a "default" front-end tool by professional developers due to its versatility and ability to merge business logic with UI features. It's still one of the most popular software development technologies, thanks to several features that make expanding, optimizing, and speeding up web platforms easier. It's also used to create the front-end portion of cross-platform mobile apps, together with specific mobile development technologies. These apps, which are available for both iOS and Android, allow business owners to pay less and get more.

In this article, I will discuss the reason and solution to a common error “Can't bind to 'ngif' since it isn't a known property of 'div' ”that may occur while working on this amazing platform.

Photo by Leolo212

Table of Content:

                1 - What is Can't bind to 'ngif' since it isn't a known property of 'div' 
                2 - Why this exception is thrown 
                3 - The Solution 
                4 - The Conclusion

What is Can’t bind to ‘ngif’ since it isn’t a known property of ‘div’

This error occurs when you are using a structural directive and trying to bind to a property that doesn't exist on the given element (in this case, ngIf). This is because structural directives don't have properties! It may be because of a syntax error or spelling mistake.

Why this exception is thrown

It's possible that the issue is caused by incorrect syntax or the absence of a dependent module. This is also caused by missing modules in parent and child modules that are lazy-loaded. Import BrowserModule in the parent module and CommonModule in the child module to fix the problem. BrowserModule is always imported by the root module, and CommonModule is imported by feature or child modules.

The Solution

Users can have multiple ways to solve this problem. While trying to find the actual issue first check the syntax and spelling of the code. Correct spelling is as follows:

<p>text works!</p>

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

Secondly, while importing modules, import both Common and Browse as, In the angular project, CommonModule provides an inbuilt template such as ngIf and ngFor directives. BrowserModule imports CommonModule and contains directives and services for starting and running code in the browser.

import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/common';
@NgModule({
    imports: [
      CommonModule,
      BrowserModule
    ],
    declarations: [],
    providers: [],
    exports: [],
})
export class app.module.ts { }

If the user is using parent  and child modules then the code should be like this

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 { }

When developing a unit test for an angular component, this can happen. This is an error that you will experience.

Please double-check that BrowserModule is included in the module's specification file.

If you're utilizing parent-child modules, make sure the parent module imports BrowserModule and the child module imports 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 Conclusion

Angular is an amazing framework and it has a lot of features. The error might seem to be a simple one but it took me some time to figure out the solution.

If you read this far, tweet to the author to show them you care. Tweet a Thanks

More Posts

The operation can’t be completed because you don’t have permission to access some of the items sadmin - May 28
How To Calculate The Address Of An Element With The Base Address Of A Two Dimensional Array? zhteja - Aug 10
Program to calculate number of vowels in a string in Python Ferdy - Aug 6
Format a number of seconds to date using python amr12345a - Jun 6
Response for preflight does not have HTTP ok status. zhteja - Jul 26