app.component.ts

import {
  Component,
  ChangeDetectionStrategy,
  HostListener,
} from '@angular/core';
import {
  trigger,
  state,
  style,
  animate,
  transition,
} from '@angular/animations';

@Component({
  selector: 'my-app',
  template: `<mat-icon
  [@animationTrigger]="state"
  aria-hidden="false"
  aria-label="Chevron Animation"
  >expand_circle_down</mat-icon>
`,
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('animationTrigger', [
      state(
        'expanded',
        style({
          transform: 'rotate(180deg)',
        })
      ),
      transition('collapsed => expanded', animate('300ms ease-in')),
      transition('expanded => collapsed', animate('300ms ease-out')),
    ]),
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent {
  public isExpanded = false;
  @HostListener('click')
  @HostListener('keydown.enter')
  @HostListener('keydown.space')
  public toggle() {
    this.isExpanded = !this.isExpanded;
  }

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