Override Default Functionality in Angular Material Expansion Panel Header

1
votes

I am trying to override the default collapse and expand functionality for the Angular Material Expansion Panel.
https://material.angular.io/components/expansion/overview

By default the Expansion Panel will toggle expanding/collapsing if the mouse is clicked ANYWHERE in the Panel Header.

I'd like to suppress this functionality so I can add custom "toolbar" buttons to the header.

I've tried adding a click event handler to Panel Header and the calling: event.stopPropogation(); to try to prevent the expanding and collapsing to no avail.

I've also tried adding a button with a click event handler to the Panel Header to see if I could sidestep the expanding and collapsing. Unfortunatley, this did not work either.

https://stackblitz.com/edit/angular-ritpbb

HTML

<mat-expansion-panel #matExpansionPanel  
    [class.active]="selected" 
    (click)="componentSelected($event)" 
    [expanded]="expanded">
    <mat-expansion-panel-header (click)="togglePanel($event)">
        Collapse Test&nbsp;&nbsp;<button mat-button>select panel</button>
    </mat-expansion-panel-header>
    CONTENT FOR EXPANSION PANEL
    <mat-action-row>
        <button mat-button (click)="buttonClick($event)">remove</button>
    </mat-action-row>
</mat-expansion-panel>

.TS

import { Component } from '@angular/core';
import { MatExpansionPanel } from '@angular/material';

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

    expanded = true;
    selected = false;

componentSelected($event) {
    this.selected = !this.selected;
    event.stopPropagation();
}

buttonClick($event) {
    this.selected = !this.selected;
    console.log('test');
    event.stopPropagation();
}

togglePanel($event) {
this.expanded = !this.expanded;
//event.stopPropagation();
}
}
4
angularangular-material2

4 Answers

2
votes

Something like the following should do what you need it to.

use the hideToggle attribute on the mat-expansion-panel

<mat-expansion-panel #matExpansionPanel  
  [class.active]="selected"  
  [expanded]="expanded"
  hideToggle>

Pass event to expandPanel()

<mat-expansion-panel-header (click)="expandPanel($event)" >

Get reference to matExpansionPanel for use in expandPanel()

@ViewChild('matExpansionPanel') _matExpansionPanel:any

expandPanel() method

 expandPanel(event): void {
    event.stopPropagation(); // Preventing event bubbling

    if (this.expanded) {
      this._matExpansionPanel.open(); // Here's the magic
    }else{
      this._matExpansionPanel.close()
    }
  }

CSS

the following will override the mouse pointer

.mat-expansion-panel-header:not([aria-disabled=true]) {
    cursor: default !important;
}

button{
  cursor: pointer
}

Stackblitz

https://stackblitz.com/edit/angular-jztdvu?embed=1&file=src/app/app.component.ts

1
votes

You can add [disabled]="true" to prevent the default functionality. If that's what you are asking

Stackblitz: https://stackblitz.com/edit/angular-nmupwc

You can disable the mat-expansion-panel with the [disabled]="true" flag and control the expand/collapse functionality from outside like shown in the stackblitz. I just used random buttons and variables that were already available, but you get the idea..

0
votes

You can stop propagation of click event in your action:

<mat-expansion-panel *ngFor="let panel of panels">
    <mat-expansion-panel-header>
       <mat-panel-title>title</mat-panel-title>
       <mat-panel-description>
           <mat-icon (click)="edit($event)">edit</mat-icon>
       </mat-panel-description>
    </mat-expansion-panel-header>
</mat-expansion-panel>

Component function:

  edit(event: Event) {
    event.stopPropagation();
    ... do the logic here...
  }
0
votes

Add the inline CSS property into the <mat-expansion-panel-header> like,

<mat-expansion-panel-header style="pointer-event: none">
      Panel Title
</mat-expansion-panel-header>