2

I've a component with an "@Input" property that receives the timing of an animation, while the timing property has a value all works as expected, but if a leave the timing without value the animation doesn't take it's default timing value.

This is the animation:

   import { trigger, state, style, animate, transition, AnimationTriggerMetadata } from '@angular/animations';

export const Expand: AnimationTriggerMetadata =
  trigger('expandState', [
    state('hide', style({
      height: 0,
      overflow: 'hidden'
    })),
    state('show', style({
      height: '*',
      overflow: 'hidden'
    })),
    transition('hide <=> show', animate('{{timing}}'), {params: {timing: '250ms ease-in-out'}}),
  ]);

The implementation:

  <div 
    [@expandState]="{value: animationState, params: {timing: timing}}">
    <!-- Content -->
  </div>

I get this error when I try to run the app:

ERROR TypeError: Cannot read property 'toString' of undefined
Danny908
  • 421
  • 2
  • 6
  • 20
  • First, define timing property in the component, 2. remove '' around timing int he animation function – Vega Aug 01 '22 at 19:40

0 Answers0