Binding to a component property in angular2
I was experimenting with Angular2 and came up against the same problem. However, I found the following to work with the current alpha version (2.0.0-alpha.21)
@Component({
selector: 'hello',
properties: {'name':'name'}
})
@View({
template:`<h1>Hello {{_name}}</h1>`
})
class Hello {
_name: string;
constructor() {
console.log(this);
};
set name(name){
this._name = name;
}
}
@Component({
selector: 'app',
})
@View({
template:
`
<div>
<hello name="Matt"></hello>
</div>
`,
directives: [Hello]
})
class Application {
constructor() { };
}
bootstrap(Application);
It seems that properties on the Class that is passed to bootstrap
are ignored. Unsure if this is intended or a bug.
Edit: I've just built Angular2 from source and tried the @Attribute
annotation, it works as per the docs (but only on the nested component).
constructor(@Attribute('name') name:string) {
console.log(name);
};
Prints 'Matt' to the console.
The current way is to decorate the property as @Input.
@Component({
`enter code here`selector: 'bank-account',
template: `
Bank Name: {{bankName}}
Account Id: {{id}}
`
})
class BankAccount {
@Input() bankName: string;
@Input('account-id') id: string;
// this property is not bound, and won't be automatically updated by Angular
normalizedBankName: string;
}
@Component({
selector: 'app',
template: `
<bank-account bank-name="RBC" account-id="4747"></bank-account>`,
directives: [BankAccount]
})
class App {}
bootstrap(App);
above example is from https://angular.io/docs/ts/latest/api/core/Input-var.html