Cookies concent notice

This site uses cookies from Google to deliver its services and to analyze traffic.
Learn more
Skip to main content
This site is no longer updated.Head to Angular.devHome
/

This is the archived documentation for Angular v17. Please visit angular.dev to see this page 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 }

Provided in

  • 'root'

Methods

Builds a factory for producing a defined animation.

See also:

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

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 AnimationBuilder.build() method to create a programmatic animation. 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();
  }
}