Animate.css and Angular 4

1. Install animate.css via npm npm install animate.css --save
2. In your .angular-cli.json add in "../node_modules/animate.css/animate.css", - or if you're using Angular 6+, in your angular.json add in "node_modules/animate.css/animate.css", - into your "styles" array (see examples below).
3. Restart your local server and refresh your browser. ng serve

Angular 4 & 5 Example:

"styles": [
    "../node_modules/animate.css/animate.css"
  ],

Angular 6+ Example:

"styles": [
    "node_modules/animate.css/animate.css"
  ],

As a result of Hacktoberfest this year, I've stripped out all animations from Animate.css and created an Angular Library that does everything that animate.css do with the possibility of using dynamic parameters. It supports both AOT and JIT compilations.

You can have a look at my demo here: https://filipows.github.io/angular-animations/ and let me know what do you think.

Here is a Stackblitz to play with: https://stackblitz.com/edit/angular-animations-lib-demo

Basically, you can trigger them with a boolean value:

<div [@bounce]="booleanValue"> </div>

Or when the element enters or leaves the DOM:

<div [@fadeInDownOnEnter] [@fadeOutOnLeave]> </div>

And it can be parameterized from the template:

<div [@fadeInDownOnEnter]="{ value: '', params: { duration: 300, delay: 0, translate: '30px' } }" </div>

The only thing you need to do is to import the animation in your component file and add it to animations in a component decorator:

@Component({
  ...
  animations: [
    fadeInDownOnEnterAnimation()
  ]
})

You can also use parameters in there, but these cannot be changed dynamically like the one inside a template:

@Component({
  ...
  animations: [
    fadeInDownOnEnterAnimation({ anchor: 'customAnchor', duration: 300, delay: 0, translate: '3000px' })
  ]
})