Expansion Panel In Angular Material

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

Introduction:

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.

<mat-panel-title>:

It is used to display the panel’s title.

<mat-panel-description>:

It is used to represents the panel summary.

<mat-expansion-panel-header>:

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

<mat-action-row>:

Represents the actions panel at the bottom.

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

<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>
  <p>Register your name & age</p>
  <mat-form-field>
     <input matInput placeholder="Name">
  </mat-form-field>
  <mat-form-field>
     <input matInput placeholder="Age">
  </mat-form-field>
</mat-expansion-panel>

app.module.ts

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatExpansionModule,
    MatInputModule,
    FormsModule,
    ReactiveFormsModule,
    
  ],
  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.

Conclusion:

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.