23 lines
		
	
	
		
			706 B
		
	
	
	
		
			TypeScript
		
	
	
	
	
	
			
		
		
	
	
			23 lines
		
	
	
		
			706 B
		
	
	
	
		
			TypeScript
		
	
	
	
	
	
// #docregion
 | 
						|
import { Directive, ElementRef, Input, OnChanges, Renderer } from '@angular/core';
 | 
						|
 | 
						|
@Directive({ selector: '[highlight]' })
 | 
						|
/** Set backgroundColor for the attached element to highlight color
 | 
						|
 *  and set the element's customProperty to true */
 | 
						|
export class HighlightDirective implements OnChanges {
 | 
						|
 | 
						|
  defaultColor =  'rgb(211, 211, 211)'; // lightgray
 | 
						|
 | 
						|
  @Input('highlight') bgColor: string;
 | 
						|
 | 
						|
  constructor(private renderer: Renderer, private el: ElementRef) {
 | 
						|
    renderer.setElementProperty(el.nativeElement, 'customProperty', true);
 | 
						|
  }
 | 
						|
 | 
						|
  ngOnChanges() {
 | 
						|
    this.renderer.setElementStyle(
 | 
						|
      this.el.nativeElement, 'backgroundColor',
 | 
						|
      this.bgColor || this.defaultColor );
 | 
						|
  }
 | 
						|
}
 |