How can I open multi-panel using Expansion panel of angular material?-CodePudding

I want to use expansion panel in result i want to open multi-panels, like this example : open example

here is it my code:

<mat-accordion>
  <mat-expansion-panel hideToggle>
    <mat-expansion-panel-header>
      <mat-panel-title>
        This is the expansion title
      </mat-panel-title>
      <mat-panel-description>
        This is a summary of the content
      </mat-panel-description>
    </mat-expansion-panel-header>
    <p>This is the primary content of the panel.</p>
  </mat-expansion-panel>
  <mat-expansion-panel (opened)="panelOpenState = true"
                       (closed)="panelOpenState = false">
    <mat-expansion-panel-header>
      <mat-panel-title>
        Self aware panel
      </mat-panel-title>
      <mat-panel-description>
        Currently I am {{panelOpenState ? 'open' : 'closed'}}
      </mat-panel-description>
    </mat-expansion-panel-header>
    <p>I'm visible because I am open</p>
  </mat-expansion-panel>
</mat-accordion>

CodePudding user response：

Please consider the following stackblitz

Adding hideToggle disabled on the children expansion panels helped match the linked picture, two mat-accordions were used with the second having the multi attribute to allow having multiple panels opens

<mat-accordion>
  <mat-expansion-panel class="parentPanel" [expanded]="true">
    <mat-expansion-panel-header class="parentPanel_header">
      <mat-panel-title> Group </mat-panel-title>
    </mat-expansion-panel-header>
    <mat-accordion multi>
      <mat-expansion-panel class="childPanel childPanelCount" [expanded]="true" hideToggle disabled>
        <p>Elements count {{elements.length}}</p>
      </mat-expansion-panel>
      <ng-container *ngFor="let i of elements">
        <mat-expansion-panel class="childPanel" [expanded]="true" hideToggle disabled>
          <p>Element</p>
        </mat-expansion-panel>
      </ng-container>
    </mat-accordion>
  </mat-expansion-panel>
</mat-accordion>

Some css was required to achieve a matching look, although this is not a css question

mat-expansion-panel.parentPanel {
  box-shadow: none;
  background-color: transparent;
}
.parentPanel_header {
  background-color: white;
  border: 1px solid lightgray;
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}
.childPanelCount{
  opacity: 50%;
}

.parentPanel mat-expansion-panel.childPanel {
  margin-top: 1em !important;
}

::ng-deep .childPanel div.mat-expansion-panel-body {
  padding-bottom: 0 !important;
}