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 thebuildmethod of theAnimationBuilderinstance and contains the animation definition.AnimationPlayer: This is an object created from theAnimationFactoryinstance 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...
