angular2 animation with variable styles

Question

Using Typescript & Angular 2.0.0-rc.4

How can I specify style property values from the template so that I can re-use buttons? For example, if I wanted to specify a d

Answer 1

Based on the title of this question I assume you want to bind expressions to an animation configuration.

It doesn't really matter if the value comes from an inline template expression or from a property binding on the component class.

In RC4 this is not possible, the animation module/engine supports static/constant definitions. I'm using the term definitions and not styles since such bindings can be used on styles as well as keyframes, transitions, animate and basically all animation metadata factories.

You should expect this feature to come in the one of the next versions of angular, can't tell when but it should come. Setting animations metadata as referenced variables rather then constants is super powerful and basically mandatory as it's the base requirement for re-usable animations.

Having re-usable animation will lead the way for wider community adoption of the animation module. In angular 1 it was built in since the animation module used globally defined CSS classes to start animations thus CSS classes were used for the re-usable part.

In angular 2 the approach is different due to a lot of reasons (encapsulation, own CSS parser, animation engine not tied to CSS and more...)

re-usable animation will pave the path for complete 3rd party libraries for animations, think animation.css or ng-fx but as a set of angular directives/modules.

I have opened an issue on the angular repo, about 3 weeks ago, requesting this feature. The lead dev on the animation has confirmed it's coming so hold tight :)