2016-09-19 19:57:59 -07:00
|
|
|
// #docregion
|
2016-12-02 19:54:27 -05:00
|
|
|
import { Directive, ElementRef, Input, OnChanges } from '@angular/core';
|
2016-09-13 14:39:39 -07:00
|
|
|
|
|
|
|
@Directive({ selector: '[highlight]' })
|
2016-09-19 19:57:59 -07:00
|
|
|
/** Set backgroundColor for the attached element to highlight color
|
|
|
|
* and set the element's customProperty to true */
|
2016-09-13 14:39:39 -07:00
|
|
|
export class HighlightDirective implements OnChanges {
|
|
|
|
|
2016-09-19 19:57:59 -07:00
|
|
|
defaultColor = 'rgb(211, 211, 211)'; // lightgray
|
2016-09-13 14:39:39 -07:00
|
|
|
|
|
|
|
@Input('highlight') bgColor: string;
|
|
|
|
|
2016-12-02 19:54:27 -05:00
|
|
|
constructor(private el: ElementRef) {
|
|
|
|
el.nativeElement.style.customProperty = true;
|
2016-09-13 14:39:39 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
ngOnChanges() {
|
2016-12-02 19:54:27 -05:00
|
|
|
this.el.nativeElement.style.backgroundColor = this.bgColor || this.defaultColor;
|
2016-09-13 14:39:39 -07:00
|
|
|
}
|
|
|
|
}
|