Bdtjtk

Am I able to control, hence open/close individual panels by an assigned Id using the Material accordion, https://material.angular.io/components/expansion/overview#accordion.

Okay, I tried a solution, StackBlitz HERE.

I've not find a way to use an ID for panel control, but you can use a variable.
Here, I use activePanel which takes a value depending on the event (1 for the button_1, 2 for the button_2, ...).

<button mat-raised-button (click)="activePanel = 1">Open 1</button>

<button mat-raised-button (click)="activePanel = 2">Open 2</button>

<button mat-raised-button (click)="activePanel = 3">Open 3</button>

In your panel you use the function ngOnChanges which will open the panel according to your variable.

ngOnChanges() {

    if(this.panelState2 == 2) {this.panelState = true;}

    else {this.panelState = false;}

}

The panelState variable is a boolean to open or close your panel with [expanded].

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

  <mat-expansion-panel-header>

    <mat-panel-title>

      Title Panel

    </mat-panel-title>

  </mat-expansion-panel-header>

  <p>Accedat huc suavitas quaedam oportet sermonum atque morum,...</p>

</mat-expansion-panel>

I hope this will help you.

DEMO:

Ok, so I tried another solution, StackBlitz HERE.

This time I managed to use an ID for panel control.
Here, I use a unique ID on each mat-expansion-panel (#first for the panel_1, #second for the panel_2, ...).

<mat-accordion multi="true">

  <mat-expansion-panel #first></mat-expansion-panel>

  <mat-expansion-panel #second></mat-expansion-panel>

  <mat-expansion-panel #third></mat-expansion-panel>

</mat-accordion>

I also used buttons to control these panels without interacting with them.

<button mat-raised-button (click)="changeState1()">ON/OFF Panel_1</button>

<button mat-raised-button (click)="changeState2()">ON/OFF Panel_2</button>

<button mat-raised-button (click)="changeState3()">ON/OFF Panel_3</button>

In your TypeScript code, you use @ViewChild to retrieve the panel ID so you can control it.

@ViewChild('first') first: MatExpansionPanel;

@ViewChild('second') second: MatExpansionPanel;

@ViewChild('third') third: MatExpansionPanel;

Then, I created functions to open one to close the mat-expansion-panel according to its ID and according to its state.

changeState1() {

  if(this.first.expanded){

    this.first.close();

  } else {

    this.first.open();

  }

}



changeState2() {...}

PS: <mat-accordion multi="true"> allows multiple panels to open simultaneously.

DEMO: