Stop material button from animating when clicked

On my webpage, I have created a unique button structure using Angular Material design:

<button mat-button class="library-tile-button">

    <button mat-button class="edit-library-button">
        <img class="edit-library-img" src="..."/>
    </button>

    <img class="library-picture" src="..."></img>

</button>

The main issue I am facing is related to the default animation behavior when clicking on the parent and child buttons. The desired functionality is to navigate to another page when clicking on the parent button, while displaying additional content upon clicking the child button.

Currently, when I click the child button, both buttons trigger the default angular material animation. My goal is to only have the animation triggered for the child button exclusively, not affecting the parent button. Any suggestions on how to achieve this would be greatly appreciated. Thank you in advance.

cssangularangular-material

Answer №1

As mentioned by WorksLikeACharm, it is advised not to nest the buttons. If your concern lies in positioning them properly, you can group them within a div and apply an absolute position to one of them.

Here's an example:

div {position:relative;}
button {background-color:transparent; border:0;}
.edit-library-button {
  position:absolute;
  top:40px;
  left:40px;
}
.edit-library-button img {width:30px;}
<div>
  <button mat-button class="library-tile-button">

      <img class="library-picture" src="https://lh3.googleusercontent.com/proxy/7TiJY6Mswv0hNIXdXRS0fgT687TBQ2SaZFd7PNpO8qfknkj4oIjggatPNPhG_6h9DJedmAycJaWe3p2dVHbFhOgyA0P0JbNu_aS1Tynre891APND36cFHll9qyIQWZ2vEk9kmg" />

  </button>
  <button mat-button class="edit-library-button">
          <img class="edit-library-img" src="https://img.icons8.com/material/4ac144/256/facebook.png"/>
   </button>
 </div>

Answer №2

One suggestion could be to restructure your button layout in order to separate the click-events.

<button mat-button class="library-tile-button">    

    <img class="library-picture" src="..."></img>

</button>

<button mat-button class="edit-library-button">
        <img class="edit-library-img" src="..."/>
 </button>

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

The functionality of the dynamic drag and drop form builder is not functioning as expected in Angular 12

I am currently developing a dynamic form builder using Angular version 12. To achieve this, I decided to utilize the Angular-Formio package. After installing the package and following the steps outlined in the documentation, I encountered an issue. The i ...

javascriptangularformioangular-formio

Angular 2 Express failing to trigger ngOnInit method

I'm having some trouble with Angular services. I used the default code from "Angular.io" to make service calls, but for some reason the ngOninit method isn't getting called. I've implemented the component from OnInit and added @Injectable to ...

node.jsangulartypescriptexpress

Is there a way to tally up the number of green items and display a <p> tag when every item has been marked green?

