title: How to hide PrimeNG sidebar (defined at parent template), when we click on button defined at child template?
body: <p>I am using PrimeNG sidebar which slides right and routes to child component when we click on button, there in child component I have form template with button cancel.
  you can find sidebar template below.   </p>
  
  <p><strong>sidebar.component.html</strong></p>
  
  <pre><code>&lt;p-sidebar  [(visible)]="visibleSidebar2" position="right [baseZIndex]="10000"&gt;
  &lt;router-outlet name="createSidebar"&gt;&lt;/router-outlet&gt;
  &lt;/p-sidebar&gt;
  
  &lt;a [routerLink]="[{ outlets: { createSidebar: 'create' } }]" class=" navigation__link" (click)="visibleSidebar2 = true"&gt;&lt;/a&gt;
  </code></pre>
  
  <p><strong>child.component.html</strong></p>
  
  <pre><code> &lt;a   pButton  class="btn btn-default"  (click)="Cancel()"&gt;Cancel&lt;/a&gt;
  </code></pre>
  
  <p>Now if I click on cancel button the sidebar needs to be hidden. I tried with some stackoverflow answers <a href="https://stackoverflow.com/questions/41333807/angular-2-hide-and-show-element-using-ngif-with-boolean">Angular 2 hide and show element </a> previously posted but ended up with issue. </p>
  
  <p>Any reply can be helpful. Thanks in advance.</p>