Preview:
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) {}
}
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