How to remove toggle event in Angular

Question

I've searched a lot on the internet but all the answers are using jquery. I'm new to Angular and Typescript. This and this were not very helpful. I have created a monthpicker from the scratch. The mechanism is pretty simple and straightforward. When I click on input field, a popup opens with all the months. I mean this:

That pop-up is actually p-overlay from primeng. Here is my code.

monthpicker.component.html

<textbox 
  (click)="openMonthpicker.toggle($event)">
</textbox>

<p-overlayPanel class="dropdown" #openMonthpicker>
    HTML CODE FOR DISPLAYING MONTHS
</p-overlayPanel>

My monthpicker component is editable, that means you can enter dates through keyboard also. But while entering dates i want that pop-up to collapse back. I added this line of code in textbox:

<textbox 
  ...
  (keydown)="openMonthpicker.off($event)">
</textbox>

Apparently, off is not function. I tried remove also. But I dont know is there any function to close the event. Can someone please help me?

PS: I also read TypeScript Event Handlers.

Plochie · Accepted Answer · 2019-12-24T05:55:44.737

2

There is a hide method to hide the overlay, As per comments, as keydown will be called multiple times, maintain a flag to track the state of overlay.

Demo

Component

export class AppComponent {

  datePickerOpen = false;

openDatePicker(event, element) {
    element.toggle(event);
    this.datePickerOpen = true;
  }

  closeDatePicker(event, element) {
    if (this.datePickerOpen) {
      element.hide(event);
      this.datePickerOpen = false;
    }
  }
}

Template

<textarea
  (click)="openDatePicker($event, openMonthpicker)"
  (keydown)="closeDatePicker($event, openMonthpicker)">
</textarea>

<p-overlayPanel class="dropdown" #openMonthpicker>
    HTML CODE FOR DISPLAYING MONTHS
</p-overlayPanel>

You can call hide method on overlay reference, when there is keydown event.

edited Dec 24 '19 at 05:55

answered Dec 24 '19 at 05:41

Plochie

3,424
11
30

I'm sure this will work. But is it a good thing to call `hide` method on each and every keystroke. I'm afraid it will ever pass unit tests. I dont know. I'm just asking. – Tanzeel Dec 24 '19 at 05:44
In that case keep one flag variable and then check whether to call hide or not. – Plochie Dec 24 '19 at 05:46
Yes Plochie, this worked. :-) I'm accepting this answer. I hope this will pass all linting and unit tests. If not, then I'll re-open this discussion. ;-) – Tanzeel Dec 24 '19 at 06:02

score 1 · Answer 2 · answered Dec 24 '19 at 05:33

1

You could use (change) and bind it to an event to toggle the picker.

Something like this:

<textbox 
  ...
  (change)="openMonthpicker = false">
</textbox>

Hope it helps!

answered Dec 24 '19 at 05:33

ChechoCZ

164
3
10

Error: Cannot assign to a reference or variable! – Tanzeel Dec 24 '19 at 05:35
1

So, I think you could do it a bit different. So, instead of having a variable in the view to show/hide your month picker, you could have a variable in the ts file. So, on (click) you toggle the state of the variable, and on (change) you set it to false! It could be easier for you. Let me know if you want to try with this approach and want some help. Then I can edit the answer to show You how to do that! – ChechoCZ Dec 24 '19 at 05:39
Yes sure I can try this. But `(click)="openMonthpicker.toggle($event)"` is provided by `primeng` itself and thers nothing you've to do in your own typescript. Anyway, Lets try what you said. :-) – Tanzeel Dec 24 '19 at 05:42
There is already hide method in overlay, which will not required any variable. – Plochie Dec 24 '19 at 05:44
Oh, great, so I hope it helps! – ChechoCZ Dec 24 '19 at 05:45

score 0 · Answer 3 · answered Dec 24 '19 at 06:08

This should work for you.

<p-overlayPanel class="dropdown" #openMonthpicker>
    HTML CODE FOR DISPLAYING MONTHS
</p-overlayPanel>

in you code you have given #openMonthpicker as ref. so while implementing months just call openMonthpicker.hide() on click of month. as hide method is available to toggle it off and that what you are looking.

How to remove toggle event in Angular

3 Answers3