Angular Material 7/8 | Add Expansion Panel/ Accordion in Angular project using Material

Accordion is an interactive component consisting of panels with headers and content section. These panels can be clicked to expand collapse to show description area.

We are very well familiar with jQuery UI library which was having a beautiful accordion component with a number of API options available.

In this tutorial, we will Implement Angular Material Accordion/ Expansion Panel component using the latest CLI and Material version 8.

Let’s start implementation.

Here we will create a new Angular 8 Project then Install Angular Material. You can skip and jump directly to intrusting part šŸ˜›

Create a new Angular Project

We will start with a new Angular project, using Angular CLI tool is very easy and quick to start with a project. The current version of Angular CLI isĀ  8.0.3

 

Add Angular Material in Project

To use Angular material, we need to install and configure an Angular project to use its components. let’s go through some quick steps to plug in.

Install packages

Run following NPM command to install @angular/material, @angular/material and @angular/material required as dependencies.

The version of material and dependencies should be at the same level, you can check the version of @angular/coreĀ in package.json if its something like 7.2.15Ā then install packages with @7 otherwise some console errors will creep in as shown below :\

Import BrowserAnimationsModule in Module

Angular Material is known for beautiful animations like ripple effects šŸ˜€ so just go to app’s main module file then import BrowserAnimationsModuleĀ then add in imports array.

Add Material Theme

Components used in the project are styles using CSS available in the material CSS theme file, so just add the following theme file link in styles.css available at the project root.

you can use any one of these available themes.

That’s it … we are done with Angular material configuration.

Implement Accordion/ Expansion Panel

To use specific Material components in Project, we need to import them in the app module. In app.module.ts file, import MatExpansionModule & MatButtonModule then add in imports array as shown below

Accordion Directives

Let’s discuss Acordian directives which are used in a template to build an Expansion Panel component.

Single Expansion Panel

Multiple Expansion Panels to create Accordion

We can optionally wrap multiple <mat-expansion-panel> in <mat-accordion>Ā to create an accordion.

 

Methods & Properties

Here are some important methods and properties available

<mat-accordion>Ā 

[multi]:Ā  If set to false only one panel can be opened at a time, others will close automatically. If set to true, multiple panels can be opened at the same time.
We can also access this directive using template reference variable to use openAll() & closeAll() when multi set to true, discuss later in this article.

<mat-expansion-panel>

[disabled]: Disable panel
[expanded]: Expand panel if set to true and collapse if set to false
[hideToggle]: Hide panel toggle indicator
(opened): Event fired when the panel is going to open/ Expand
(closed): Event fired when the panel is going to close/ Collapse
(afterCollapse): After completing the close/ collapse after the animation
(afterExpand): After completing the open/ expand & after the animation

Dynamic Accordion Template

Here is a dynamic accordion with expansion panels.

#accordion is the template variable to call directive methods like closeAll() & openAll()

*ngFor is iterating on panel items in MatAccordion

#mapanel is a template variable added at each panel to call methods available like close(), open() & toggle()

In accordionList object, we have boolean value to disable and set expand status. Methods available in the component are getting called from template directives.

Conclusion: Angular Material provides a number of components which are very easy to implement and less buggy these days. The accordion component is very common and quick to implement.

 

Leave a Reply

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