47 lines
1.0 KiB
TypeScript
47 lines
1.0 KiB
TypeScript
/* tslint:disable:no-unused-variable member-ordering */
|
|
// #docplaster
|
|
// #docregion imports,
|
|
import { Directive, ElementRef, HostListener } from '@angular/core';
|
|
// #enddocregion imports,
|
|
import { Input } from '@angular/core';
|
|
// #docregion
|
|
|
|
@Directive({
|
|
selector: '[appHighlight]'
|
|
})
|
|
export class HighlightDirective {
|
|
// #docregion ctor
|
|
constructor(private el: ElementRef) { }
|
|
// #enddocregion ctor
|
|
|
|
// #docregion mouse-methods, host
|
|
@HostListener('mouseenter') onMouseEnter() {
|
|
// #enddocregion host
|
|
this.highlight('yellow');
|
|
// #docregion host
|
|
}
|
|
|
|
@HostListener('mouseleave') onMouseLeave() {
|
|
// #enddocregion host
|
|
this.highlight(null);
|
|
// #docregion host
|
|
}
|
|
// #enddocregion host
|
|
|
|
private highlight(color: string) {
|
|
this.el.nativeElement.style.backgroundColor = color;
|
|
}
|
|
// #enddocregion mouse-methods,
|
|
|
|
// #docregion color
|
|
@Input() highlightColor: string;
|
|
// #enddocregion color
|
|
|
|
// #docregion color-2
|
|
@Input() appHighlight: string;
|
|
// #enddocregion color-2
|
|
|
|
// #docregion
|
|
}
|
|
// #enddocregion
|