Angular 2: Can't bind to x since it isn't a known native property [duplicate]

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 browser I got errors «Can't bind to 'NgModel' since it isn't a known native property » and «Can't bind to 'NgIf' since it isn't a known native property».

I'm using beta 8.

Answer 1

In general, the 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 an attribute directive, or when trying to setup a property binding.

Common examples are when you miss a * or a # or let or use in instead of of with the Angular 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" 

A misspelling or wrong case will also generate the problem::

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

Another reason is if you specify a property that doesn't exist on 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 the built-in Angular directives, since the typo doesn't match any of the built-in directive selectors, Angular tries to setup a binding to a property of the DOM element (the div in the above examples) with the typo name. This fails because a div does not have a native ngIf or ngFer or prop1 DOM property.

--

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

Answer 2

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

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