Exploring the world of ES6, TypeScript, and Angular2 has been quite a journey for me. I recently delved into directives and here's what I found...
import { Directive, ElementRef, Input, Renderer } from '@angular/core';
@Directive({ selector: '[myHighlight]' })
export class HighlightDirective {
constructor(el: ElementRef, renderer: Renderer) {
renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'green');
}
}
However, my attempts with different variations didn't quite yield the expected results...
import { Directive, ElementRef, Input, Renderer } from '@angular/core';
@Directive({ selector: '[myHighlight]' })
export class HighlightDirective {
constructor() {
console.log(new ElementRef())
//renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'green');
}
}
I even tried this alternative approach...
import { Directive, ElementRef, Input, Renderer } from '@angular/core';
@Directive({ selector: '[myHighlight]' })
export class HighlightDirective {
constructor(ElementRef, Renderer) {
console.log(new ElementRef())
//renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'green');
}
}
The confusion between using el: ElementRef syntax and creating a new instance with new ElementRef still lingers in my mind. Can someone explain the difference and the underlying logic behind them? How does el: ElementRef relate to or compare with regular object instantiation in JavaScript or ES6? Appreciate any insights in advance :)