Angular 2 - pass delay to component animation as input parameter

Question

I want to pass in the delay of a component's animation from the html eg:

html:

<circles[delay]="'10000ms'"></circles>

ts:

@Component({
   selector: 'circles',
   templateUrl: 'app/landing-page/subcomponents/circles.component.html',
   styleUrls: ['app/landing-page/subcomponents/circles.component.css'],
    animations: [
        trigger('flyIn', [
            state('in', style({ transform: 'translateY(0)', opacity: 1 })),
            transition('void => *', [
                style({ transform: 'translateY(-100%)', opacity: 0 }),
                animate("1000ms" + this.delay)
            ])
        ])
    ]
})

export class CirclesComponent {
   @Input() private delay: string;

However when I do that it gives this error:

(SystemJS) Cannot read property 'delay' of undefined(…)

How can I pass in the delay to the component in html without causing this error?

@adamdport No I didn't. The only work around I could think of was to write seperate components and give them a different delay and that was more effort than it was worth. — BeniaminoBaggins
– BeniaminoBaggins, Commented May 24, 2017 at 20:45

BeetleJuice · Accepted Answer · 2016-10-20 04:58:51Z

1

You are trying to use this in this.delay to refer to the current class, but you are doing this outside the class. Note that @Component() function is executed before you declare class CirclesComponent

This isn't very elegant but you could set a property on the window object when you want to set the delay

window.custom = {delay:'1000ms'}

Then in your animation, you could access it with `window.custom? window.custom.delay :

animate("1000ms" + (window.custom? window.custom.delay : ""))

answered Oct 20, 2016 at 4:58

BeetleJuice

41.1k24 gold badges120 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

BeniaminoBaggins Over a year ago

Hmm yeah I wasn't sure it would be possible. This solution is an option. My other option is to create a different component for each different delay, which is only about 6 components (potentially a few more in the future) - I was just concerned it might have a performance impact with more components.

BeetleJuice Over a year ago

@Beniamino_Baggins I wouldn't create multiple copies of the same component with just this minor difference. It breaks the DRY (don't-repeat-yourself) principle and will make the app more difficult to manage.

BeniaminoBaggins Over a year ago

Good point. Although, you are still setting that component's delay to '1000ms'. Can you explain how you can set a different delay for two of that same component?

user3588429 · Accepted Answer · 2018-08-24 06:49:59Z

I might be a little bit late but this may help someone else.

// Define your animations
export const fadeInDelay =
  trigger('fadeInDelay', [
    transition('void => *', [
        style({ opacity: '0' }),
        animate('250ms {{delay}}ms ease-in')
      ],
      { params: { delay: 200 } } //Fallback value; else it could crash when no delay is passed
    )
  ]);

Load it into your component:

@Component({
  animations: [fadeInDelay]
})
export class Component {
  ...
}

Then you can use it in your template like this and control the delay for each animation:

<div [@fadeInDelay]="{value: '', params: { delay: 1000}}"></div>
<div [@fadeInDelay]="{value: '', params: { delay: 2000}}"></div>
<div [@fadeInDelay]></div> //using fallback

Don´t forget to pass the a value else it will not work. I hope this helps!

Collectives™ on Stack Overflow

Angular 2 - pass delay to component animation as input parameter

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related