Angular 2 rc 5 was written using typescript 1.9
I am trying to access the instance of my attribute directive. Although I am using ViewChild, which typically works with components, it is giving me a handle to the element containing the directive.
template
<span myHighlight #directive> Highlight me! </span>
component
/** Trying to get a handle to the directive but receiving the span element instead */
@ViewChild('directive') directive:HighlightDirective;
ngAfterViewInit(){
console.log(this.directive);
}
directive
@Directive({ selector: '[myHighlight]' })
export class HighlightDirective {
constructor(el: ElementRef, renderer: Renderer) {
renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'yellow');
}
}
Check out the live example here
The <span> element is being displayed in the console, indicating that ViewChild is not returning what I expected. How can I obtain a reference to the actual directive instance?