word-position.directive.ts
a9514ea689c0master

word-position.directive.ts
View Options

			import { Directive, ElementRef, HostBinding, HostListener, Input } from '@angular/core';

			@Directive({
			selector: '[highlightWord]'
			})
			export class WordPositionDirective {
			@Input() highlightWord: string;
			@HostBinding('style.opacity') opacity: number = 0.0;

			@HostListener('click') onMouseClick() {
			alert(this.highlightWord);
			}

			@HostListener('mouseenter') onMouseEnter() {
			this.highlight(true);
			}

			@HostListener('mouseleave') onMouseLeave() {
			this.highlight(false);
			}

			public highlight(highlight: boolean) {
			this.opacity = highlight ? 0.3 : 0.0;
			}
			}