title: Angular 6 - How can I hide a div onclick of outside of that div
body: <p>I have a button and a div,When I click the button the div is used to toggle.But I need to hide the div also when I click outside of that div.Here the code below.</p>
  
  <h2>app.component.html</h2>
  
  <pre><code>&lt;button (click) ="clickit()"&gt;Click here&lt;/button&gt;
  &lt;div style="border:1px solid;height:200px;width:200px;" *ngIf="show"&gt;Toggle hide and show&lt;/div&gt;
  </code></pre>
  
  <h2>app.component.ts</h2>
  
  <pre><code>import { Component } from "@angular/core";
  
  @Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"]
  })
  export class AppComponent {
    name: string = '2019-01-01T23-00-11';
    //name: string = '2019-01-01';
    show:any;
    ngOnInit() {
  
    }
  clickit(){
  this.show = !this.show;
  }
  }
  </code></pre>