Angular Material expansion panel | mat-expansion-panel code


In this tutorials, You will learn material expansion implementation in angular application using material library.

Expansion panel is an interactive UI component rendered either collapsed or expanded state.

The expansion panel can be triggered using mouse click or keyboard interactions

Angular material expansion panel provides different components

import MatExpansionModule into angular application root module

angular material provides expansion panel to view the content in expanded view of an panel.

Material provides MatExpansionModule module which you need to import into angular project.

Here app.module.ts is root module, imported into it and it is available across all components

import {MatExpansionModule} from '@angular/material/expansion';

app.module.ts file

import {MatExpansionModule} from '@angular/material/expansion';


@NgModule({
  imports:      [ MatExpansionModule],
  declarations: [ AppComponent,BasicExpansionPanelComponent],
  bootstrap:    [ AppComponent ],
  providers:[],
  exports:[]
})
export class AppModule { }

Basic Angular material expansion component example

This example contains expansion panels, one of the panel contains material input form and other is a just description.

Create a basic component basic-expansion-component.html basic-expansion-component.html:

<mat-expansion-panel>
  <mat-expansion-panel-header>
    <mat-panel-title>
      Basic Form
    </mat-panel-title>
    <mat-panel-description>
      Enter Details
    </mat-panel-description>
  </mat-expansion-panel-header>

  <mat-form-field>
    <mat-label>Name</mat-label>
    <input matInput>
  </mat-form-field>

  <mat-form-field>
    <mat-label>phone</mat-label>
    <input matInput type="number" min="1">
  </mat-form-field>
</mat-expansion-panel>
<mat-expansion-panel>
  <mat-expansion-panel-header>
    <mat-panel-title>
      Second panel
    </mat-panel-title>
    <mat-panel-description>
      panel description </mat-panel-description>
  </mat-expansion-panel-header>
  <p>This is second panel</p>
</mat-expansion-panel>

Steps to use expansion component in angular component

  • mat-expansion-panel is a root element defaults collapsed state, on clicking it shows detailed view
  • It contains nested child element mat-expansion-panel-header which is header element
  • header panel contains mat-panel-title and mat-panel-description
  • Next element to mat-expansion-panel-header contains expansion panel content
  • expansion panel are optionally enclosed in mat-accordion

This

Angular expansion panel examples

adding material list to Expansion panel

expansion panel can also included in material navigation list. This expansion panel contains material list items -mat-list-item

<mat-nav-list>
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      Menu
    </mat-expansion-panel-header>

    <a mat-list-item >Menu 1</a>
    <a mat-list-item >Menu 2</a>
  </mat-expansion-panel>
</mat-nav-list>

dynamic angular material expansion panel example

Dynamic expansion components are created with ngFor loop

Created a array of books in Angular component which contains title and description

  public books: Array<any> = [
    { title: "book1", description: "book desc 1" },
    { title: "book2", description: "book desc 2" },
    { title: "book3", description: "book desc 3" },
    { title: "book4", description: "book desc 4 " }
  ];

using ngFor Directive iterated and constructed expansion panel with title and description intitaled with array object.

expansion panel list is wrapped inside mat-accordion

<mat-accordion>
  <mat-expansion-panel *ngFor="let book of books;">
    <mat-expansion-panel-header>
      <mat-panel-title>{{book.title}}</mat-panel-title>
      <mat-panel-description>{{book.description}}</mat-panel-description>
    </mat-expansion-panel-header>
    {{book.title}}
  </mat-expansion-panel>
</mat-accordion>

Output: Angular dynamic expansion panel examples

Display expansion panel

There is a disabled attribute set to true for mat-expansion-panel

This will disables

<mat-expansion-panel [disabled]="true">
  <mat-expansion-panel-header>
    <mat-panel-title>
      Basic Form
    </mat-panel-title>
    <mat-panel-description>
      Enter Details
    </mat-panel-description>
  </mat-expansion-panel-header>

  <mat-form-field>
    <mat-label>Name</mat-label>
    <input matInput>
  </mat-form-field>

  <mat-form-field>
    <mat-label>phone</mat-label>
    <input matInput type="number" min="1">
  </mat-form-field>
</mat-expansion-panel>
<mat-expansion-panel>
  <mat-expansion-panel-header>
    <mat-panel-title>
      Second panel
    </mat-panel-title>
    <mat-panel-description>
      panel description </mat-panel-description>
  </mat-expansion-panel-header>
  <p>This is second panel</p>
</mat-expansion-panel>
Angular dynamic expansion panel examples

Open By default expansion panel toggle in angular

Below is an example of expanding/collapse programmatically expansion panel.

mat-expansion-panel provides opened and closed events which evaluates to true or false and executes expand or collapased based on boolean value

<mat-expansion-panel (opened)="isOpened = true"
                       (closed)="isOpened = false">
  <mat-expansion-panel-header>
    <mat-panel-title>
      Basic Form
    </mat-panel-title>
    <mat-panel-description>
      Enter Details
    </mat-panel-description>
  </mat-expansion-panel-header>

  <mat-form-field>
    <mat-label>Name</mat-label>
    <input matInput>
  </mat-form-field>

  <mat-form-field>
    <mat-label>phone</mat-label>
    <input matInput type="number" min="1">
  </mat-form-field>
</mat-expansion-panel>
<mat-expansion-panel>
  <mat-expansion-panel-header>
    <mat-panel-title>
      Second panel
    </mat-panel-title>
    <mat-panel-description>
      panel description </mat-panel-description>
  </mat-expansion-panel-header>
  <p>This is second panel</p>
</mat-expansion-panel>

In Angular typescript component Initilize isOpened boolean value to true This will expand the first panel by default

export class ExpandExpansionComponentComponent implements OnInit {
  isOpened = true;

  constructor() {}

  ngOnInit() {}
}

Below example, you can use button click event to set true or false to expand/collapse toggle functionality in expansion panel

Button click toggle expansion panel

This example expands and collapses expansion panel on button click

Here is an angular template component

<mat-expansion-panel [expanded]="isOpen">

  <mat-expansion-panel-header>
    <mat-panel-title>
      Panel Header Title
    </mat-panel-title>
  </mat-expansion-panel-header>

  <p>Panel Body</p>
</mat-expansion-panel>

<button mat-raised-button (click)="toggleExpansion">Toggle</button>

In typescript angular component, Added boolean variable isOpen with false, that means panel is collapsed by default. Created button event handler with changing isOpen value to inverse of existing value

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  isOpen: boolean = false;

  toggleExpansion() {
    this.isOpen = !this.isOpen;
  }

  constructor() {}
}
THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.