So far, we have covered how to do animations with pure CSS or by defining a trigger that we can hook up to our markup. There is another more programmatic approach to animation. This approach uses a service called AnimationBuilder. There are some key factors involved in making this approach work, namely:

• AnimationBuilder: This is a service we inject; it has a single method, build, that when called creates an instance of an AnimationFactory
• AnimationFactory: This is the result of calling build() on an AnimationBuilder instance; it has been given a number of styling transformations and one or more animations
• AnimationPlayer: The player needs an element on which to apply the animation instruction

Let's cover these bullets so we understand what happens, when, and to what element. First things first, we need to inject the AnimationBuilder to a component's constructor and also inject an elementRef instance so we have a target for our animation, like so:

import { AnimationBuilder } from '@angular/animations';

@Component({})
export class Component {
  constructor(
    private animationBuilder:AnimationBuilder,
    private elementRef: ElementRef
  ) {
  }
}

At this point, we have access to an instance of the animationBuilder and are ready to set up our style transformations and an animation, so let's do that next:

ngOnInit() {
  const animationFactory = this.animationBuilder.build([
    style({ width : '0px' }), // set starter value
    animate(1000, style({ width: '100px' }))  // animate to this new value
  ])
}

Here, we have defined a transformation that sets the width to 0px initially, and an animation setting the width to 100px over 1 second. We have also assigned the result of calling animationBuilder.build() to a variable animation that is of type AnimationFactory. The next step is to create an instance of an animation player and decide what element to apply this animation to:

const elem = this.elementRef.nativeElement.querySelector('.text');
const animationPlayer = animationFactory.create(elem);

We do two things here; first, we point out an element in our template where we want the animation to be applied to. Next, we create an instance of an animation player by calling animation.create( elem ) with our element as input. What's missing now is to create the element in the UI so our querySelector() can find it. We need to create an element with the CSS class text, which is just what we do in the following code: 

@Component({
  template : `
    <p class="text">Animate this text</p> 
  ` 
})
export class ExampleComponent {}

The very last step is to call the play() method on our animation player instance:

animationPlayer.play();

Enjoy the animation as it plays in the browser. You can easily extend the animation by adding more properties to our style({}) method call, like so:

ngOnInit() {
  const animation = this.builder.build([
    style({ 
      width : '0px', 
      height : '0px' 
    }),   // set starter values
    animate(1000, style({ 
      width: '100px', 
      height: '40px' 
    }))
  ])
}

In summary, AnimationBuilder is a powerful way to create reusable animations that you can easily apply to an element of your choice.