How to Toggle Mat-Expansion-Panel With Button Click

How to toggle mat-expansion-panel with button click?

In your html file:

<mat-expansion-panel [expanded]="panelOpenState">

    <mat-expansion-panel-header>
        <mat-panel-title>
            TITLE
        </mat-panel-title>
    </mat-expansion-panel-header>

    <p>BODY</p>
</mat-expansion-panel>

<button mat-raised-button (click)="togglePanel">TOGGLE</button>

In your TS file:

panelOpenState: boolean = false;

togglePanel() {
    this.panelOpenState = !this.panelOpenState
}

If you use *ngFor to generate the expansion panels:

<mat-expansion-panel [expanded]="isOpen" *ngFor="let d of data">
    <mat-expansion-panel-header>
        {{ d.header }}
    </mat-expansion-panel-header>
    <p>{{ d.content }}</p>
</mat-expansion-panel>

<button mat-raised-button (click)="togglePanel">TOGGLE</button>

If you press the button all of the expanded panels opens
simultaneously.

To open only one panel with one button, add a "expanded" property to the data array for each element like this:

  data = [
    {id:1, header:'HEADER 1', content:'CONTENT 1', expanded: false},
    {id:2, header:'HEADER 2', content:'CONTENT 2', expanded: false},
    {id:3, header:'HEADER 3', content:'CONTENT 3', expanded: false},
    {id:4, header:'HEADER 4', content:'CONTENT 4', expanded: false},
  ]

Then in your template:

<mat-expansion-panel [(ngModel)]="d.expanded" 
    [expanded]="d.expanded" *ngFor="let d of data" ngDefaultControl>

    <mat-expansion-panel-header>
        <button (click)="toggle(d.expanded)">TOGGLE</button>
        {{ d.header }}
    </mat-expansion-panel-header>
    <p>{{ d.content }}</p>

</mat-expansion-panel>

And the method raised by the button click:

  toggle(expanded) {
    expanded = !expanded;
  }

Open mat-expansion-panel ONLY when button is clicked

you need to add to your styles.css file the following code:

span.mat-expansion-indicator
{
   pointer-events: visiblefill !important; 
}

mat-expansion-panel-header 
{
   pointer-events: none;
}

Closing Angular Mat-Expansion Panel on Click

We can solve this by using two-way binding on the expanded attribute of mat-expansion-panel.

<mat-expansion-panel [(expanded)]="panelOpenState">
    <mat-expansion-panel-header>
    ...
    ...

How to expand mat-expansion-panel based on-click button in angular?

I have modified your code. You can check this mat-expansion example link

How to prevent toggling mat-expansion-panel by clicking mat-expansion-panel-header?

you can play with toggle function:

<mat-expansion-panel >
<mat-expansion-panel-header #panelH (click)="panelH._toggle()">
  <mat-panel-title>
   <i class="material-icons app-toolbar-menu" (click)="panelH._toggle()">menu </i>
  </mat-panel-title>
  <mat-panel-description>

  </mat-panel-description>
</mat-expansion-panel-header>

see stackblitz

Angular Material Expansion panel, expand only on button click

You can either:

1. Remove the click event handler completely. This works because the button catches the mouse click, while the rest of the panel doesn't since it has the pointer-events: none style attribute. The click event is then propagated to the panel, which toggles the expansion.

<button class="toggle-panel" mat-raised-button>

2. Call $event.stopPropagation() in the event handler, to prevent the panel from also receiving the click event, which would toggle the expansion back to its original state.

<button class="toggle-panel" (click)="$event.stopPropagation(); panel2.toggle()" ... >

See this stackblitz for a demo.

Angular Material expansion panel open fired by radio button

The condition [expanded]="step === 0" is right but MatExpansionPanel has a behavior that seems to override and toggle the expanded attribute upon click on the MatExpansionPanel, which seems logical for an accordion.

The only solution I found in order to disable this behavior is by adding [disabled]="true" on each <mat-expansion-panel> element :

<mat-expansion-panel id="panel2" [disabled]="true" [expanded]="step === 2">

Working StackBlitz here

Expand Panel Only on Icon Click - Angular Material

use stopPropation on my-panel div element. It will prevent expansion panel open when you click on anypart of the header.

<mat-accordion class="example-headers-align" multi>
      <!-- #enddocregion multi -->
      <mat-expansion-panel>
        <mat-expansion-panel-header>
          <div class="my-panel"  (click)="$event.stopPropagation();">
            <h3>Panel Header</h3>
     <button mat-stroked-button (click)="myButton()">my button</button>
          </div>
        </mat-expansion-panel-header>
    
        <div>My panel content!</div>
      </mat-expansion-panel>
  </mat-accordion>

Forked Working Example

---

Related Topics