expansion-demo.html

<h1>Single Expansion Panel</h1>

<mat-expansion-panel class="demo-expansion-width" #myPanel
                     (afterExpand)="addEvent('afterExpand')"
                     (afterCollapse)="addEvent('afterCollapse')">
  <mat-expansion-panel-header [expandedHeight]="expandedHeight" [collapsedHeight]="collapsedHeight">
    <mat-panel-description>This is a panel description.</mat-panel-description>
    <mat-panel-title>Panel Title</mat-panel-title>
  </mat-expansion-panel-header>

  <ng-template matExpansionPanelContent>
    This is the content text that makes sense here.
    <mat-checkbox>Trigger a ripple</mat-checkbox>
  </ng-template>

  <mat-action-row>
    <button matButton (click)="myPanel.expanded = false">CANCEL</button>
    <button matButton>SAVE</button>
  </mat-action-row>
</mat-expansion-panel>

<br>
<mat-form-field>
  <mat-label>Collapsed height</mat-label>
  <input matInput [(ngModel)]="collapsedHeight">
</mat-form-field>

<mat-form-field>
  <mat-label>Expanded height</mat-label>
  <input matInput [(ngModel)]="expandedHeight">
</mat-form-field>
<br>

<p>Expansion Panel Animation Events</p>
<code class="demo-expansion-code">
  @for (event of events; track event) {
    <pre>{{event}}</pre>
  }
</code>

<h1>matAccordion</h1>
<div>
  <p>Accordion Options</p>
  <div>
    <mat-slide-toggle [(ngModel)]="multi">Allow Multi Expansion</mat-slide-toggle>
    <mat-slide-toggle [(ngModel)]="hideToggle">Hide Indicators</mat-slide-toggle>
    <mat-slide-toggle [(ngModel)]="disabled">Disable Panel 2</mat-slide-toggle>
    <mat-slide-toggle [(ngModel)]="showPanel3">Show Panel 3</mat-slide-toggle>
  </div>
  <p>Accordion Style</p>
  <mat-radio-group [(ngModel)]="displayMode">
    <mat-radio-button value="default">Default</mat-radio-button>
    <mat-radio-button value="flat">Flat</mat-radio-button>
  </mat-radio-group>

  <p>Toggle Position</p>
  <mat-radio-group [(ngModel)]="togglePosition">
    <mat-radio-button value="before">Before</mat-radio-button>
    <mat-radio-button value="after">After</mat-radio-button>
  </mat-radio-group>
  <p>Accordion Actions <sup>('Multi Expansion' mode only)</sup></p>
  <div>
    <button matButton (click)="accordion.openAll()" [disabled]="!multi">Expand All</button>
    <button matButton (click)="accordion.closeAll()" [disabled]="!multi">Collapse All</button>
  </div>
  <p>Accordion Panel(s)</p>
  <div>
    <mat-checkbox [(ngModel)]="panel1.expanded">Panel 1</mat-checkbox>
    <mat-checkbox [(ngModel)]="panel2.expanded">Panel 2</mat-checkbox>
  </div>
</div>
<br>
<mat-accordion [displayMode]="displayMode" [multi]="multi" [hideToggle]="hideToggle"
               [togglePosition]="togglePosition" class="demo-expansion-width">
  <mat-expansion-panel #panel1>
    <mat-expansion-panel-header>Section 1</mat-expansion-panel-header>
    <p>This is the content text that makes sense here.</p>
  </mat-expansion-panel>
  <mat-expansion-panel #panel2 [disabled]="disabled">
    <mat-expansion-panel-header>Section 2</mat-expansion-panel-header>
    <p>This is the content text that makes sense here.</p>
  </mat-expansion-panel>
  @if (showPanel3) {
    <mat-expansion-panel #panel3>
      <mat-expansion-panel-header>Section 3</mat-expansion-panel-header>
      <mat-checkbox #showButtons>Reveal Buttons Below</mat-checkbox>
      @if (showButtons.checked) {
        <mat-action-row>
          <button matButton (click)="panel2.expanded = true">OPEN SECTION 2</button>
          <button matButton (click)="panel3.expanded = false">CLOSE</button>
        </mat-action-row>
      }
    </mat-expansion-panel>
  }
</mat-accordion>

<h1>cdkAccordion</h1>
<div>
  <p>Accordion Options</p>
  <div>
    <mat-slide-toggle [(ngModel)]="accordion1.multi">Allow Multi Expansion</mat-slide-toggle>
  </div>
</div>
<cdk-accordion class="demo-expansion-width" #accordion1="cdkAccordion">
  <cdk-accordion-item #item1="cdkAccordionItem">
    <p>
      Item 1:
      <button matButton (click)="item1.expanded = true">Expand</button>
      <button matButton (click)="item1.expanded = false">Collapse</button>
    </p>
    @if (item1.expanded) {
      <p>I only show if item 1 is expanded</p>
    }
  </cdk-accordion-item>
  <cdk-accordion-item #item2="cdkAccordionItem">
    <p>
      Item 2:
      <button matButton (click)="item2.expanded = true">Expand</button>
      <button matButton (click)="item2.expanded = false">Collapse</button>
    </p>
    @if (item2.expanded) {
      <p>I only show if item 2 is expanded</p>
    }
  </cdk-accordion-item>
  <cdk-accordion-item #item3="cdkAccordionItem">
    <p>
      Item 3:
      <button matButton (click)="item3.expanded = true">Expand</button>
      <button matButton (click)="item3.expanded = false">Collapse</button>
    </p>
    @if (item3.expanded) {
      <p>I only show if item 3 is expanded</p>
    }
  </cdk-accordion-item>
</cdk-accordion>