How make ngIf directive globally visible in all project?

Question

I have a code <div class="flex-container" *ngIf="mail"> Some data </div>

And i have a error Can't bind to 'ngIf' since it isn't a known property of 'div'.

How i can fix it?

Answer 1

Import BrowserModule in the root module and CommonModule in other modules where you want to use common directives.

@NgModule({
  imports: [BrowserModule],
  ...
})
class AppModule {}

and

@NgModule({
  imports: [CommonModule],
  // Now MyComponent has access to ngIf
  declarations: [MyComponent]
  ...
})
class OtherModule {}

BrowserModule exports CommonModule, this way it's not necessary to import CommonModule directly in the root module.