Angular 2: Cannot bind to x since this is not a known property

Question

In Angular 2 component I have authbox.component.ts

import {Component} from 'angular2/core'; import {COMMON_DIRECTIVES} from 'angular2/common'; import {Credentials} from './credentials' @Component({ selector: 'authbox', template: `<div> <div class="login-panel" *NgIf="!IsLogged"> <input type="text" *NgModel="credentials.name" /> <input type="password" *NgModel="credentials.password" /> <button type="button" (click)="signIn(credentials)">→| Sign In</button> </div> <div class="logged-panel" *NgIf="IsLogged"> <span>{nickname}</span>&nbsp;&nbsp; <button type="button" (click)="signOut()">|→ Sign out</button> </div> </div>`, directives: [COMMON_DIRECTIVES] }) export class AuthBoxComponent { private _isLogged: boolean; get IsLogged(): boolean { return this._isLogged } set IsLogged(value: boolean) { this._isLogged = value; } public credentials: Credentials; } 

In the browser, I got errors "I can not bind to" NgModel, since it is not a known native property "and" Cannot bind to "NgMf" because it is not a known native property. "

I am using beta 8.

Answer 1

try using [(ngModel)] instead of *NgModel and *ngIf instead of *ngIf

 <span>{{nickname}}</span>&nbsp;&nbsp; <button type="button" (click)="signOut()">|→ Sign out</button> export class AuthBoxComponent { nickname="guest"; ... } 

Answer 2

In the general case, can't bind to xxx since it isn't a known native property error occurs when you have a typo in your HTML when trying to use the attribute directive or when trying to set a property binding.

Common examples: if you skip * or # or let or use in instead of using Angular's built-in structural directives:

 <div ngIf="..." // should be *ngIf <div ngFor="..." // should be *ngFor="..." <div *ngFor="let item in items" // should be "let item of items" <div *ngFor="item of items" // should be "let item of items" 

An erroneous or incorrect case will also cause a problem:

 <div *ngFer="..." <div *NgFor="..." 

Another reason is that you specify a property that does not exist in the DOM element or component:

 <div [prop1]="..." // prop1 isn't a valid DOM property for a div <my-comp [answr]="..." // typo, should be [answer] 

---

For typos with built-in Angular directives, since the typo does not match any of the built-in directive selectors, Angular tries to bind to the property of the DOM element ( div in the examples above) with the typo name. This does not work because the div does not have its own property ngIf or ngFer or prop1 DOM.

-

For attributes (not properties) you need to use attribute binding, for example, for the height attribute svg : <svg [attr.height]="myHeightProp">