Is there a way in which I can make my mat-expansion-panel open ONLY WHEN I click a certain button?

I am thinking of having a list of info that I can click an edit icon on, which would cause the expansion to happen revealing the edit options...

Of course, I do not want the panel to expand when clicking randomly on the row, but only on the edit icon...

Is there a way in which I can make my mat-expansion-panel open ONLY WHEN I click a certain button?

I am thinking of having a list of info that I can click an edit icon on, which would cause the expansion to happen revealing the edit options...

Of course, I do not want the panel to expand when clicking randomly on the row, but only on the edit icon...

• javascript
• html
• angular
• typescript
• angular-material

2 Answers 2

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;
}

#HTML CODE:

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

<mat-expansion-panel-header>
    <mat-panel-title>
        Edit
    </mat-panel-title>
</mat-expansion-panel-header>
<p>Edit Body</p>
</mat-expansion-panel>

<button (click)="togglePanel()">Edit</button>

#TS CODE:

panelOpenState: boolean = false;

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