Ways to eliminate toggle event in Angular

Question

Ways to eliminate toggle event in Angular

I've been doing a lot of research online, but all the solutions I find are using jquery. I'm still getting the hang of Angular and Typescript. I found this and this to be unhelpful. I built a monthpicker from scratch, which has a simple and clear process. When I click on the input field, a popup containing all the months opens up. Something like this:

https://i.sstatic.net/qgZui.png

This popup is actually using p-overlay from the primeng library. Here is my code snippet.

monthpicker.component.html

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

<p-overlayPanel class="dropdown" #openMonthpicker>
    HTML CODE TO DISPLAY THE MONTHS
</p-overlayPanel>

My monthpicker component is editable, meaning you can input dates through the keyboard. However, I want the popup to close when entering dates. I added this line of code in the textbox:

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

It seems that the off function is not working. I also tried using remove, but I'm not sure what function to use to close the popup. Can anyone assist me with this issue?

PS: I also went through TypeScript Event Handlers.

javascript angular typescript primeng

Answer 1

Answer №1

If you want to hide the overlay, use the hide method. It is recommended to maintain a flag to keep track of the overlay's state due to multiple keydown calls.

Check out the demo here

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>

Remember to call the hide method on the overlay reference when handling the keydown event.

Answer 2

If you want to hide the overlay, use the hide method. It is recommended to maintain a flag to keep track of the overlay's state due to multiple keydown calls.

Check out the demo here

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>

Remember to call the hide method on the overlay reference when handling the keydown event.

Answer 3

Answer №2

One way to toggle the picker is by utilizing the (change) function bound to an event.

Here is an example implementation:

<textbox 
  ...
  (change)="togglePicker = true">
</textbox>

I hope this solution is useful to you!

Answer 4

One way to toggle the picker is by utilizing the (change) function bound to an event.

Here is an example implementation:

<textbox 
  ...
  (change)="togglePicker = true">
</textbox>

I hope this solution is useful to you!

Answer 5

Answer №3

Here is a simple solution for you.

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

In your code, you have assigned #openMonthpicker as a reference. So, when implementing the months, simply use openMonthpicker.hide() on the click of a month. The hide method is available to toggle it off, which is exactly what you want.

Answer 6

Here is a simple solution for you.

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

In your code, you have assigned #openMonthpicker as a reference. So, when implementing the months, simply use openMonthpicker.hide() on the click of a month. The hide method is available to toggle it off, which is exactly what you want.

Ways to eliminate toggle event in Angular

Answer №1

Answer №2

Answer №3

Similar questions

Acquiring the appropriate type from a type object using generics in TypeScript

Analyzing the list of paths that are passed to the function

"Enhance Your XYChart with a Striking Background Image Using Amchart

Issues arise with User obj's utilization of the Instagram API

Tips for creating React/MobX components that can be reused

How can I dynamically modify the class name of a specific element generated during an iteration in React when another element is clicked?

Transform a Mobx observable map into a JavaScript array

Discovering the present width of an Angular element after it has been eliminated

Ways to speed up the disappearance of error messages

issue with brightcove player's complete event not triggering upon video replay

The touch event doesn't seem to be functioning properly on the div element, but it works perfectly on the window element

Exploring Node.js Express: Understanding the Difference Between Modules and Middleware

The attribute 'status' is not found in the 'ServerResponse' type (TS2339)

Is there a way to manipulate the src value using jQuery or JavaScript?

The combination of Object.keys() and the find function

CombineReducers takes all the reducer content and unpacks it into a single reducer

Removing connected entries with pre middleware on mongoose

Guide to implementing basic authentication within an HTTP request in Angular 4

Utilizing JSON data from Jade in local JavaScript: A comprehensive guide

The horizontal overflow in the HTML code was unsuccessful