This is the archived documentation for Angular v6. Please visit angular.io to see documentation for the current version of Angular.

AnimationBuilder

An injectable service that produces an animation sequence programmatically within an Angular component or directive. Provided by the BrowserAnimationsModule or NoopAnimationsModule.

      
      abstract class AnimationBuilder {
  abstract build(animation: AnimationMetadata | AnimationMetadata[]): AnimationFactory
}
    

Methods

Builds a factory for producing a defined animation.

abstract build(animation: AnimationMetadata | AnimationMetadata[]): AnimationFactory
      
      abstract build(animation: AnimationMetadata | AnimationMetadata[]): AnimationFactory
    

Parameters

animation

A reusable animation definition.

Returns

AnimationFactory: A factory object that can create a player for the defined animation.

Usage notes

To use this service, add it to your component or directive as a dependency. The service is instantiated along with your component.

Apps do not typically need to create their own animation players, but if you do need to, follow these steps:

  1. Use the build() method to create a programmatic animation using the animate() function. The method returns an AnimationFactory instance.

  2. Use the factory object to create an AnimationPlayer and attach it to a DOM element.

  3. Use the player object to control the animation programmatically.

For example:

// import the service from BrowserAnimationsModule import {AnimationBuilder} from '@angular/animations'; // require the service as a dependency class MyCmp { constructor(private _builder: AnimationBuilder) {} makeAnimation(element: any) { // first define a reusable animation const myAnimation = this._builder.build([ style({ width: 0 }), animate(1000, style({ width: '100px' })) ]); // use the returned factory object to create a player const player = myAnimation.create(element); player.play(); } }
      
      
  1. // import the service from BrowserAnimationsModule
  2. import {AnimationBuilder} from '@angular/animations';
  3. // require the service as a dependency
  4. class MyCmp {
  5. constructor(private _builder: AnimationBuilder) {}
  6.  
  7. makeAnimation(element: any) {
  8. // first define a reusable animation
  9. const myAnimation = this._builder.build([
  10. style({ width: 0 }),
  11. animate(1000, style({ width: '100px' }))
  12. ]);
  13.  
  14. // use the returned factory object to create a player
  15. const player = myAnimation.create(element);
  16.  
  17. player.play();
  18. }
  19. }