Angular

2 flashcards · Programming Languages · by Fighter Life

1. @Directive({ selector: '[appHighlight]' }) export class HighlightDirective { constructor(private el: ElementRef) { } @Input() defaultColor = ''; @Input() appHighlight = ''; @HostListener('mouseenter') onMouseEnter() { this.highlight(this.appHighlight || this.defaultColor || 'red'); } @HostListener('mouseleave') onMouseLeave() { this.highlight(''); } private highlight(color: string) { this.el.nativeElement.style.backgroundColor = color; }

   Attribute directive

2. @Directive({ selector: '[appHighlight]' })

   appHighlight