title: How to close modal in angular 6
body: <p>I am trying to close modal from home component.my close button is in home component.If i click close button i want to close modal.If i click close button from home component how to set visible value is false from home component. How can i use service for that? or any other way is there? How do it?</p>
  
  <p>dialog.component.html</p>
  
  <pre><code>    &lt;div [@dialog] *ngIf="visible" class="dialog"&gt;
        &lt;ng-content&gt;&lt;/ng-content&gt;
        &lt;button *ngIf="closable" (click)="close()" aria-label="Close" class="dialog__close-btn"&gt;X&lt;/button&gt;
        &lt;app-home&gt;&lt;/app-home&gt;
        &lt;/div&gt;
      &lt;div *ngIf="visible" class="overlay" (click)="close()"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>home.component.ts:</p>
  
  <pre><code>    &lt;button (click)="showDialog = !showDialog" class="btn"&gt;Close&lt;/button&gt;
  </code></pre>
  
  <p>Demo: <a href="https://stackblitz.com/edit/angular-7zdnwy?file=src%2Fapp%2Fdialog%2Fdialog.component.html" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-7zdnwy?file=src%2Fapp%2Fdialog%2Fdialog.component.html</a></p>