How to implement a directive that toggles element visibility with animations

Question

Can you tell me How to implement a directive that toggles element visibility with animations?

Answer 1

Custom Directive with Angular Animations

1. Define the Animation

import {

  trigger,

  state,

  style,

  transition,

  animate

} from '@angular/animations';

export const toggleAnimation = trigger('toggleVisibility', [

  state('visible', style({ opacity: 1, height: '*' })),

  state('hidden', style({ opacity: 0, height: '0px', overflow: 'hidden' })),

  transition('visible <=> hidden', [animate('300ms ease-in-out')])

]);

2. Create the Directive

import {

  Directive,

  HostBinding,

  Input

} from '@angular/core';

@Directive({

  selector: '[appToggleVisibility]',

  animations: [toggleAnimation]

})

export class ToggleVisibilityDirective {

  @Input('appToggleVisibility') set toggle(state: boolean) {

    this.visibilityState = state ? 'visible' : 'hidden';

  }

  @HostBinding('@toggleVisibility') visibilityState = 'visible';

}

3. Use in HTML

<div [appToggleVisibility]="isShown">

  This content will fade in and out

</div>

<button (click)="isShown = !isShown">Toggle</button>