src/app/shared/directives/border.directive.ts
OnInit
| Selector | [appBorder] |
| Standalone | true |
Methods |
|
Inputs |
HostListeners |
constructor(el: ElementRef)
|
||||||
|
Parameters :
|
| color | |
Type : string
|
|
Default value : 'red'
|
|
| mouseenter |
| mouseleave |
| Private border | ||||||
border(color: string)
|
||||||
|
Parameters :
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| onMouseEnter |
onMouseEnter()
|
Decorators :
@HostListener('mouseenter')
|
|
Returns :
void
|
| onMouseLeave |
onMouseLeave()
|
Decorators :
@HostListener('mouseleave')
|
|
Returns :
void
|
import { Directive, ElementRef, HostListener, Input, OnInit } from '@angular/core';
@Directive({
selector: '[appBorder]',
standalone: true,
})
export class BorderDirective implements OnInit {
@Input() color: string = 'red';
constructor(private el: ElementRef) {}
ngOnInit() {
this.border('');
}
@HostListener('mouseenter') onMouseEnter() {
this.border(this.color);
}
@HostListener('mouseleave') onMouseLeave() {
this.border('');
}
private border(color: string) {
this.el.nativeElement.style.border = `2px solid ${color || 'transparent'}`;
}
}