Como trabalhar com sidebar do angular?

Front-end
#1

Meu pequeno exemplo de aplicação está funcionando perfeitamente como você podem observar na imagem abaixo.

sidebar
sidebar.gif872×508 807 KB

O que estou querendo fazer é que invés de clicar no botão Close sidebar para esconder SideBar contents ele esconda o SideBar contents quando clicar em qualquer lugar fora co SideBar contents para esconde-lo. Tenho pouca experiência e não sei como pegar o evento do botão para fazer isso. Esse abaixo é minha classe de componente.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'slidebarUi';


  _opened: boolean = false;

  _toggleOpened(): void {
    this._opened = !this._opened;
  }

}

Esse abaixo é minha pagina HTML;

<ng-sidebar
[(opened)]="_opened">
<p>Sidebar contents</p>

<button class="demo-control" (click)="_toggleOpened()">Close sidebar</button>
<p><a closeSidebar>This will close the sidebar too</a></p>

<hr>

<p>Throwup on your pillow.</p>
<p>Steal the warm chair right after you get up.</p>
<p>Use lap as chair hide head under blanket.</p>
<p>Walk on car leaving trail of paw prints on hood.</p>
<p>Steal the warm chair right after you get up.</p>
</ng-sidebar>

<div ng-sidebar-content>
<header class="demo-header">
  <button (click)="_toggleOpened()" class="demo-header__toggle">Toggle sidebar</button>
  <span>ng-sidebar</span>
</header>

<section class="demo-contents">
  <h1>Options</h1>

  <h2>Sidebar</h2>

  <div>
    <button class="demo-control" (click)="_toggleOpened()">opened ({{_opened}})</button>

  </div>

Estarei no aguardo.