From the course: Angular: Animations

How Angular animations work - Angular Tutorial

From the course: Angular: Animations

Start my 1-month free trial

How Angular animations work

“

- [Narrator] Animations in Angular are fun to work with, but they do require a bit of configuration. Here, we'll have a brief overview of how Angular animations work, using resources from the official Angular website. So if you open up your browser and go to Angular.io, you'll be presented with the main Angular page here. To actually access the documentation on animations in the guide, you'll click on Docs. And from here, go to Fundamentals, Template and Data Binding, and way down at the bottom here, you will find Animations. As you can see in the Tool Tip, this is a guide to Angular's animation system. Here we're presented with a short overview of animations inside of Angular, but the important things to note here are that animations are built on top of the standard web animation's API. Which means that they run natively within the browsers that support it, which are basically all modern browsers. However, if you do need to target older browsers that do not support it, there is a poly fill you can grab from GitHub, which is found right here. Scrolling down, we can see that there's a quick start here, and it gives you some of the fundamentals. For instance, animations have to be defined inside of component metadata, and you need some animation specific imports. The most important one, of course, is browser animations module, which you import from Angular/platform-browser/animations. It then goes through a short guide showing you how to actually implement these within a project. But we'll go over all of that ourselves in this course. Now before we start wiring in Angular animations, we'll need to create a new Angular project to work with.

Contents