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> <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.
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">
try using [(ngModel)] rather than *NgModel and *ngIf instead of *NgIf
<span>{{nickname}}</span> <button type="button" (click)="signOut()">|→ Sign out</button>
export class AuthBoxComponent {
nickname="guest";
...
}