How can I prevent the context menu from opening in Angular?

I am facing an issue with a nested div structure. The main div, which has a width of 100%, contains a context menu. The child div, with a width of 25%, also has its own context menu. However, when I click on the child div, both context menus open simultaneously. How can I prevent the parent context menu from opening in this scenario? Any assistance would be greatly appreciated.

 <div class="icon-td" (contextmenu)="sheetMenu($event);">
        <button mat-icon-button  
          (click)="hideChild(lineitem)">
          <mat-icon class="mat-icon-rtl-mirror">
            {{lineitem.display ? 'expand_less' : 'chevron_right'}}
          </mat-icon>
        </button>
        <div >
          <mat-icon class="note-icon">sticky_note_2_outline</mat-icon>
        </div>
        <mat-form-field floatLabel="never" class="line-item-field"  (contextmenu)="lineItemMenu($event);">
          <input [style.marginLeft.px]="lineitem.level * 16" matInput
           [value]="lineitem.lineItem" [id]="'line_'+lineitem.id">
        </mat-form-field>
      </div>

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

What I expect is for only the lineItemMenu to open, but currently both sheetMenu and lineItemMenu are being triggered.

angulartypescriptangular-materialmenu

Answer №1

Make sure to include the event.stopPropagation(); statement within the lineItemMenu function for proper functionality.

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

Typescript is failing to infer the definition of an object, even after conducting a thorough check

I am encountering an issue with the code structure below: interface Data { isAvailable: boolean; } const foo = (data: Data | undefined, error: boolean) => { const hasError = error || !data; if (!hasError) { if (data.isAvailable) // do so ...

typescript

transferring information between two sibling elements in Angular 7

My goal is to display the username of the logged-in user on the home page. I have a LoginComponent, HomeComponent, and I am using a service called DataService.ts for data transfer. The data seems to be reaching DataService.ts but it's not getting to t ...

angular

ng-click is not compatible with md-button

Here is the HTML and JavaScript code I am currently working with. The following element is functioning properly when clicked: <i class="material-icons" ng-click="clicked()" md-48>add_circle</i> However, I am encountering an issue with the fol ...

angularjsangular-material

How can I iterate over a specific range in Angular (version 12 and higher) instead of looping through the entire array?

I need help with working with an array called bars stored in a foo property. In my HTML template, I am able to loop through the array like this: <div *ngFor="let bar of foo.bars"> <!-- do something with bar --> </div> Howeve ...

angular

"Personalized labels for enhancing user insights on Microsoft Clarity

Is there a way to add a custom tag on MS Clarity specifically for tracking a user clicking the cancel button during a particular event? I am working on an Angular project and need guidance on how to achieve this. I attempted using script tags within the H ...

javascriptangularms-clarity

Angular 2- Custom input forms sourced from various components for enhanced user experience

I am currently working on creating an angular 2 form using template-driven and I want to reuse a custom input that I have created. My main component structure looks like this: <form (ngSubmit)="onSubmit(f.value)" #f="ngForm"> <custom-in ...

angularangular2-forms

Transferring data between ngModel instances

item-inventory.component.html <div *ngIf="selectedItem"> <h2>Product Information</h2> <div>ID: {{ selectedItem.id }}</div> <div> Name: <input type="text" ngM ...

c#angularangular-componentsangular-ngmodel

Retrieve parent form validation within a child component Angular 5 control value accessor

I found helpful information on this website: My goal is to implement validation for all fields in a child component using control value accessor and template driven forms. (For reference, here is the link to the issues on Stackblitz: https://stackblitz.c ...

angularformsform-controlngmodelcontrolvalueaccessor

The Ng-bootstrap dropdown menu fails to activate when clicked within a table row with a click event listener

By simply clicking on a table row, users can easily view the details. When I incorporate a 'ng-bootstrap' dropdown menu in the last column of the data table, it seems that clicking on the dropdown button does not open the menu as expected. Inste ...

angularbootstrap-4ng-bootstrap

Upgrading to Angular 14 has caused issues with component testing that involves injecting MAT_DIALOG_DATA

After upgrading Angular from 14.1.1 to 14.2.10 and Material from 14.1.1 to 14.2.7, a peculiar issue arose when running tests with the default Karma runner. I am at a loss as to what could have caused this problem, so any advice would be appreciated. The u ...

angulartypescriptangular-material

The implementation of async await within a switch case statement is failing to function properly

Is it possible to wait for the resolution of a promise within a switch case statement by using the keyword await? I am facing an issue with my Angular component where the following code is causing crashes in my application. switch (this.status) { ...

javascriptangular

Transmit information to the transcluded instance of a repeated element from a component that is

I am facing a challenge in Angular 2 as I try to include ng-content within ngFor inside my component. The issue lies in the fact that I need to pass some data into the transcluded element. I came across a solution for AgularJS which can be found here. Che ...

angularjsangulartransclusion

What is the best way to refresh the data in my list when a subitem is updated through a GET request using RTK Query?

Having a good understanding of the RTK query concept, I am facing a specific use case where I require some guidance. In my application, there is a list component and a details component that allows users to navigate and view more information about a parti ...

reactjstypescriptreduxreact-reduxrtk-query

The attribute 'disabled' cannot be used alongside an index signature

Error: The properties for ias, disableRipple, color, tabIndex, and extended in '{ alias: "disabled"; required: false; }' do not meet the constraint of '{ [key: string]: string; }'. Issue: Property '"disabled"&a ...

angularjsexpressangular-material

An alternative to `assert.IfError(value)` for Jest users

Explore Node's assert module documentation specifically focused on the assert.ifError function. When used, assert.ifError will throw an error if the provided value is not undefined or null. This comes in handy during testing, especially when examin ...

javascripttypescriptjestjs

Having difficulty handling the "of" class within the "rxjs" framework

I have created a custom class named ValueService. Here is the code snippet: import { Injectable } from '@angular/core'; import { of } from 'rxjs'; import { delay } from 'rxjs/operators'; @Injectable() export class ValueSer ...

angularrxjs

Ways to define a data structure where all elements adhere to the same data type

Here is a simple example: typedef Bar = { x: number; y: boolean } type Foo = { [key: string]: Bar } const foo: Foo = { baz: { x: 3, y: true } } // This will pass without any issues console.log(foo['baz']) // Error message stating: Property ...

typescript

Best practice for including Angular in the list of dependencies for an npm library

I have developed a small angular package on NPM that I consistently maintain to be compatible with all the latest versions of angular. In my package.json file, I have included angular in the list of peerDependencies to ensure they are always available in p ...

angularnpmversioning

What could be the reason for my Angular component not updating its value?

component1.html : <div class="nums-display"> {{nums}} </div> TS: nums: Array<number> = [0, 1, 2, 3]; ngOnInit(): void { this.numService.getNum().subscribe((res) => { this.num = res; }); } component2.html: <div (cli ...

javascriptangular

Retrieve the imported object by referencing the environment

Within my TypeScript Node application, I am looking to access the exported object that corresponds to my NODE_ENV variable. config.ts const test: { [index: string]: any } = { param1: "x", param2: { name: "John" } } const dev: { [index ...

node.jstypescript