title: How to close primeng p-overlaypanel on click event from within the overlay [Angular]
body: <p>I'm learning Angular. I've created a widget. I'm using <code>primeng</code> component i.e. <code>p-overlaypanel</code>. The panel opens up when I click on an input field. I have two buttons <code>Apply</code> and <code>Cancel</code> inside the overlaypanel itself. I want this overlay to get closed when I click on cancel button. Here is the <a href="https://stackblitz.com/edit/angular-bugygs" rel="noreferrer">stackblitz</a>. And here is my code.</p>
  
  <p><strong>timeselector.component.html</strong></p>
  
  <pre><code>&lt;div class="timeselector"&gt;
      &lt;p-overlayPanel class="timeselector-overlay" #op&gt;
          &lt;div class="timeselector-panel"&gt;
              &lt;p&gt;Time selector&lt;/p&gt;
              &lt;br /&gt;
              &lt;div&gt;
                  &lt;button (click)="closeTimeselector($event, op)"&gt;
                    Cancel
                  &lt;/button&gt;
                  &lt;button&gt;
                    Apply
                  &lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/p-overlayPanel&gt;
  &lt;/div&gt;
  
  &lt;div (click)="op.toggle($event)"&gt;
      &lt;input type="text"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And <strong>timeselector.component.ts</strong></p>
  
  <pre><code>import { ... } from '@angular/core';
  
  @Component({
      ...
  })
  export class TimeselectorComponent implements OnInit {
  
      timeselectorOpen = false;
  
      constructor() {}
  
      ngOnInit(): void {}
  
      closeTimeselector(event, element) {
          if (this.timeselectorOpen) {
              element.hide(event);
              this.timeselectorOpen = false;
          }
          console.log("closer called");
      }
  }
  </code></pre>
  
  <p>One of the possible solution is to use:</p>
  
  <pre><code>&lt;button (click)="op.hide()"&gt;
    Cancel
  &lt;/button&gt;
  </code></pre>
  
  <p>But I cannot do so beacuse I've to do some cleanup task and flush some values when that widget is closed.</p>
  
  <p>The function is called, that I've checked on console. But the overlay is not collapsing back. You can directly go to the stackblitz. Please correct me.</p>