Creating an Angular Material Expansion Indicator Animation


We are creating a custom expansion panel and we want to animate aexpand_circle_down material icon such that it rotates 180 degrees over 300 milliseconds when the panel is expanded and collapsed.


Create a new Stackblitz and add @angular/material as a dependency.

Also within index.html add the material icons CDN link.

<link href="" rel="stylesheet"/>

Next replace the app.component.ts implementation with this.

Within the template we have added the icon we wish to animate.

The @animationTrigger property assignment points to our animation state.

<mat-icon  [@animationTrigger]="state"  aria-hidden="false"  aria-label="Chevron Animation"  >expand_circle_down</mat-icon>

The animation state getter returns expanded or collapsed depending on the value of the isExpanded property.

get state(): string {
return this.isExpanded ? 'expanded' : 'collapsed';

The Angular Animation API is used to setup the animations definition within the @Component declaration.

animations: [
transform: 'rotate(180deg)',
transition('collapsed => expanded',
animate('300ms ease-in')),
transition('expanded => collapsed',
animate('300ms ease-out')), ]),

Note that the animationTrigger is what we added to the mat-icon @animation property in order to trigger the animation.


The @HostListener('click') decoration on the toggle() method causes the toggle() to fire whenever the user clicks on the icon, and this updates the state triggering the animation.




Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ole Ersoy

Ole Ersoy

Founder of Firefly Semantics Corporation