Can't bind to 'ngIf' since it isn't a known property of 'div'
AngularAngular 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">