Property ngif is not provided by any applicable directive on an embedded template webstorm

by

The error message “property ngIf is not provided by any applicable directive on an embedded template” in WebStorm typically occurs when you use the ngIf directive but haven’t imported the necessary module.

The ngIf directive is a part of Angular’s Common module, and it’s used to conditionally render elements in the template based on the expression provided.

To resolve this error, you need to make sure that you have imported the CommonModule in your module file. You can do this by following these steps:

  1. Open the module file (e.g., app.module.ts) where you are encountering the error.
  2. Import the CommonModule by adding the following import statement at the top of the file: import { CommonModule } from '@angular/common';
  3. Add the CommonModule to the ‘imports’ array in the @NgModule decorator:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
    // other modules
  ],
  declarations: [
    // components and directives
  ],
  providers: [
    // services
  ]
})
export class AppModule { }

By importing the CommonModule, you will have access to the ngIf directive and other common directives provided by Angular.

Here’s an example of how you can use ngIf in your template:

<div *ngIf="condition">
  <p>The condition is true. This text will be rendered.</p>
</div>

In this example, the div will only be rendered if the condition is true. If the condition is false, the div and its content will be removed from the DOM.

Leave a comment