Как я могу закрыть карту по клику вне ее в Angular?

Вы можете сделать это, используя Renderer2. Подробнее об этом читайте на Здесь

Внесите следующие изменения:

• импортировать следующие пакеты:

     import { Component,Renderer2, ElementRef, ViewChild } from '@angular/core';
  

• Зарегистрируйте метод click в конструкторе следующим образом:

  constructor(private _renderer: Renderer2) {
  
   this._renderer.listen('window', 'click', (e: Event) => {
     /**
      * This events get called by all clicks on the page
      */
  
     /**
      * This conditon will prevent execution when you click on button
      * If we don't check this, all clicks (even on the toggle button) gets into
      */
     if (
       e.target !== this.toggleButton.nativeElement &&
       e.target !== this.menu.nativeElement
     ) {
       this.menuOpened = false;
     }
   });}
  

• Этот метод будет прослушивать каждое событие клика на странице. Теперь вам нужно добавить селекторы в HTML :

   <button (click)="openMenuBar()"  #toggleButton> click me</button>
  
    <div class="context-menu">
      <div *ngIf="menuOpened" #menu>
        This should disappear when i click outside of the click-me button
      </div>
    </div>
  

  Вот оно. Теперь ваш компонент будет прослушивать события щелчка, и если источником не является кнопка или сама карточка, он установит значение menuOpened в false.

  .

Вот демонстрация

Я сделал нечто подобное с пользовательской директивой.

Создайте новый файл со следующим:

import { Directive, ElementRef, EventEmitter, HostListener, Output } from '@angular/core';

@Directive({selector: '[clickElsewhere]'})
export class ClickElsewhereDirective {

  @Output()
  clickElsewhere = new EventEmitter<MouseEvent>();

  constructor(private elementRef: ElementRef) {}

  @HostListener('document:click', ['$event'])
  public onDocumentClick(event: MouseEvent) {
    const targetElement = event.target as HTMLElement;

    if (targetElement && !this.elementRef.nativeElement.contains(targetElement)) {
      this.clickElsewhere.emit(event);
    }
  }
}

Затем в файле module.ts добавьте ClickElsewhereDirective к вашим объявлениям.

Затем добавьте директиву в меню:

  <nb-card class="context-menu" >
        <nb-menu
            (clickElsewhere)="closeMenuBar()" 
            *ngIf="menuOpened"  [items]="userMenu" autoCollapse="true"
        >
        </nb-menu> 
      </nb-card>

Наконец, добавьте функцию closeMenuBar(), чтобы установить для menuOpened значение false и все остальное, что вы хотите.

Эта директива работает следующим образом: прослушивает любые события кликов, которые происходят за пределами компонента, к которому она применяется, например, за пределами вашего меню, а затем генерирует событие, которое вы привязываете к функции закрытия меню.