8

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

rzelek
  • 3,975
  • 1
  • 33
  • 35
Kokodoko
  • 26,167
  • 33
  • 120
  • 197
  • 2
    Does this answer your question? [Can't bind to 'ngIf' since it isn't a known property of 'div'](https://stackoverflow.com/questions/39058075/cant-bind-to-ngif-since-it-isnt-a-known-property-of-div) – Vibhor Dube Jun 01 '20 at 07:36

2 Answers2

32

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.

rzelek
  • 3,975
  • 1
  • 33
  • 35
  • Patience please, it's not allowed to mark an answer immediately after posting a question. – Kokodoko Nov 06 '16 at 12:14
  • 4
    I ran into this because IntelliJ's autocomplete gives me ngif – Daniel Cheng Dec 04 '16 at 11:01
  • @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! – PeterS Mar 16 '17 at 09:39
1

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

Sidharth Sahu
  • 231
  • 2
  • 5