Can you move your animations to an external file in Angular2?

Question

The @Component annotation provides us with an animations property. This can be used to define a list of triggers each with a lot of state and transition properties.

When you add multiple animations to a component, this list can become pretty long. Also some animations would be really nice to use in other components as well. Having to put them directly in each component seems tedious and is repetitive - plus it violates the DRY principle.

You can define the template and styles properties on your component as well, but here you have the option of providing a templateUrl and styleUrls instead. I can't seem to find an animationUrls property - am i missing something - is there a way to do this?

Answer 1

Sure you can. You can just declare the animation in a different file, then import it where you need it

animations.ts

export const animation = trigger(...)

component.ts

import { animation } from './animations'

@Component({
  animations: [ animation ]
})

Or if you want to make it configurable, you can export a function. For example, take a look at the Fuel-UI Collapse. This is a reusable (and configurable) animation

collapse.ts

export function Collapse(duration: number = 300) {
    return trigger('collapse', [
           ...
        ])
}

Then in your components, just use

import { Collapse } from './collapse'

@Component({
  animations: [ Collapse(300) ],
  template: `
    <div @collapse="collapsed ? 'true' : 'false'">
    </div>
  `
})
class MyComponent {}