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
This header might include an
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.
-
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.
-
Set up global Angular Material typography styles:
Whether to apply the global typography styles to your application.
-
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.