Angular 2 Can't bind to 'ngif' since it isn't a known property

Question

I am experimenting with Angular 2. I have a working test app with two components. It all works, but it crashes when I try to use *ngif

There are already a lot of questions about this problem but most of the answers point to importing "BrowserModule" to fix the problem. In my case, I already do that. What else could be causing this problem?

my html

<table class='table' *ngif="products && products.length">

app.module.ts

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

import { AppComponent }  from './app.component';
import { CrazyComponent }  from './products/crazy.component';

@NgModule({
      imports: [ BrowserModule ],
      declarations: [ AppComponent, CrazyComponent ],
      bootstrap: [ AppComponent ]
})
export class AppModule { }

The full error:

Can't bind to 'ngif' since it isn't a known property of 'table'. Property binding ngif not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "directives" section

Answer 1

You have a typo. Use ngIf instead of ngif

Correct way to use it:

 <table class='table' *ngIf="products && products.length">

UPDATE :

Many people (including me) got this issue, because IntelliJ IDEA/WebStorm autocompletion gives invalid ngif . Additionally, IDEA highlights *ngIf as invalid.

Recently I upgraded my IDEA to 2017.2.5 together with JS/Angular plugins and this problem is gone. Also, I got better NG2+ autocompletion and better TypeScript support. This is why I highly recommend upgrading JetBrains software.

Answer 2

you have an error because of "*ngif" correct one is "*ngIf". The capital 'I' here and the capital 'F' in *ngFor..I used to mistype a lot of times. Just be a little patient. :)