Guide to accessing a menu through Long press or Right click in Angular2

I recently started experimenting with angular 2 and I am trying to figure out how to create a menu that opens with multiple options on both mobile and desktop devices.

What I'm looking for is a way to trigger the opening of a menu when a long hold or right click occurs above the div element with the class container. The menu should look something like this -

The HTML code snippet is shown below:

<div class="container" id="main-wrapper">   
  <section class="intro">  
    <div class="content">
      <h1 [contentEditable]="contentEditable">You can create full-screen sections without JavaScript.</h1>
      <p [contentEditable]="contentEditable">The height is set to 90vh, meaning 90% height.</p>
    </div>
  </section>
</div>

explore.ts

rightClickMenu() {
  // Need guidance on what to implement in this function to achieve the desired menu.
}

Could you please provide advice on where and how to call this menu function?

angulartypescript

Answer №1

determine the period between a mouse up event and a mouse down event, then display the menu if the time exceeds the specified threshold.

within the element

timeGap:int = 0
var timer;
doMouseDown()
{
   timeGap=0;
   timer=setInterval(function(){
   timeGap++;
},1000);
}

doMouseUp()
{
  clearInterval(timer);
  if(timeGap >15) // alter the value to set your desired long hold time)
  {
   //reveal menu
  }
  else
  {
   //display for short hold 
  }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Automatically compile files while performing an npm install or update

I am looking for a way to automatically compile my TypeScript code into JavaScript when another project requires it. For example, when a project runs npm install or updates with my project as a dependency, I want a specific command to be executed after all ...

javascriptnode.jstypescriptnpmconfiguration

How to prevent duplicate database entries in Angular forms?

Currently, I am working on a project using Angular and TypeScript. The goal is to retrieve a list of users from an API and allow for the addition of new users. However, I am struggling with determining how to verify if a user with a specific name already e ...

angulartypescriptvalidation

Error: Unable to access the 'myDate' property as it is not defined

I've been working on a simple code, but I keep encountering a browser error. The expressjs logs also show an error message. TypeError: Cannot read property 'myDate' of undefined at getReportTable (XXX\dist\controllers&bsol ...

node.jstypescriptexpressmongoose

Implement adminLTE into a new Angular2 project

I tried to integrate the adminlte template into my Angular project 2. I added the adminlte folder to the node_modules, but when linking the .js and .css files in the angular index.html, they couldn't be found. I'm unsure of the reason behind this ...

angulartemplatesadminlte

Sending data using jQuery to a web API

One thing on my mind: 1. Is it necessary for the names to match when transmitting data from client to my webapi controller? In case my model is structured like this: public class Donation { public string DonorType { get; set; } //etc } But the f ...

javascriptjquerytypescriptasp.net-web-api

Upgrade your @ngrx/store from version 10 to version 11 or 12

Hello there! I am in need of assistance regarding a specific issue. After updating our project to Angular 12 some time ago, I have been attempting to upgrade @ngrx/store from version 10 to either v11 or v12. Despite trying this update when we were still o ...

angularreduxngrx-store

Utilizing ConcatMap in conjunction with an internal loop

I am having a coding issue where I need certain requests to run sequentially, but some of the responses are observables. The data is mainly retrieved except for two requests that need to be executed in a loop for each account. I am using concatMap and fork ...

angulartypescriptrxjsobservablerxjs-observables

Typescript validation for redundant property checks

Why am I encountering an error under the 'name' interface with an excess property when using an object literal? There is no error in the case of a class, why is this happening? export interface Analyzer { run(matches: MatchData[]): string; } ...

typescript

angular 2 checkbox for selecting multiple items at once

Issue I have been searching for solutions to my problem with no luck. I have a table containing multiple rows, each row having a checkbox. I am trying to implement a "select all" and "deselect all" functionality for these checkboxes. Below is an example o ...

javascripthtmlangulartypescript

Exploring the functionality of Protractor testing in combination with Angular 2, focusing

I am currently developing an Angular 2 application and I require some information regarding unit testing with Protractor. Previously, in Angular 1, we were able to check for things like: element(by.css('[ng-click="myFunction()"]')) in our test ...

javascriptangularprotractor

standards for matching patterns (such as .gitignore)

Throughout my experience, I have utilized various tools designed to search a codebase for specific files and then carry out operations on those files. One example is test libraries that identify all the necessary files for execution. Another common tool is ...

javascripttypescriptfilesystems

While attempting to set up a fresh 'TypeScript Angular Project' in Visual Studio 2022, I encountered an Error Message stating "Visual Studio Code: Illegal characters found in the path"

Encountering an issue when attempting to create a new 'Standalone TypeScript Angular Project' called HealthCheck in VS 2022. Upon clicking the create button, I receive an Error Message stating "Visual Studio Code: Illegal characters in path" for ...

angularvisual-studio

Tips for generating or updating the sitemap.xml file within an Angular 9 project's structure during runtime

Is it possible to dynamically create a sitemap.xml file in an Angular 9 project structure? I am able to retrieve data from a node API using HTTP get requests, but how can I update the local xml file in the Angular project during runtime? In my situation, ...

node.jsangularangular-clisitemapangular9

Upcoming Authentication Update: Enhancing User Profile with Additional Data Points

I recently encountered an issue with my typescript application that uses Next Auth v4 along with GithubProvider and MongoDBAdapter. I needed to add a new field called role to the User schema. Researching online, most solutions suggested adding a function ...

javascriptreactjstypescriptnext.jsnext-auth

Replace Material UI propTypes with new definitions

I am currently working with React, Typescript, and Material UI. To globally disable the ripple effect for the ListItem component, I am using createMuiTheme.props in the following manner: createMuiTheme({ props: { MuiListItem: { disableRipple: t ...

reactjstypescriptmaterial-ui

Best Practices for Converting TypeScript to JavaScript

What is the recommended approach to converting this JavaScript code into TypeScript? JAVASCRIPT: function MyClass() { var self = this, var1 = "abc", var2 = "xyz"; // Public self.method1 = function () { return "somethin ...

javascripttypescriptscope

Karma Unit test: Issue with accessing the 'length' property of an undefined value has been encountered

While running karma unit tests, I encountered a similar issue and here is what I found: One of my unit tests was writing data to a json file, resulting in the following error: ERROR in TypeError: Cannot read property 'length' of undefined a ...

angulartypescriptkarma-jasmine

I have an Observable but I need to convert it into a String

Seeking assistance with Angular translation service and Kendo.UI components. In the Kendo.UI documentation, it mentions the use of MessageService for component translation implementation. To achieve this, an abstract class must be extended containing a m ...

javascriptangularobservablekendo-ui-angular2

What is the best way to apply styling exclusively to a child component?

I am currently working on a coding project that involves a parent component and multiple child components. My main goal is to adjust the position of a filter icon by moving it down 5 pixels on one specific child component. The issue I am facing is that no ...

cssangular

Creating Typescript type definitions for any object properties

Struggling to find the correct TS syntax with Typescript 3.7.3. I have a random object, for example: var obj = { one: ..., two: ... three: ... }; I want to create a type that includes all keys from that object, like this: type ObjKeys = &ap ...

typescripttypescript-typings