Creating an Angular Material Expansion Indicator Animation

Scenario

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.

Approach

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

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

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" 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: [
trigger('animationTrigger',
[state('expanded',
style({
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.

[@animationTrigger]="state"

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.

Demo

--

--

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