Animating components programmatically

So far, we have covered how to perform animations either with pure CSS or using the animation property of the @Component decorator. There is another more programmatic approach that uses the AnimationBuilder service. There are some artifacts involved in making this approach work, namely:

• AnimationBuilder: This is the Angular service that we need to inject into our components.
• AnimationFactory: This is the result of calling the build method of the AnimationBuilder instance and contains the animation definition.
• AnimationPlayer: This is an object created from the AnimationFactory instance and requires an element on which to apply the animation.

Let's cover these bullets in more detail so we can understand how AnimationBuilder works. First things first, we need to inject the AnimationBuilder service into the constructor of our component. We are also injecting the ElementRef instance to get a reference to the native element...