IfAnimateDirective

Directive for showing and hiding elements with an enter and exit animation. The element will wait to be removed from the view container until the exit animation is complete.

Installation

npm i @ng-tk/if-animate

import { NgtIfAnimateModule } from '@ts-ts/if-animate';

@NgModule({
  imports: [NgtIfAnimateModule]
})
export class AppModule {}

Attributes

| name | type | default | description | | ----- | ------ | -------- | --------------------------------------------------- | | enter | string | entering | the css class to add to the element when displaying | | exit | string | exiting | the css class to add to the element when removing |

Outputs

| name | value | description | | ---- | ----- | ----------- | | None |

Example

  @Component({
    template: `
      <button (click)="onClick()">Toggle</button>

      <p *ngtIfAnimate="display">Hello World</p>
    `,
    styles: [
      `
        @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }

        @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } }

        .entering {
          animation: fadeIn .4s;
        }

        .exiting {
          animation: fadeOut .4s;
        }
      `
    ]
  })
  class AnimationComponent {
    display = true;

    onClick() {
      this.display = !this.display;
    }
  }