Tips on eliminating expansion upon button click in header within an Angular application

While utilizing Angular Materials, I encountered a challenge with the mat-expansion component. Every time I click on the buttons within the expansion panel, it closes due to the default behavior of mat-panel.

Requirement - The panel should remain expanded when clicking on buttons.

Use Case - In my scenario, I have multiple stacked mat-expansions and I want to use icon buttons to rearrange their positions in the stack. Although I have already implemented the logic for moving them up and down, the issue arises when the panel collapses or expands along with the button clicks.

<mat-expansion-pannel>
  <mat-expansion-panel-header>
    <mat-panel-title class="title-align">
      Image
    </mat-panel-title>
    <mat-panel-description>
      <button mat-icon-button (click) ="moveUp(i)"><i class="material-icons md-18">arrow_upward</i></button>
      <button mat-icon-button (click) ="moveDown(i)"><i class="material-icons md-18">arrow_downward</i></button>   
      <button mat-icon-button color="warn" (click) ="removeWidget(i)">
      <i class="material-icons md-18">clear</i>
      </button>
    </mat-panel-description>
  </mat-expansion-panel-header>
</mat-expansion-pannel>

As shown in the code snippet, the goal is for the panel to move up and down without collapsing unexpectedly. One approach could be to disable button clicks on the panel altogether, but since we require button functionality, the objective is for the buttons to function independently without affecting the expansion state.

htmlcssangularangular-material

Answer №1

I was able to resolve this issue by passing $event in the button click function and then calling the stopPropagation() function.

<mat-expansion-panel class="mat-elevation-z8">
  <mat-expansion-panel-header>
    <mat-panel-description>
      <button mat-icon-button (click)="moveUp($event,i)"><mat-icon>arrow_upward</mat-icon></button>
      <button mat-icon-button (click)="moveDown($event,i)"><mat-icon>arrow_downward</mat-icon></button>   
      <button mat-icon-button (click)="removeWidget(i)" color="warn"><mat-icon>clear</mat-icon></button>
    </mat-panel-description>
  </mat-expansion-panel-header>
  <div>
  </div>
</mat-expansion-panel>

Additionally, the corresponding TypeScript function is as follows: 

moveUp(event : any, id : number) : void{
    event.stopPropagation();
    if(id > 0 ){
     ...
    }
}

Answer №2

After experimenting with the mat-expansion header, I managed to prevent it from expanding and contracting. You can see the StackBlitz example HERE.

To achieve this, I added [disabled]="clickButton" to each mat-expansion-panel along with the action (click)="clickButton=false". The default setting is clickButton: boolean = false; and clicking on a mat-expansion-panel sets clickButton=false.

<mat-expansion-panel class="mat-elevation-z8" [disabled]="clickButton" (click)="clickButton=false">
  <mat-expansion-panel-header>
    <mat-panel-description>
      <button mat-icon-button (click)="moveUp()"><mat-icon>arrow_upward</mat-icon></button>
      <button mat-icon-button (click)="moveDown()"><mat-icon>arrow_downward</mat-icon></button>   
      <button mat-icon-button (click)="removeWidget()" color="warn"><mat-icon>clear</mat-icon></button>
    </mat-panel-description>
  </mat-expansion-panel-header>
  <div>
    <p>...</p>
  </div>
</mat-expansion-panel>

I made sure to include this.clickButton = true; in your functions to prevent the panel from opening when any of the buttons are clicked.

moveUp(){
  this.clickButton = true;
  console.log("function()");
}

I trust that these modifications will be beneficial for you.

Check out the DEMO:

https://i.sstatic.net/dDZuy.gif

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

Leveraging Angular to incorporate HTML templates from one component into another component

I am currently working with two components. The first one is a table component, identified by the selector 'table-component', which has standard filtering capabilities. The second component is designed for displaying the table on a page. This me ...

javascriptangular

Tips for creating a vertical drawer using jQuery and CSS

Hello, I am currently working on developing a drawer component using Ember.js. If you want to view the progress so far, feel free to check out this jsbin http://jsbin.com/wulija/8/edit My goal is to have the drawer look like the following initially: +--- ...

javascriptjqueryhtmlcss

Learn the process of generating an ID and dynamically updating its content using Angular

I have a coding challenge where I need to dynamically create an ID and retrieve it in order to change its content upon clicking. Here is the code snippet: <div class="row" *ngFor="let row of [1, 2, 3]"> <button (click)=&quo ...

angulardom

Managing file imports in Angular 2+ Unit Testing

Within my project, there are various utility functions that handle data transformations and other tasks. These functions are not contained within a class and are utilized across multiple utility files. Being relatively new to angular testing, I've sp ...

angulartypescriptunit-testingstubbingangular-unit-test

Tips for aligning the elements in the navigation bar in the center

