import { Directive, ElementRef, HostBinding, HostListener } from "@angular/core";
    selector: '[appDropdown]'
export class DropdownDirective {
@HostBinding('') isActive = false;
@HostListener('document:click', ['$event']) onClick(event: Event) {
        this.isActive = this.elRef.nativeElement.contains( ? !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