Menu
In Angular is there a way to catch right click events? I see (click) and (dblclick), but when I try (rightclick) it does not trigger any events. Is there a way to include right click events and have them be handled by a function similar to the click and dblclick if it does not exist?
815
Create a right click context menu inside a dynamic list or table. We need to link each element of a list or table to a right-click context mat-menu. The list elements and their menu are generated only at runtime. To generate dynamically the menu we create an hidden div with the coordinates of the mouse.
Events are handled in Angular using the following special syntax. Bind the target event name within parentheses on the left of an equal sign, and event handler method or statement on the right. Above, (click) binds the button click event and onShow() statement calls the onShow() method of a component.
the Angular 2 onClick Event The onclick event triggers an event or function when a user clicks on a component or an element. The define() statement executes the component's define() method, and (click) binds the button click event.
The $event object often contains information the method needs, such as a user's name or an image URL. The target event determines the shape of the $event object. If the target event is a native DOM element event, then $event is a DOM event object, with properties such as target and target.
The event name is contextmenu. So, your html template code can be something like this:
<div (contextmenu)="onRightClick($event)"></div> $event is an optional parameter so your template and event handler can look like this:
<div (contextmenu)="onRightClick()"></div> onRightClick() { return false; } NOTE: You can return false; to avoid default browser action from the event.
164
The event name is "contextmenu", so you should use something like this:
<button (contextmenu)="onRightClick($event)"> Right click me </button> Then the onRightClick function should look something like this:
onRightClick(event) { event.preventDefault() //this will disable default action of the context menu //there will be your code for the expected right click action } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