I have created a checklist that includes checkboxes. I am looking to display some text when all the checkboxes are checked and green. Can someone assist me with writing the code for this functionality? $(document).ready(function() { $("i").click(funct ...

javascriptjqueryhtmlcss

Svelte components loaded with no design aspects applied

I encountered an issue while trying to integrate the "Materialify" and "Carbon Components for Svelte" libraries into my Sapper project. The components seem to be loading, but without any associated styles. I followed the installation commands provided on t ...

cssuser-interfacesveltesapper

What is the best way to align this button next to the text and header on the page?

I'm struggling to position this button next to the paragraph element instead of below it. I want them both on the same line. <div class="up"> <div class="ban"> <div class="act"> <h2>Joi ...

htmlcssflexbox

Dealing with Uncaught Promises in Angular 2 while injecting a service

I followed the instructions in the official tutorial to start a project, but I'm encountering an issue with injecting services into my Angular2 app. Everything was working fine until I added a service. Here are the files : app.component.ts import ...

angulartypescriptes6-promise

What is the best way to make a drop down menu list appear when I click on the parent li, and then show the sub li using JavaScript?

I have a code that includes an image, HTML, and CSS code. Can anyone please tell me how I can set up a drop-down menu list to open the sub <li> elements when I click on a parent <li> using JavaScript? You can see the appearance of the code in t ...

javascriptphphtmlcss

What is the best way to smoothly scroll to another page using a specific id?

My website consists of multiple pages and I am looking for a code that will allow for smooth scrolling navigation to another page when loading on a specific id or section. For example, in the navbar I have multiple pages with links. When clicking on a lin ...

javascripthtmlcss

Utilizing Angular 2's ngModel feature for dynamic objects and properties

Within my TypeScript file, I am dynamically generating properties on the object named selectedValsObj in the following manner: private selectValsObj: any = {}; setSelectedValsObj(sectionsArr) { sectionsArr.forEach(section => { section.questions. ...

angulartypescriptangular2-ngmodel

Is there a way to display the avatar image outside of the drawer in MUI ReactJS?

Currently, I am attempting to display the avatar image with a curved effect outside the border line of the sidebar. I have referenced the persistent drawer from MUI v5 for inspiration. You can view an example here: the codesandbox link The desired outcom ...

cssreactjsflexboxreact-hooksmaterial-ui

challenges arising from using the css overflow: hidden attribute

Struggling with a popup displaying issue caused by an overflow: hidden property on the containing div. The background graphics of the popup are crossing over due to this setting, leading to a display problem where the width is cut off at the overflow bound ...

jqueryhtmlcssdhtml

Additional <li> elements are created in Internet Explorer versions 8 and 9

Currently in the process of setting up a new website/landing page. Upon heading to the right column at the bottom (where the pictures are located), you will notice <li> elements containing pictures within containers. The only issue that arises is whe ...

htmlcsshtml-lists

Conceal certain digits of a credit card number in a masked format for security purposes

Is there a reliable method to mask Credit Card numbers in password format within a text field? **** **** **** 1234 If you are aware of a definitive solution, please share it with us. ...

javascriptcssangularjshtml

Is it possible to resize an object using JavaScript?

Is it possible to change the size of an object when loading specific data by clicking on navigation? <object id="box" width="250" height="250" data=""></object> Although the JS code loads the data, it does not change the size. document.getEl ...

javascriptjqueryhtmlcss

Any alterations made to an object in one component result in changes being reflected across all components

I currently have the following item.ts file: item.ts export interface IItem { name: string; isActive?: boolean; } const data: IItem[] = [ { name: 'item1', isActive: true }, { name: 'item2', isActive: true } ...

angular

When implemented Angular SSR, I encountered an unexpected error: ''An uncaught exception occurred: npm ERR! code ERESOLVE

I'm currently in the process of implementing Server-Side Rendering for my application by closely following the instructions provided here in the documentation The initial step involves running ng add @nguniversal/express-engine Unfortunately, this r ...

angularnpmangular-cliangular-universal

Removing a Request with specified parameters in MongoDB using NodeJS

Working with Angular 4 and MongoDB, I encountered an issue while attempting to send a delete request. My goal was to delete multiple items based on their IDs using the following setup: deleteData(id) { return this.http.delete(this.api, id) } In order ...

javascriptnode.jsangularmongodbexpress

Issue encountered while trying to determine the Angular version due to errors in the development packages

My ng command is displaying the following version details: Angular CLI: 10.2.0 Node: 12.16.3 OS: win32 x64 Angular: <error> ... animations, cdk, common, compiler, compiler-cli, core, forms ... language-service, material, platform-browser ... platfor ...

angulartypescriptnpmangular-cli

How can I disable auto-fill for password input fields? Setting autocomplete="off" doesn't seem to be working

Hey there, I'm having some trouble with the autocomplete feature in Google Chrome. Can anyone suggest an alternative way to disable autocomplete for password fields? By the way, my project is using Vue.js. ...

javascripthtmlcssvue.js

Ionic 4: Facing issues with setting complete background image on ion-card

https://i.stack.imgur.com/3lH6h.png I'm currently attempting to set a background image for an Ion-card in order to completely cover the card's area. However, I'm facing an issue where the background image does not cover the entire area and ...

cssangularionic-frameworkionic4