В Angular обычным требованием является скрытие определенного элемента (например, <div>), когда пользователь щелкает за его пределами. Такое поведение может улучшить взаимодействие с пользователем, предоставляя бесшовный интерфейс. В этой статье мы рассмотрим несколько методов достижения этой функциональности на примерах кода.

Метод 1: прослушиватели событий и клик по документу

Один простой подход — добавить в документ прослушиватель событий и проверить, произошло ли событие щелчка за пределами целевого элемента. Вот пример:

import { Component, HostListener } from '@angular/core';
@Component({
  selector: 'app-your-component',
  template: `
    <div (click)="toggleDivVisibility()" [hidden]="isDivHidden">Content</div>
  `,
})
export class YourComponent {
  isDivHidden = true;
  @HostListener('document:click', ['$event'])
  onDocumentClick(event: MouseEvent): void {
    const targetElement = event.target as HTMLElement;
    if (!this.elementRef.nativeElement.contains(targetElement)) {
      this.isDivHidden = true;
    }
  }
  toggleDivVisibility(): void {
    this.isDivHidden = !this.isDivHidden;
  }
}

Метод 2: директивный подход

Другой метод — создать специальную директиву, которая обрабатывает события щелчка и переключает видимость целевого элемента. Вот пример:

import { Directive, ElementRef, HostListener, Input } from '@angular/core';
@Directive({
  selector: '[hideOnClickOutside]'
})
export class HideOnClickOutsideDirective {
  @Input('hideOnClickOutside') targetElement: HTMLElement;
  constructor(private elementRef: ElementRef) {}
  @HostListener('document:click', ['$event'])
  onDocumentClick(event: MouseEvent): void {
    const target = event.target as HTMLElement;
    if (!this.elementRef.nativeElement.contains(target) && !this.targetElement.contains(target)) {
      this.targetElement.hidden = true;
    }
  }
}

Использование:

<div hideOnClickOutside [targetElement]="divElement">Content</div>

Метод 3: наложение библиотек

Использование библиотек наложения, таких как Angular CDK, или сторонних библиотек, может упростить реализацию. Эти библиотеки предоставляют встроенные функции для обработки событий щелчка вне элемента и могут быть настроены для достижения желаемого поведения.

Вот пример использования модуля Overlay Angular CDK:

import { Component, TemplateRef, ViewChild } from '@angular/core';
import { Overlay, OverlayRef } from '@angular/cdk/overlay';
import { TemplatePortal } from '@angular/cdk/portal';
@Component({
  selector: 'app-your-component',
  template: `
    <ng-template #overlayTemplate>
      <div>Content</div>
    </ng-template>
    <div (click)="toggleOverlay()">Toggle Overlay</div>
  `,
})
export class YourComponent {
  @ViewChild('overlayTemplate') overlayTemplate: TemplateRef<any>;
  overlayRef: OverlayRef;
  isOverlayOpen = false;
  constructor(private overlay: Overlay) {}
  toggleOverlay(): void {
    if (this.isOverlayOpen) {
      this.overlayRef.detach();
    } else {
      this.overlayRef = this.overlay.create();
      this.overlayRef.attach(new TemplatePortal(this.overlayTemplate, undefined, {}));
    }
    this.isOverlayOpen = !this.isOverlayOpen;
  }
}

В этой статье мы рассмотрели три различных метода, позволяющих скрыть элемент <div>при нажатии снаружи в приложении Angular. Каждый метод обеспечивает решение этого общего требования, позволяя вам выбрать подход, который лучше всего соответствует потребностям вашего проекта. Реализуя любой из этих методов, вы можете значительно улучшить взаимодействие с пользователем и создать интерактивные и интуитивно понятные интерфейсы в своих приложениях Angular.

Не забудьте адаптировать примеры кода к вашему конкретному варианту использования и требованиям.