Анимировать на основе значения в компоненте

Question

Я пытаюсь анимировать left свойство div в angular6.

Окончательное значение неизвестно, пока я не вычислю его на основе некоторых HTML-элементов. Этот расчет всегда будет выполняться до запуска анимации. Результат будет сохранен в myVariableWidth.

Поэтому мне нужно иметь возможность изменить значение 200px на myVariableWidth, которое определено в NewsfeedComponent.

Пример кода

@Component({
  selector: 'app-newsfeed',
  templateUrl: './newsfeed.component.html',
  styleUrls: ['./newsfeed.component.css'],
  animations: [
    trigger('showNewsitem', [
      state('right', style({
        // this value will be calculated based on myVariableWidth in the 
        component
        left: '200px' 
      })),
      state('left', style({
        left: '0px',
      })),
      transition('right => left', [
        animate('2s')
      ]),
      transition('left => right', [
        animate('0.5s')
      ])
    ]), // end trigger
  ],
})
export class NewsfeedComponent implements OnInit {
   public myVariableWidth: number;
}

PS: я знаю, что могу добиться этого, используя CSS transition или JavaScript window.requestAnimationframe() вместо анимации angular. Но мне интересно, есть ли «угловой» способ сделать это.