Angular Material 13 expansion panel example. In this quick guide, you will learn how to easily create expansion panel component in the Angular application. To build the expansion panel in angular we will take help of Angular material user interface library.

We will aslo cover from absolute scratch how to implement accordion expansion panel in angular using the material design UI package.

Angular Material offers MatExpansionModule module that allows you to make expansion panel, you have to import this module from the ‘@angular/material/expansion’ library.

The expansion panel contains the header directive and the action bar directive.

The displays a summary of the panel content and serves as the control for expanding and collapsing.

This header might include an and an , that structure the content of the header to align with Material Design specifications.

Let us find out how to combine all the element to form the expansion panel in angular.

How to Add Expansion Panel or Accordion in Angular using Angular Material Pacakage

• Step 1: Set Up Angular App
• Step 2: Install Angular Material Package
• Step 3: Build Material Modules File
• Step 4: Create Basic Expansion Panel Component
• Step 5: Build Accordion Expansion Panel
• Step 6: View on Browser

Set Up Angular App

Run the provided command to install the latest Angular CLI, it is required for angular web application development.

npm install -g @angular/cli

Execute the suggested command to create a new angular demo applicaiton.

ng new ng-material-demo

Step inside the application folder using the given command:

cd ng-material-demo

Disable Strict Angular TypeStrict Errors

The latest version of Angular comes with strict mode, therefore, you need to update the compilerOptions and angularCompilerOptions in tsconfig.json file for disabling the strict mode:

{
   “strict”: false, 
   "noImplicitReturns": false 
   "strictTemplates": false
}

Install Angular Material Package

In order to add the material library in your angular project, you will need to execute the given command from the console.

ng add @angular/material

From your terminal you have to select the following options from the given question.

1. Choose a prebuilt theme name or “custom” for a custom theme:

   You can choose from prebuilt material design themes or set up an extensible custom theme.

2. Set up global Angular Material typography styles:

   Whether to apply the global typography styles to your application.
3. Set up browser animations for Angular Material:

   Importing the BrowserAnimationsModule into your application enables Angular’s animation system. Declining this will disable most of Angular Material’s animations.

You have to now add the material theme CSS link in the src/styles.scss file:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Build Material Modules File

To create expansion panels or accordion panels, we need only MatExpansionModule, but we will add all the UI material modules in material module file.

Open src/ directory, inside here create material.module.ts file and paste all the given code into the file.

import { NgModule } from '@angular/core';
import { A11yModule } from '@angular/cdk/a11y';
import { CdkAccordionModule } from '@angular/cdk/accordion';
import { ClipboardModule } from '@angular/cdk/clipboard';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { PortalModule } from '@angular/cdk/portal';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { CdkStepperModule } from '@angular/cdk/stepper';
import { CdkTableModule } from '@angular/cdk/table';
import { CdkTreeModule } from '@angular/cdk/tree';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatBadgeModule } from '@angular/material/badge';
import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatChipsModule } from '@angular/material/chips';
import { MatStepperModule } from '@angular/material/stepper';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatDialogModule } from '@angular/material/dialog';
import { MatDividerModule } from '@angular/material/divider';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatListModule } from '@angular/material/list';
import { MatMenuModule } from '@angular/material/menu';
import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatSliderModule } from '@angular/material/slider';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatTreeModule } from '@angular/material/tree';
import { OverlayModule } from '@angular/cdk/overlay';

@NgModule({
  exports: [
    A11yModule,
    CdkAccordionModule,
    ClipboardModule,
    CdkStepperModule,
    CdkTableModule,
    CdkTreeModule,
    DragDropModule,
    MatAutocompleteModule,
    MatBadgeModule,
    MatBottomSheetModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatStepperModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
    MatTreeModule,
    OverlayModule,
    PortalModule,
    ScrollingModule,
  ],
})

export class MaterialModule {}

