How to use property binding in custom directive?

Question

Directive:

// highlight.directive.ts 
import { Directive, ElementRef, Input } from '@angular/core';

@Directive({
  selector: '[appHighlight]',
})
export class HighlightDirective {
  @Input() yourColor: any = 'red';
  constructor(private el: ElementRef) {
    el.nativeElement.style.backgroundColor = this.yourColor;
  }
}

Consumer:

// app.component.html
<div appHighlight [yourColor]="'blue'">Testing</div>

Result:

Question

Why can't I pass blue to yourColor?

Answer 1

You should move your code from constructor to ngOnInit. Use constructor in Angular only for injecting dependencies, but ngOnInit for executing a code when component is mounted.

Here is more info about that: Difference between Constructor and ngOnInit

Answer 2

Here is a solution using two-way binding:

 // highlight.directive.ts
 export class HighlightDirective {
        yourColor: any = 'red';

        ngOnInit() {
       // change color in method
         this.yourColor = ‘blue’;
         }
       
       }

  // app.component.html
  <div appHighlight style=“background-color=    {{yourColor}}”>Testing</div>