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