Head over to app/app.module.ts file, open the file and start importing CUSTOM_ELEMENTS_SCHEMA, FormsModule, ReactiveFormsModule and MaterialModule modules.

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MaterialModule } from '../material.module';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    MaterialModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})

export class AppModule {}

Create Basic Expansion Panel Component

Head over to app.component.html file, in this file you have to use the mat-accordion directive as the main wrapper to establish the expansion panel module in angular app.

<mat-accordion>
  <mat-expansion-panel hideToggle>
    <mat-expansion-panel-header>
      <mat-panel-title> This is the expansion title </mat-panel-title>
      <mat-panel-description>
        A brief summary of the content
      </mat-panel-description>
    </mat-expansion-panel-header>
    <p>This is the main 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 appeared because I am evoked</p>
  </mat-expansion-panel>
</mat-accordion>

Update the code in the app.component.ts file.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})

export class AppComponent {
  panelOpenState = false;
}

Build Accordion Expansion Panel

To create the expansion accordion add the given code inside the app.component.html file.

<mat-accordion class="example-headers-align">
  <mat-expansion-panel [expanded]="step === 0" (opened)="setStep(0)" hideToggle>
    <mat-expansion-panel-header>
      <mat-panel-title> Personal data </mat-panel-title>
      <mat-panel-description>
        Type the name and age
        <mat-icon>account_circle</mat-icon>
      </mat-panel-description>
    </mat-expansion-panel-header>

    <mat-form-field appearance="fill">
      <mat-label>First name</mat-label>
      <input matInput />
    </mat-form-field>

    <mat-form-field appearance="fill">
      <mat-label>Age</mat-label>
      <input matInput type="number" min="1" />
    </mat-form-field>
    <mat-action-row>
      <button mat-button color="primary" (click)="nextStep()">Next</button>
    </mat-action-row>
  </mat-expansion-panel>

  <mat-expansion-panel [expanded]="step === 1" (opened)="setStep(1)" hideToggle>
    <mat-expansion-panel-header>
      <mat-panel-title> Destination </mat-panel-title>
      <mat-panel-description>
        Country name
        <mat-icon>map</mat-icon>
      </mat-panel-description>
    </mat-expansion-panel-header>

    <mat-form-field appearance="fill">
      <mat-label>Country</mat-label>
      <input matInput />
    </mat-form-field>

    <mat-action-row>
      <button mat-button color="warn" (click)="prevStep()">Previous</button>
      <button mat-button color="primary" (click)="nextStep()">Next</button>
    </mat-action-row>
  </mat-expansion-panel>

  <mat-expansion-panel [expanded]="step === 2" (opened)="setStep(2)" hideToggle>
    <mat-expansion-panel-header>
      <mat-panel-title> Day of the trip </mat-panel-title>
      <mat-panel-description>
        Inform the date you wish to travel
        <mat-icon>date_range</mat-icon>
      </mat-panel-description>
    </mat-expansion-panel-header>

    <mat-form-field appearance="fill">
      <mat-label>Date</mat-label>
      <input
        matInput
        [matDatepicker]="picker"
        (focus)="picker.open()"
        readonly
      />
    </mat-form-field>
    <mat-datepicker #picker></mat-datepicker>

    <mat-action-row>
      <button mat-button color="warn" (click)="prevStep()">Previous</button>
      <button mat-button color="primary" (click)="nextStep()">End</button>
    </mat-action-row>
  </mat-expansion-panel>
</mat-accordion>

Define couple of functions inside the app.component.ts file.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  step = 0;

  setStep(index: number) {
    this.step = index;
  }

  nextStep() {
    this.step++;
  }

  prevStep() {
    this.step--;
  }
}

View on Browser

Eventually, we are ready to run the angular app, go to terminal screen type the given command and hit enter to run the development server.

ng serve

Use the given url to open the application on the browser:

http://localhost:4200

Conclusion

This tutorial has ascertained how to quickly implement an angular material expansion panel in an angular component and create a handy and user-friendly accordion panel. It allows us to fit multiple contents in a limited window of expansion panel.