Is there a better way to bind values to a non-native element attribute in Angular, as the usual approach doesn't seem to work as expected? Here is an example:
import {Directive, ElementRef, Input, OnInit, HostBinding} from 'angular2/core';
@Directive({
selector: '[myFeet]'
})
export class MyFeetDirective {
@HostBinding('feet')
@Input() feetProps:string
constructor(private el: ElementRef) { }
}
When using this directive:
<div [myFeet]="body.footCount"></div>
The desired result in the DOM after Angular rendering should be:
<div feet="2"></div>
I have achieved this by manually setting attributes in ngOnInit function:
ngOnInit(){
this._setAttributes();
}
private _setAttributes(){
if (this._feetProps != null) {
this._el.nativeElement.setAttribute("feet", this._feetProps);
}
}
Is there a more Angular-friendly way to accomplish this rather than directly manipulating the DOM? Your insights are appreciated.