Angular Material Expansion Panel

<mat-expansion-panel> provides an expandable summary view.

The <mat-expansion-panel>, an Angular Directive, is used to create an expandable detail v/s summary view.

<mat-expansion-panel-header>− Represents the header section. Contains summary of panel and acts as control to expand or collapse the panel.
<mat-panel-title>− Represents the panel title.
<mat-panel-description>− Represents the panel summary.
<mat-action-row>− Represents the actions panel at the bottom.

app.component.html

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

app.component.ts

import {Component} from '@angular/core';

/**
 * @title Basic expansion panel
 */
@Component({
  selector: 'expansion-overview-example',
  templateUrl: 'expansion-overview-example.html',
  styleUrls: ['expansion-overview-example.css'],
})
export class ExpansionOverviewExample {
  panelOpenState = false;
}

app.component.css

.mat-form-field + .mat-form-field {
  margin-left: 8px;
}

Output:

Expansion-panel content

Header

The <mat-expansion-panel-header> shows a summary of the panel content and acts as the control for expanding and collapsing. This header may optionally contain an <mat-panel-title> and an <mat-panel-description>, which format the content of the header to align with Material Design specifications.

<mat-expansion-panel hideToggle>
  <mat-expansion-panel-header>
    <mat-panel-title>
      This is the expansion title
    </mat-panel-title>
    <mat-panel-description>

It 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>

By default, the expansion-panel header includes a toggle icon at the end of the header to indicate the expansion state. This icon can be hidden via the hideToggle property.

Action bar

Actions may optionally be included at the bottom of the panel, visible only when the expansion is in its expanded state.

<mat-action-row>
  <button mat-button color="primary" (click)="nextStep()">Next</button>
</mat-action-row>

Disabling a panel

Expansion panels can be disabled using the disabled attribute. A disabled expansion panel can't be toggled by the user but can still be manipulated programmatically.

Accordion

Multiple expansion panels can be combined into an accordion. The multi="true" input allows the expansions state to be set independently of each other. When multi="false" (default), just one panel can be expanded at a given time:

Lazy rendering

By default, the expansion panel content will be initialized even when the panel is closed. To instead defer initialization until the panel is open, the content should be provided as an ng-template:

<mat-expansion-panel>
  <mat-expansion-panel-header>
    This is the expansion title
  </mat-expansion-panel-header>

  <ng-template matExpansionPanelContent>

Some deferred content

  </ng-template>
</mat-expansion-panel>

Accessibility

The expansion-panel aims to mimic the experience of the native <details> and <summary> elements. The expansion panel header has role="button" and also the attribute aria-controls with the expansion panel's id as the value.

The expansion panel headers are buttons. Users can use the keyboard to activate the expansion panel header to switch between an expanded state and collapsed state. Because the header acts as a button, additional interactive elements should not be put inside the header.

Example:

Following is the content of the modified module descriptor app.module.ts.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatExpansionModule, MatInputModule} from '@angular/material'
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatExpansionModule, MatInputModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

Following is the content of the modified HTML host file app.component.html.

<mat-expansion-panel>
   <mat-expansion-panel-header>
      <mat-panel-title>
         Personal data
      </mat-panel-title>
      <mat-panel-description>
         Type name and age
      </mat-panel-description>
   </mat-expansion-panel-header>
   <mat-form-field>
      <input matInput placeholder="Name">
   </mat-form-field>
   <mat-form-field>
      <input matInput placeholder="Age">
   </mat-form-field>
</mat-expansion-panel>

Output: