How to remove expansion on button click in header in angular? [closed] - html

Question

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 years ago.
Improve this question
I'm using angular materials and got struck while using mat-expansion. Whenever I click the buttons I've added on the expansion panel, it gets closed following the basic property of mat-panel.
Requirement - The panel should not contract on button click.
Use Case - In my case, I have multiple mat-expansion being stacked one on other and I'll be using the icon buttons to move the the expansion up/down in the stack. I've already written logic for move up/down but the issue is whenever I click the icon buttons, along with moving up/down, the expansion also perform the default behaviour of expansion/collision.
<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 specified in the code, the panel should perform the move up and move down functionality. One way is we can disable any kind of button click on the panel, but since we need the functionality of buttons, I just want the buttons to work and don't want the panel to contract/expand unnecessarily.

Answer 1

I resolved this doubt as well , what we can do is pass $event in the button click function and then call stopPropogation() 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>
Also the function in typescript file :
moveUp(event : any, id : number) : void{
event.stopPropagation();
if(id > 0 ){
...
}
}

Answer 2

OK, I tried to suppress the expansion-contraction of the mat-expansion header, StackBlitz HERE.
I added [disabled]="clickButton" on each mat-expansion-panel and the action (click)="clickButton=false".
By default, clickButton: boolean = false; and when click on mat-expansion-panel, 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>
It's in your functions that I added this.clickButton = true; thus allowing not to open the panel when clicking on one of the buttons.
moveUp(){
this.clickButton = true;
console.log("function()");
}
I hope this will help you.
DEMO: