Issue with data-* properties not working on elements. #2687
Description
I have been playing around with Angular2 (and enjoying it) a fair bit recently but have noticed what I think is perhaps a bug but not quite sure.
The problem is to do with using custom data-* properties as I am never able to get them to properly display.
For instance the following code example works when replacing [title] with either [lang], [alt] or [id] then I will still get a rendered output on my element. However whenever I put any custom element replacing [title] say with [data-list] then no string interpolation happens.
I was wondering if this is because data-* attributes aren't specified in the _HTMLElementPropertyList?
Would appreciate any guidance as I have repeatedly read over the following documentation to no avail:
https://github.com/angular/angular/blob/master/modules/angular2/docs/core/01_templates.md
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://jspm.io/system@0.16.js"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.27/angular2.dev.js"></script>
</head>
<body>
<app>...</app>
<script>
System.config({
paths: {
'*': '*.js',
'angular2/*': 'angular2/*',
}
});
System.import('main');
</script>
</body>
</html>bootstrap.js
import {Component, View, bootstrap, Attribute} from 'angular2/angular2';
@Component({
selector: 'table',
properties: {'name':'name'}
})
@View({
template:`<table [title]="_name">Hello {{_name}}</table>`
})
class Hello {
_name: string;
constructor(@Attribute('name') value:string) {
this._name = value;
};
}
@Component({
selector: 'app',
})
@View({
template:
`
<div>
<table name="testing"></table>
</div>
`,
directives: [Hello]
})
class Application {
constructor() { };
}
bootstrap(Application);