title: Angular 6 Blur Event for multiple DOMS
body: <p>I have a button which should show a separate div.
  The div should disappear if I click on anything else than my div.
  I tried to do that with blur but if I click on anything else than my button (also if I click on my div) the div disappears.</p>
  
  <pre><code>&lt;button mat-button (click)="open=true;" (blur)="open=false;"&gt;&lt;/button&gt;
  &lt;div *ngIf="open"&gt;content&lt;/div&gt;
  </code></pre>
  
  <p>What I want is the following:</p>
  
  <p>1)click on button -> div appears</p>
  
  <p>2)click on elements inside the div (for example an input) and interact with it</p>
  
  <p>3)click on anything else -> div disappears</p>
  
  <p>On other pages some people mentioned to use tabindex="0" but I didn´t get how to use that.
  Is it possible to connect the div to the button for blur event?</p>