Angular *ngIf Property ngIf is not provided by any applicable directive on an embedded template

If you’re working with Angular and encounter the error message “Property ngIf is not provided by any applicable directive on an embedded template,” don’t worry. This error typically occurs when you’re using the *ngIf directive in your code, but haven’t imported the necessary module or directive to make it work. In this blog post, we’ll explore a couple of solutions to resolve this issue.

Solution 1: Import the CommonModule

The most common reason for this error is that you haven’t imported the CommonModule in your module file. The CommonModule is required to use common Angular directives such as *ngIf, *ngFor, etc. To fix this, make sure you have imported the CommonModule in your module file:

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

@NgModule({
  imports: [
    CommonModule
  ],
  // ...
})
export class YourModule { }

Solution 2: Import the BrowserModule

If you’re using the *ngIf directive in your root module (AppModule), you need to import the BrowserModule instead of the CommonModule. The BrowserModule provides additional features required for the root module. Here’s how you can import the BrowserModule:

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

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

Final Thoughts

By following the above solutions, you should be able to resolve the “Property ngIf is not provided by any applicable directive on an embedded template” error in Angular. Remember to import the CommonModule or BrowserModule, depending on your module’s context. These imports ensure that the necessary directives, including *ngIf, are available for use in your templates.

We hope this blog post has helped you overcome this common issue in Angular. If you have any further questions or need additional assistance, feel free to leave a comment below.

Happy coding!