通过Document：click折叠菜单（HostListener）

Question

我有一个可以通过单击打开的菜单。然后将显示另外两个按钮。当我单击文档中的某个位置时，我希望它折叠起来。我知道我必须使用HostListener，但不知道如何使用。有人可以帮忙吗？

component.html

<button *ngIf="menuIsOpen" mat-icon-button (click)="openInfoDialog()" data-action="open-info"><mat-icon aria-label="Bearbeiten">create</mat-icon></button>

<button *ngIf="menuIsOpen" mat-icon-button (click)="openUploadDialog()" data-action="open-upload"><mat-icon aria-label="Communications">attachment</mat-icon></button>

<button mat-icon-button (click)="toggleMenu()" data-action="toggle-menu"><mat-icon aria-label="Bearbeiten">more_vert</mat-icon></button>

component.ts

  toggleMenu() {
    this.menuIsOpen = !this.menuIsOpen;
  }