context-help.component.ts

import { Component, OnInit, Input, ElementRef, HostListener, ViewChild } from '@angular/core';

@Component({
  selector: '[context-help]',
  templateUrl: './context-help.component.html',
  styleUrls: ['./context-help.component.css'],
})
export class ContextHelpComponent {
  @Input('context-help') content: string;

  @ViewChild('container') containerRef: ElementRef;

  showHelp = false;

  @HostListener('document:click', ['$event'])
  documentClicked({ target }: MouseEvent) {
    if (!this.containerRef.nativeElement.contains(target)) {
      this.showHelp = false;
    }
  }

  @HostListener('window:keydown.Escape')
  escapedClicked(): void {
    this.showHelp = false;
  }
}