Hide Angular element from dom with Angular animations

hide-angular-component.ts

@Component({
  animations: [
    trigger('visible', [
      state(
        'false',
        style({
          height: '0',
          display: 'none',
        })
      ),
      transition('* => false', [
        animate(
          '100ms',
          keyframes([
            style({ height: '*', offset: 0 }),
            style({ height: '0', 'padding-block': '0', offset: 1 }),
          ])
        ),
      ]),
    ]),
  ],
})
export class Component {
  @HostBinding('@visible')
  visible = true

  close(): void {
    this.visible = false
  }
}