Deactivate button function upon clicking embedded material icon

Within a button in my Angular application, I have a mat-icon with its own defined event. The issue is that when I click on the mat-icon, both its event and the button's event are fired because the mat-icon is nested inside the button tag. I want to prevent the button's event from firing when the mat-icon is clicked, and vice versa excluding the mat-icon portion of the UI. Here is an example of the HTML code within the Angular framework:

<button type="button" class="" (click)="someevent">
            <span>
              Text
            </span>
            <mat-icon class='' (click)="differentevent">
                       delete
            </mat-icon>
</button>

How can I address this issue? Both click events are defined in TypeScript.

angulartypescriptgoogle-material-icons

Answer №1

To prevent event bubbling, you can utilize the $event.stopPropagation() method:

By calling event.stopPropagation(), you halt the propagation of an event to its parent elements, effectively preventing any parent event handlers from running.

To implement this in your code, simply replace the mat-icon markup with the following snippet:

<mat-icon (click)="$event.stopPropagation(); differentevent()">delete</mat-icon>

When the delete icon is clicked, the event bubbling is stopped, ensuring that the parent click event is not triggered before executing the next method as intended.

The sequence of stopPropagation() doesn't matter - it can also be written like this:

<mat-icon (click)="differentevent(); $event.stopPropagation()">delete</mat-icon>

For a demonstration, check out this Online Demo.

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

Creating a Variety of Files in the Angular Compilation Process

Currently, I am developing an Angular project and faced with the task of creating various files during the build process depending on certain conditions or setups. I would appreciate any advice on how to accomplish this within the Angular framework. I att ...

angulartypescript

Executing two subscriptions simultaneously in Angular 2

I am facing an issue with my code snippet: //Subscription 3: role ID to role Name af.database.object('/roles/'+businessRole.$value) .subscribe((roleData) => { //Subscription 4: Get user info af.database.object( ...

angularrxjsobservablerxjs5

What is the method for retrieving the name of an object's property within an Angular template

I am trying to display the name of a nested object's property using Angular interpolation <ng-container ngFor="let item of saleDetailsAggegater.productMap | keyvalue"> <tr *ngFor="let qtyMap of item.value | keyvalue"&g ...

javascriptangulartypescript

Utilize Lodash to iterate through functions in a loop and retrieve the first matching result

I am looking to iterate through an array of objects and call a method on them. If the result of that method meets certain conditions, I want to immediately return that result. The current implementation is as follows: public getFirstMatch(value: string, a ...

javascripttypescriptlodash

Bypass VueJs Typescript errors within the template section with Typescript

My VueJs App is functioning properly, but there is one thing that bothers me - a TypeScript error in my template block. Is there a way to handle this similar to how I would in my script block? <script setup lang="ts"> //@ignore-ts this li ...

typescriptvue.jsvuejs3

There is a problem with the Angular document because it is not

I am looking to optimize my Angular app for production by running the following command: npm run build:ssr SSR stands for server-side rendering. However, after completing the build process, I encounter an error within my header components. The error mes ...

javascriptangular

Exploring the differences between Angular 4's @Input() and using Component.inputs

As far as I can tell, utilizing @Input() name: string; And defining inputs in the Component decorator array like this @Component({ ... inputs: ['bankName', 'id: account-id'] }) Are essentially equiv ...

angular

Ways to determine the visibility status of an HTML tag in Angular 2

Is there a way to check if a div is hidden in Angular 2? ...

javascriptangular

Link the Angular Material Table to a basic array

Currently facing a challenge with the Angular Material table implementation. Struggling to comprehend everything... I am looking to link my AngularApp with a robot that sends me information in a "datas" array. To display my array, I utilized the following ...

arraysangulartypescriptangular-material

Setting the background color of a button within a template in an Angular 8 component using style.background

I have been exploring the different versions of Angular and their changes. Currently, I am enrolled in an Angular course on Udemy where I have installed Angular 8. In the course, it is mentioned to use style.backgroundColor on a button inside the template ...

angular

The main module's postinstall process is initiated before the sub-module's postinstall process

Update: I am seeking guidance on how to install a module from GitHub instead of npm. That's the main query. In case you're wondering why: I'm currently working on some confidential projects and prefer not to publish the code. As a result, ...

node.jstypescriptnpm

Attempting to implement a guard on the parent element without applying it to the child element

How can I apply a Guard to secure access to a specific path in my routing configuration without affecting its children? const routes: Routes = [ {path: "", component: TirageComponent}, {path: "tirage", redirectTo: ""}, { ...

angularangular2-routing

What is the method for including Location in a function within the NgModule declaration?

Below is the code snippet I am working with: @NgModule({ imports: [ .. TranslateModule.forRoot({ loader: { provide: TranslateLoader, useFactory: (createTranslateLoader), deps: [HttpClient] ...

angulartypescriptdependency-injectionlocation

The Angular2 application is experiencing technical difficulties

Hello, I am encountering an issue with my small Angular (2.1.1) application that consists of a module and a component. Everything was functioning correctly until this error occurred: error_handler.js:53 TypeError: jit_selectOrCreateRenderHostElement5 is n ...

angulartypescript

Unable to provide any input while utilizing npm prompts

After installing npm prompts, I encountered a strange issue. When trying to run the example code for npm prompts, I found that I couldn't enter any input at all. The underscore in the input field would blink for a few seconds, then the cursor would ju ...

javascripttypescriptnpminput

Unable to create a new collection in Firebase Firestore

I encountered an issue while trying to add a collection in Firebase Firestore using the function .collection(doc).set. Despite finding the new user in authentication in Firebase, the collection was not created and the console displayed an error message. ...

javascriptangularfirebasegoogle-cloud-firestore

What is the best way to use "ngModel #something="ngModel"" on a dynamically generated form field within a template-driven form?

Encountering an error when submitting my form indicating it's not defined. After some research, I found out that I needed to include ngModel #something="ngModel in each input field for the form to recognize the inputs, similar to the example provided ...

angularangular2-forms

Collaborate on prisma types and enums for various projects

I'm currently working on an API that utilizes Prisma to provide data. This API is used in various projects. Within the API, I create types using Prisma.ModelGetPayload to specify the return types for certain API responses. import { Prisma } from " ...

typescriptnpmprisma

Upon attempting to run ionic for iOS, an error was encountered regarding the arm64 and armv7 architectures

I'm currently in the process of developing a mobile application for both Android and iOS platforms utilizing Ionic version 1. Here is a breakdown of the software versions I'm working with: cordova: 7.0.1 ionic: 2.2.2 ios-deploy: 1.9.2 ios-sim: ...

iosxcodeangularcordovaionic-framework

Can a type be designed to allow the second argument to be typed according to the type of the first argument?

In my preference, I would rather have the type of the second argument inferred from the type of the first argument instead of being explicitly specified as a type argument. This way, it can be passed without the need for explicit typing. I typically defin ...

typescriptgenerics