Prevent material button animation on click

Question

I have made a page with a button in a button like the following :

<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 buttons use angular material design.

When I click on the parent button I want to navigate to a certain page and when I click on the child button I want to display some additional content. This is working.

When I click on the parent button the default angular material animation for button is triggered. That's fine with me. My problem is that when I click on the child button this is as if the parent button has also been clicked and so the default angular material animation is triggered for both button. I would like to prevent that. What I want is for the animation to be trigerred only for the child button when I click on it.

Any lead how I can acheive that ? Thanks in advance.

score 0 · Answer 1 · answered Feb 04 '20 at 14:30

0

A possible solution would be to remove the nesting of your buttons, thus seperating 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>

answered Feb 04 '20 at 14:30

WorksLikeACharm

384
1
6
14

Yes but I want my child button img to appear on top of the parent child img so it has to be nested no ? – Vetouz Feb 04 '20 at 14:33
Does a (click)="event.stopPropagation()" help in your case? – WorksLikeACharm Feb 04 '20 at 14:37

score 0 · Accepted Answer · edited Mar 16 '22 at 01:34

As WorksLikeACharm posted, do not nest the buttons. If your problem is just positioning, wrap them into a div and use absolute position on one of them.

Like this:

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>

Prevent material button animation on click

2 Answers2

Linked