Expandable component with animation for Angular 10

expandable.component.html

<div class="expandable">
  <div class="expandable__header" (click)="toggleExpended(departmentFilterContent)">
    <ng-content select="[expandableHeader]"></ng-content>
    <mat-icon class="expand-icon" mat-list-icon [@rotate]="isExpended(departmentFilterContent)">expand_more</mat-icon>
  </div>
  <div class="expandable__content" #departmentFilterContent [@expand]="isExpended(departmentFilterContent)">
    <ng-content select="[expandableContent]"></ng-content>
  </div>
</div>

expandable.component.scss

.expandable {
  display: flex;
  flex-direction: column;
  &__header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    cursor: pointer;
    .expand-icon {
      margin-left: auto;
      color: black;
    }
  }
  &__content {
    overflow: hidden;
  }
}

expandable.component.ts

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

@Component({
  selector: 'bob-expandable',
  templateUrl: './expandable.component.html',
  styleUrls: ['./expandable.component.scss'],
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
  animations: [
    trigger('expand', [
      state('false', style({ height: '0' })),
      state('true', style({ height: AUTO_STYLE })),
      transition('false => true', animate('300ms ease-in')),
      transition('true => false', animate('300ms ease-out'))
    ]),
    trigger('rotate', [
      state('false', style({ transform: 'rotate(0)' })),
      state('true', style({ transform: 'rotate(-180deg)' })),
      transition('false => true', animate('300ms ease-out')),
      transition('true => false', animate('300ms ease-in'))
    ])
  ]
})
export class ExpandableComponent implements OnInit {


  constructor() {}

  ngOnInit(): void {
  }

  isExpended(htmlElement: HTMLElement) {
    return htmlElement?.classList?.contains('expended');
  }

  toggleExpended(htmlElement: HTMLElement) {
    if (!!this.isExpended(htmlElement)) {
      htmlElement.classList?.remove('expended')
    } else {
      htmlElement.classList?.add('expended')
    }
  }
}