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 -

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

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

Tips for styling your Angular Material Card on mobile devices

Currently, I am very happy with my desktop layout which looks like this: https://i.stack.imgur.com/tG0pw.png However, when it comes to the mobile version of my site, here is what I have so far: https://i.stack.imgur.com/KD1hh.jpg While I do like the ho ...

cssangularangular-material

What are some techniques for streamlining this code with Typescript?

I am currently working with the following code snippet: let doNavigate = this.currentScreen === removedFqn; if (doNavigate) { location.reload(); } Does anyone have any suggestions on how I can simplify this code using Typescript? ...

javascriptangulartypescript

Angular 8 template-driven form encountering a Minimum Length Error

Upon clicking the submit button, I encountered the following error: ERROR TypeError: Cannot read property 'minlength' of null I am unsure why this error is happening. How can I go about resolving this issue? Below is the code from app.componen ...

typescriptangular8

Enhance your Angular Material Table with split headers and sticky header capabilities

I am having an issue with the header of my Angular Material table. I need help adding a sticky header feature. I tried using sticky: true, but it's not working for my first column since I have hidden it. Additionally, the first row is displaying the ...

angularangular-materialmaterial-uimat-table

TypeScript does not properly validate the types of defaultProps

When working with TypeScript 3.0, I consulted the documentation at https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-0.html The recommendation is to use static defaultProps: Pick<Props, "name"> as an explicit type annotation ...

reactjstypescriptreact-props

Ways to check the functionality of the secondary tier in the api.send method

Currently, I am testing a function that involves returning a promise and subsequently calling the same function again at a second level. However, I am facing difficulties in accessing this second level of call. Below is the function code: itemToForm = () ...

angulartypescriptkarma-jasmine

TSLint Alert: Excessive white space detected before 'from' keyword (import-spacing)

I'm currently using WebStorm and working to maintain a specific code style: However, I encounter an issue where TSLint highlights my spacing and provides the following hint: "Too many spaces before 'from' (import-spacing)". My main ques ...

typescriptwebstormtslint

Jasmine reported that there were no specifications found in the Angular project written in TypeScript

I'm facing a frustrating issue with Karma and Jasmine in my Angular 9 project. Despite setting up the configuration files correctly, I keep getting a "No specs found" message when running ng test. I have tried various adjustments, including creating d ...

angulartypescripttestingjasminekarma-runner

Webclipse is having trouble locating a module, despite the fact that Angular CLI is able to

I am facing an issue with my project structure src | +--app | +--components | | | +-component.ts | +--entities | +--entity.ts In entity.ts, I have export class Entity { ... In component.ts, there is an import statement ...

angulartypescriptimportcompiler-errors

Highlighting in Coda on MacOS now supports TypeScript

Can anyone help me with getting my Coda editor to properly highlight TypeScript? I checked this page and it says that TypeScript is supported: But in my up-to-date version of Coda, the list of supported languages seems different. Is there a way to make Ty ...

macostypescriptcoda

The date displayed in the table is incorrectly showing 04 instead of 03 when using the pipe

{{element.createdAt | date: 'MM/dd/yyyy h:mm'}} why are the dates in the database all showing as 23 but some values are displaying as 24? Please confirm. The first two values created in the db show a createdAt time of 3, but the table is showing ...

angularangular-materialmaterial-ui

Tips for designing a navbar specific to a profile section

I am currently working on an angular application with a navigation bar composed of anchor tags. When the user logs in, I have an ngIf directive to display my profile icon with dropdown options. However, I am facing challenges in styling it correctly. I aim ...

cssangular

Converting retrieved data into table cells through mapping

I'm facing an issue where I need to display specific addresses for each individual in a table row. For simplicity, let's focus on showing the city specifically as described in this code snippet: https://i.stack.imgur.com/bJmsD.png Currently, whe ...

reactjstypescriptmaterial-uimappingjsx

Following the update, Angular no longer requires any node dependencies

Recently upgraded from Angular 5 to 9 and encountered an error in the browser's devtools: Uncaught ReferenceError: global is not defined After researching, I found a helpful post that discusses the issue: Upgrading to angular-6.x gives "Unca ...

angulartypescriptangular9

Encountering an undisclosed CORS error on all requests from Angular frontend to NodeJS Express Server during preflight 200

After thorough testing with Postman, my backend server is functioning properly and generating the desired responses for all requests. However, my Angular app is encountering an unknown CORS error on every request despite receiving a 200 Preflight response ...

node.jsangularexpresscorspreflight

OpenTok Angular 6 encountered an error with code TS2314 stating that the generic type 'Promise<T>' needs to have 1 type argument specified

Issue in opentok.d.ts File: Error TS2314 npm version: 6.2.0 node: v8.10.0 Angular CLI: 6.2.3 Operating System: Linux x64 Angular Version: 7.0.0-beta.5 @opentok/client": "^2.14.8 ...

node.jsangulartypescriptwebpack

The input feature in the Angular 4 Library allows users to easily

Hello everyone, I could really use some assistance with a problem I am facing. For some reason, I can't seem to make it work properly. I suspect that there might be an issue with the syntax I am using. Currently, I am in the process of developing Ang ...

angularnpmyoangular-library

Tips for integrating 2 way data binding into model-driven forms

When working with Angular 2, one approach to creating forms is the model-driven method. This means that controls may lose their two-way data binding, unlike in the template-driven approach with ngModel. What is the best way to combine two-way data binding ...

angularangular2-forms

What could possibly prevent Jasmine Spyon from being named?

I am currently facing an issue with a failing test even though I have included the necessary calls. One specific area where I am encountering this problem is with the PrimeNG Message Service that I am spying on. Below, you can find the code snippet that I ...

javascriptangularjasmine

Loading the Angular 2 library with the help of SystemJS

I recently went through the Angular2 quickstart guide on angular.io and came across their use of systemJs for app loading. Instead of importing, they load angular2, rx.js, and angular2.dev.js via script references. Is there a way to import these scripts? ...

angularsystemjs