Expansion Panel In Angular Material

This chapter will demonstrate how to use Angular Material to create an expansion control.


The Angular Material library is a user interface component library created by the Angular team to create design components for desktop and mobile web applications.

<mat-expansion-panel> tag is a type of dropdown that has the ability to collapse and expand.

To utilize mat-expansion-panel> in an Angular application, follow the instructions below.

  1. First, run the command below to install the angular material.ng add @angular/material
  2. Import ‘MatExpansionModule’ from ‘@angular/material/expansion’ in the app.module.ts file after finishing the installation.
  3. The <mat-accordion> tag should then be used as a parent tag for the <mat-expansion-panel> tag.
  4. We must use the <mat-expansion-panel> tag for each item within the <mat-accordion> tag.


It is used to display the panel’s title.


It is used to represents the panel summary.


The header section is shown here. It works as a control to expand or collapse the panel and contains a summary of the panel.


Represents the actions panel at the bottom.

Copy the code and paste it to app.component.html file.

        Personal data
        Type name and age
  <p>Register your name & age</p>
     <input matInput placeholder="Name">
     <input matInput placeholder="Age">


import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatInputModule} from '@angular/material/input' 
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';

  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

First, we used mat-expansion-panel to make an expansion panel.

After that, we added the title, subtitle, and content.


Angular Material offers a number of components that are both simple to use and less buggy. The accordion component is quite frequent and simple to use.

Submit a Comment

Your email address will not be published. Required fields are marked *


Select Categories