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

It is totally possible to do it since Angular v4.2. You can find details in the article "A New Wave of Animation Features in Angular". See section #8.

Here is a code sample from it:

import {AnimationBuilder, AnimationPlayer} from "@angular/animations";
@Component({
  selector: 'loader',
  template: `
 

   

     {{ percentage }}%
   
 
 
  `
})
export class LoaderComponent {
  @ViewChild('loadingBar')
  public loadingBar;

  public player: AnimationPlayer;
  private _percentage = 0;

  constructor(private _builder: AnimationBuilder) {}

  get percentage() { return this._percentage; }

  @Input('percentage')
  set percentage(p: number) {
    this._percentage = p;

    if (this.player) {
      this.player.destroy();
    }

    const factory = this._builder.build([
      style({ width: '*' }),
      animate('350ms cubic-bezier(.35, 0, .25, 1)', style({ width: (p * 100) + '%' }))
    ]);
    this.player = factory.create(this.loadingBar.nativeElement, {});
    this.player.play();
  }
}