been scratching my head like crazy over this.
Basically all I want is in my index.html something like:
<app hero="iron man"></app>
in my main index.html file, then be able to read the value of hero in my component class.
Been at this for a week, to no avail. Here's my non-functioning plunkr:
Thanks for your time and response! Unfortunately, in your scenario you're still not retrieving properties of the object, you're just putting a second object inside the first and retrieving those properties.
Good news though for anyone else trying to figure it out, it's confirmed as a bug!
https://github.com/angular/angular/issues/1858#event-305799002
I've had to change your example slightly, as at my last check (using Angular 2.0.0-alpha.21), I was having issues retrieving properties from the same component class that was passed to the bootstrap method.
However, using a slighty modified example:
@Component({
selector: 'hero',
properties: {'name':'name'}
})
@View({
template:`<h1>Hero = {{_name}}</h1>`
})
class Hero {
_name: string;
constructor() {
};
set name(name){
this._name = name;
}
}
@Component({
selector: 'app',
})
@View({
template:
`
<div>
<hero name="iron man"></hero>
</div>
`,
directives: [Hero]
})
class Application {
constructor() { };
}
bootstrap(Application);
Then in your HTML:
<app>
<hero name="iron man" />
</app>
Note that from within your constructor, _name will be undefined. To have the property available in your construstor, you can inject it:
class Hero {
_name: string;
constructor(@Attribute('name') name:string) {
this._name = name;
};
}
This is mostly taken from my answer to this question
