Как динамически задать скорость анимации в Angular 2?

Question

[bouncycastle]

Я использую TypeScript и Angular 2.4

У меня есть директива для прокрутки длинного текста (что-то на подобии тега marquee).
Она принимает параметр "speed" который описывает скорость прокрутки (пиксели за секунду).
Это позволяет сохранять одинаковую скорость при любой длине текста.

У Angular 2 есть возможность описывать анимацию в декораторе @Component, но ссылаться на методы компонента нельзя.

Для того чтобы преобразовать ее в обычную скорость в секундах, мне надо знать длину самого элемента.

Код компонента:

import {Component, Input, ElementRef, trigger, state, style, transition, animate} from '@angular/core';
import * as $ from 'jquery';

const SCROLL_SPEED_DEFAULT = 25;

@Component({
  selector: 'text-scroll',
  template: '<span><ng-content></ng-content></span>',
  animations: [
    trigger('hover', [
      state('idle', style({transformX: '0'})),
      state('scrolled', style({transformX: '-100%'})),
      transition('idle => scrolled', [
        animate(this.getAnimationSpeed())
      ])
    ])
  ]
})
export class TextScrollComponent {
  @Input('speed') speedTime: number = SCROLL_SPEED_DEFAULT;
  private element: HTMLElement;

  constructor(private el: ElementRef) {
    this.element = this.el.nativeElement;
  }
  
  public getAnimationSpeed(): number {
    let element = this.element;
    let elementWidth = $(element).width();
    let difference = this.el.nativeElement.scrollWidth - elementWidth;

    return (difference / Number(this.speedTime)) * 1000;
  }
}

Использование директивы:

<text-scroll>My very <b>loooong..</b> text</text-scroll>