Set Angular animation param with Host Binding

Question

I have been trying to set animation param using @HostBinding decorative, but it seems not to work, what am I missing

animations: [
    trigger('animateMe', [
      state('void', style({ opacity: 0 })),
      transition(':enter, :leave', [ // void <=> *
        animate('{{ easeTime}}ms {{ transitionTimingFn }}')
      ])
    ])
  ]

and HostBinding

@HostBinding('@animateMe') state = {
    value: 'void',
    params: {
      easeTime: 5000
    }
  };

Answer 1

If you add a getter function to the host binding property you can set the animation params.

trigger: any;
easingTime = 5000;

@HostBinding('@animateMe') 
get fn() {
    return {
        value: this.trigger,
        params: {
            easeTime: this.easingTime
        }
    }
};