Kokodoko Kokodoko - 29 days ago 10
TypeScript Question

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

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

You have a typo. Use ngIf instead of ngif

Correct way to use it:

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