src/app/shared/directives/highlight.directive.ts
| Selector | [appHighlight] |
| Standalone | true |
Methods |
|
Inputs |
HostListeners |
constructor(el: ElementRef)
|
||||||
|
Parameters :
|
| color | |
Type : string
|
|
Default value : 'yellow'
|
|
| mouseenter |
| mouseleave |
| Private highlight | ||||||
highlight(color: string)
|
||||||
|
Parameters :
Returns :
void
|
| onMouseEnter |
onMouseEnter()
|
Decorators :
@HostListener('mouseenter')
|
|
Returns :
void
|
| onMouseLeave |
onMouseLeave()
|
Decorators :
@HostListener('mouseleave')
|
|
Returns :
void
|
import { Directive, ElementRef, HostListener, Input } from '@angular/core';
@Directive({
selector: '[appHighlight]',
standalone: true,
})
export class HighlightDirective {
@Input() color = 'yellow';
constructor(private el: ElementRef) {}
@HostListener('mouseenter') onMouseEnter() {
this.highlight(this.color);
}
@HostListener('mouseleave') onMouseLeave() {
this.highlight('');
}
private highlight(color: string) {
this.el.nativeElement.style.backgroundColor = color;
}
}