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

The error message “property ngif is not provided by any applicable directive on an embedded template” occurs when you are trying to use the ngIf directive in your Angular template, but the directive is not imported or declared in the module or component where the template is being used.

To resolve this issue, you need to make sure that you have imported the CommonModule (or BrowserModule for the root module) in the module where your component is declared. The CommonModule provides the commonly used Angular directives like ngIf.

Here’s an example to illustrate how to fix this error:

    
      // app.module.ts
      
      import { NgModule } from '@angular/core';
      import { CommonModule } from '@angular/common';
      
      import { AppComponent } from './app.component';
      
      @NgModule({
        declarations: [AppComponent],
        imports: [CommonModule], // Import CommonModule here
        bootstrap: [AppComponent]
      })
      export class AppModule {}
    
  

    
      // app.component.ts
      
      import { Component } from '@angular/core';
      
      @Component({
        selector: 'app-root',
        template: `
          
Hello, World!
        `
      })
      export class AppComponent {
        showMessage = true;
      }
    
  

In the above example, we import the CommonModule in the AppModule and use it in the imports array. Then, in the AppComponent template, we use the ngIf directive to conditionally render the “Hello, World!” message based on the value of the showMessage property.