[Angular Material] Expansion-panel 用法小記錄

實現個別開啟個別關閉又可以全部開啟全部關閉

以下範例是3個可以可以伸縮的框框



主要屬性是這兩個
<mat-accordion #accordion="matAccordion" [multi]="true">

再配上給的方法放在button上
(click)="accordion.openAll()"
(click)="accordion.closeAll()"



TS檔

export class Sc2AccountFeaturesSettingComponent implements OnInit {

panelOpenState1 = false;

panelOpenState2 = false;

panelOpenState3 = false;

}

HTML檔

<button mat-raised-button color="primary" (click)="accordion.openAll()">

全部展開

</button>

<button mat-raised-button color="primary" (click)="accordion.closeAll()">

全部收合

</button>

<mat-accordion #accordion="matAccordion" [multi]="true">

<mat-expansion-panel

(opened)="panelOpenState1 = true"

(closed)="panelOpenState1 = false"

>

<mat-expansion-panel-header>

<mat-panel-title>

AAAAA

</mat-panel-title>

<mat-panel-description fxLayoutAlign="end start">

{{ panelOpenState1 ? '收合' : '展開' }}

</mat-panel-description>

</mat-expansion-panel-header>

<p>aaaaaa</p>

</mat-expansion-panel>

<mat-expansion-panel

(opened)="panelOpenState2 = true"

(closed)="panelOpenState2 = false"

>

<mat-expansion-panel-header>

<mat-panel-title>

BBBBBB

</mat-panel-title>

<mat-panel-description fxLayoutAlign="end start">

{{ panelOpenState2 ? '收合' : '展開' }}

</mat-panel-description>

</mat-expansion-panel-header>

<p>bbbbbb</p>

</mat-expansion-panel>

<mat-expansion-panel

(opened)="panelOpenState3 = true"

(closed)="panelOpenState3 = false"

>

<mat-expansion-panel-header>

<mat-panel-title>

CCCCCC

</mat-panel-title>

<mat-panel-description fxLayoutAlign="end start">

{{ panelOpenState3 ? '收合' : '展開' }}

</mat-panel-description>

</mat-expansion-panel-header>

<p>cccccc</p>

</mat-expansion-panel>

</mat-accordion>