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

Solution 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.

Solution 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. :)

Comments

[Kokodoko]

Patience please, it's not allowed to mark an answer immediately after posting a question.

[Daniel Cheng]

I ran into this because IntelliJ's autocomplete gives me ngif

[PeterS]

@DanielCheng and it doesn't suggest the correct one either, the only error you get is that the attribute isn't allowed there, sometimes after you've left editing that particular page. Highly annoying!