import { Directive, ElementRef, HostBinding, HostListener } from "@angular/core";
@Directive({
selector: '[appDropdown]'
})
export class DropdownDirective {
@HostBinding('class.open') isActive = false;
@HostListener('document:click', ['$event']) onClick(event: Event) {
this.isActive = this.elRef.nativeElement.contains(event.target) ? !this.isActive : false;
}
constructor(private elRef: ElementRef) {}
}
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter