Angular 7 - Animate CSS

In this article, we'll see how to setup Animate CSS in Angular 7.

Angular 7 - Animate CSS

🎬Video version: https://www.youtube.com/watch?v=oBuyoZQZYpc

Step 0

Installing angular-cli

Note: you can skip this part if you already have application generated

sudo npm i -g @angular/cli@next
ng new angular7app
cd angular7app

Step 1

• Install animate.css

  npm install animate.css --save

Step 2

• Open angular.json and insert a new entry into the styles array:

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

Step 3

• Open src/app/app.component.html and add the animated flip class in a div:

<div class="animated flip">
...
</span>

Step 4

• Launch the application:

ng serve -o

animated flip class added to the main div of the default app.