From Get docs
< @angular/animationsAngular/docs/10/api/animations/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


Builds a factory for producing a defined animation.

See also:

  • animate()

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

animation AnimationMetadata[] A reusable animation definition.

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 =[
      style({ width: 0 }),
      animate(1000, style({ width: '100px' }))

    // use the returned factory object to create a player
    const player = myAnimation.create(element);;

© 2010–2020 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.