Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to close primeng p-overlaypanel on click event from within the overlay [Angular]

I'm learning Angular. I've created a widget. I'm using primeng component i.e. p-overlaypanel. The panel opens up when I click on an input field. I have two buttons Apply and Cancel inside the overlaypanel itself. I want this overlay to get closed when I click on cancel button. Here is the stackblitz. And here is my code.

timeselector.component.html

<div class="timeselector">
    <p-overlayPanel class="timeselector-overlay" #op>
        <div class="timeselector-panel">
            <p>Time selector</p>
            <br />
            <div>
                <button (click)="closeTimeselector($event, op)">
                  Cancel
                </button>
                <button>
                  Apply
                </button>
            </div>
        </div>
    </p-overlayPanel>
</div>

<div (click)="op.toggle($event)">
    <input type="text">
</div>

And timeselector.component.ts

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");
    }
}

One of the possible solution is to use:

<button (click)="op.hide()">
  Cancel
</button>

But I cannot do so beacuse I've to do some cleanup task and flush some values when that widget is closed.

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.

like image 983
Tanzeel Avatar asked Jan 09 '20 08:01

Tanzeel


People also ask

What is overlaypanel in primeng?

OverlayPanel is a container component positioned as connected to its target. import { OverlayPanelModule } from 'primeng/overlaypanel'; Content is defined with an ng-template and overlay is displayed using the show or toggle method of a local ng-template variable. show method takes two parameters, first one is the event and it is mandatory.

How to use basic overlay panel?

Click on Basic overlay, the overlayPanel appears right under the button. Scroll the div, the overlayPanel doesn't stick to the button. Angular version: 5.1.1

How to add appendto to the body of the overlay panel?

add appendTo="body" to the overlayPanel. Click on Basic overlay, the overlayPanel appears right under the button. Scroll the div, the overlayPanel doesn't stick to the button. Angular version: 5.1.1

How do I hide the overlay panel of a button?

Similarly calling hide () hides the overlay panel and the toggle method toggles the visibility of the panel. In example below, clicking the button displays the overlayPanel aligned to the actualTarget div, not the button itself. Clicking outside the overlay hides the panel, setting dismissable to false disables this behavior.


1 Answers

Your problem is the condition "if" in the "closeTimeselector" function. The variable "timeselectorOpen" never changes, but is checked in the condition and is always "false".

I think, you don't control timeselectorOpen

import { ... } from '@angular/core';

@Component({
   ...
})
export class TimeselectorComponent implements OnInit {

timeselectorOpen = false;

  constructor() {}

  ngOnInit(): void {}

  closeTimeselector(event, element) {
    element.hide(event);
    console.log("closer called");
 } }

Please try this code.

like image 196
Yarkın ÜÇERLER Avatar answered Sep 20 '22 13:09

Yarkın ÜÇERLER