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

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

or

can't bind to 'ngif' since it isn't a known property of 'ng-container' angular 11

Solutions:

Make sure to import CommonModule from the module that is providing your component. for me I had to import CommonMudel in the TestComponent

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

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

@NgModule({

imports: [CommonModule],

declarations: [TestComponent]

})

class MyComponentModule {}

BrowserModule vs CommonModule

BrowserModule provides services that are essential to launch and run a browser app.

BrowserModule also re-exports CommonModule from @angular/common, which means that components in the AppModule module also have access to the Angular directives every app needs, such as NgIf and NgFor.

CommonModule (all the basics of Angular templating: bindings, *ngIf, *ngFor…), except in the first app module, because it’s already part of the BrowserModule