Can't bind to 'ngIf' since it isn't a known property of 'div'

Angular

Angular Problem Overview


> Can't bind to 'ngIf' since it isn't a known property of 'div'.

The element is <div [ngIf]="isAuth" id="sidebar">

And the component is:

import SessionService from '../session/session.service';
import { Component } from '@angular/core';

@Component({
  providers: [],
  selector: 'navbar-left',
  styles: [require('./navbar-left.scss')],
  template: require('./navbar-left.html'),
})
export default class NavbarLeftComponent {
  public isAuth: boolean = false;

  constructor(private sessionService: SessionService) {
    this.isAuth = sessionService.sessionIsAuth();
  }
}

Not sure what exactly I'm doing wrong? This is a child component. In the parent component aka App component the ngIf works fine. Angular RC5

Angular Solutions


Solution 1 - Angular

If you are using RC5 then import this:

import { CommonModule } from '@angular/common';  
import { BrowserModule } from '@angular/platform-browser';

and be sure to import CommonModule from the module that is providing your component.

 @NgModule({
    imports: [CommonModule],
    declarations: [MyComponent]
  ...
})
class MyComponentModule {}

Solution 2 - Angular

Just for anyone who still has an issue, I also had an issue where I typed ngif rather than ngIf (notice the capital 'I').

Solution 3 - Angular

Instead of [ngIf] you should use *ngIf like this:

<div *ngIf="isAuth" id="sidebar">

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionIvaylo IvanovView Question on Stackoverflow
Solution 1 - Angularnull canvasView Answer on Stackoverflow
Solution 2 - AngulardudewadView Answer on Stackoverflow
Solution 3 - AngularPeter SalomonsenView Answer on Stackoverflow