div. При клике на кнопку div скрывается или появляется. Как сделать чтобы исчезал div если кликаем вне компонента ?
Загугли OutsideClickDIrective github
import {Directive, ElementRef, HostListener, Input} from '@angular/core'; @Directive({ selector: '[appDropdown]', exportAs: 'appDropDown' }) export class DropdownDirective { @Input() multiple: boolean; isOpen = false; @HostListener('document:click', ['$event']) toggleOpen(event: Event) { this.isOpen = !this.multiple ? (this.elRef.nativeElement.contains(event.target) ? !this.isOpen : false) : this.elRef.nativeElement.contains(event.target); } constructor(private elRef: ElementRef) { } }
в компоненте достаточно написать @HostListener('document:click', ['$event']) handleDocumentClick(e: Event) { if (this.elRef && !this.elRef.nativeElement.contains(e.target) { this.isVisible = false; } } constructor (elRef: ElementRef) {} где isVisible - какой-то флаг, который ответственнен за отображение компонента
Обсуждают сегодня