Issue with Angular directive -

in module, have declared directive <div> not getting highlighted.

test.directive.ts

import { directive, elementref, hostlistener, input  } "@angular/core";  @directive({     selector: '[test]' }) export class testdirective {     @input() highlightcolor:string;     constructor(private el : elementref){         this.el.nativeelement.style.backgroundcolor = this.highlightcolor;     } } 

test.template.html

<div test highlightcolor="red">directive testing</div> 

@input() highlightcolor:string; not availabe before change detection in constructor. use ngonchanges lifecycle hook.

export class testdirective {     @input() highlightcolor:string;     constructor(private el : elementref){ }      ngonchanges() {          this.el.nativeelement.style.backgroundcolor = this.highlightcolor;     } } 

or if know input string can in constructor using @attribute without @input this:

export class testdirective {     constructor(private el : elementref, @attribute('highlightcolor') color){         this.el.nativeelement.style.backgroundcolor = color;     } }