I am faced with a dilemma regarding my navbar design. Here is an image of my current navbar layout: I am attempting to align the components within the navbar to resemble the following design: Here is the HTML code I am using: <!-- Navbar --> < ...

htmlcsslaravelbootstrap-4navbar

Activating the Play button to start streaming a link

Recently delved into the world of Ionic 4 and Angular, so definitely a beginner :) Purchased a UI Template from code canyon but didn't realize I needed to code the music player part. Been trying to get a music stream playing but no luck. Came across ...

javascripthtmlangularionic4

React JS Bootstrap Dropdown Troubleshooting

I'm facing a challenge in my React.js project while trying to implement a filter. The issue is that the list appears when I click on the button, but it doesn't disappear on the second click or if I click outside the list. Initially, I imported t ...

javascriptcssreactjstwitter-bootstrap

Scrolling to an element is not possible when it has both position absolute and overflow-x hidden properties

My issue involves animating ng-view with a slideup animation, requiring absolute positioning of elements and overflow-x: hidden to clip the content. However, I need to use the scrollTo element functionality on one sub-page, which doesn't work when bot ...

javascriptcssangularjs

"Troubleshooting Issue: jQuery dataTables Filter Functionality Inoperative When Conjoined with

Incorporating the dataTables plugin and recycling code from another page to create a select for filtering a specific column, I encountered issues with the filtering functionality not working as expected. This was perplexing since it was code that had previ ...

jqueryhtmldatatables

Please refer to the appropriate manual for your MySQL server version to find the correct syntax for the following statement: `'' , , '', '', '', '', '', '', NOW())' at line 2`

I encountered an error and since I am new to programming, I would appreciate any corrections. Thank you! <? $customername = $_REQUEST["customername"]; //$customername = strtoupper($customername); //$customername = trim($customername); $address1=$_RE ...

phphtmlmysql

What is the best way to retrieve the outcome from the ngbModal component?

I'm seeking assistance with retrieving results from the ngbModal component. I trigger the modal with a link. <a class="order-collection-options-link" (click)="openTimePicker()">{{'ORDER_COLLECTION_OPTIONS_LABEL' | dict}}</a> ...

angularbootstrap-4ng-bootstrap

Tips for utilizing $.get information to update specific elements on a web page

I am currently utilizing jQuery 1.4.2 to smoothly navigate between similar web pages within Firefox 3. Upon clicking a link, a JavaScript script should load the new HTML, filter out the correct elements and replace them on the existing page. It appears th ...

jqueryhtmlajax

Upon refreshing the Angular application in the browser, we received a response from Django

I am currently developing an application with a Django backend and an Angular frontend. Everything was working smoothly until I encountered an issue after refreshing a page in the browser. The Angular response stopped coming through, but I continued to rec ...

pythondjangoangularurl-routingdjango-urls

How can I link dropdown values to the corresponding property values within a nested array in Angular?

Within my JSON array, there are multiple similar items. Here is an example of one item: { "ownerID": "rkjgAs40NEuSJfp4jquNYQ", "defaultPriceScheduleID": null, "autoForward": false, "id": "44685 ...

angular

Adding multiple styles using ngStyle is currently not possible

When using ngStyle to add height and width styles to an img element, I encountered a strange issue: <img class="image-full-view" [ngStyle]="{'height': selectedImage.heightSize, 'width': selectedImage.widthSize}" [src]="selectedImage ...

cssangular

receiving a null value in the JSON response

Preparing for the client to register. This function is responsible for registering a client. registerAsClient(){ this.loading =this.loadingCtrl.create({ content:"Setting up Account" }); this.loading.present(); this.buildClientData(); console.log( ...

angulartypescriptionic-frameworkionic2

Determine if a certain value is present in an array within an HTML document

In the context of AngularJS, I have an array that looks like this: var test=["abc/1/1","def/2/2","efg/3/3"]; I am trying to determine if the array contains a value with "abc" in it within my HTML code. When I used the following: test.indexOf("abc")!=-1 ...

htmlangularjs

What is the method for retrieving the active element with Waypoint?

Currently, I am implementing Waypoint (version 7.3.2) in my React project using React version 16. My goal is to create a scrollable list of items where each item fades out as it reaches the top of the container div. My main inquiry is how can I obtain a re ...

javascripthtmlcssreactjsjquery-waypoints

My goal is to create text that is opaque against a backdrop of transparency

Is it feasible using CSS to create text with a transparent background while keeping the text opaque? I attempted the following method: p { position: absolute; background-color: blue; filter: alpha(opacity=60); opacity: 0.6; } span { color: b ...

htmlcss

Ways to halt a CSS animation when it reaches the screen boundary

I put together this demo: By clicking, a red box falls down. The issue arises when trying to determine the screen size using only CSS. In my demo, I set the box to fall for 1000px regardless of the actual screen height. Here is the keyframe code snippet ...

javascriptjquerycssanimation