How to make the ngIf directive globally visible in all projects?

Question

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

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

How can i fix this?

Answer 1

Import BrowserModuleinto the root module and CommonModuleinto 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 {}

BrowserModuleexports CommonModule, so there is no need to import CommonModuledirectly into the root module.