Закрыть раскрывающийся список при нажатии за пределами раскрывающегося списка с пользовательской директивой в AngularJS

Question

У меня проблема с тем, как создать чистый код для закрытия выпадающего меню при нажатии за пределами всплывающего окна.

dropdown.directive.ts

    import {Directive, HostBinding, HostListener} from '@angular/core';

    @Directive({
      selector: '[appDropdown]'
    })

    export class DropDownDirective {
      @HostBinding('class.open') isOpen = false;

      @HostListener('click') toggleOpen() {
        this.isOpen = !this.isOpen;
      }
    }

header.component.html

    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
           <a routerLink="/" class="navbar-brand">Recipe Book</a>
        </div>

      <div class="collapse navbar-collapse">

        <ul class="nav navbar-nav navbar-right">
          <li class="dropdown" appDropdown>
            <a class="dropdown-toggle" role="button">
              <i class="material-icons">notifications</i>
            </a>
            <ul class="dropdown-menu">
              <li> <a style="cursor: pointer;" (click)="onSaveData()">Save Data</a> </li>
            </ul>
          </li>
        </ul>
      </div>
     </div>

    </nav>