I'm trying to make a simple animation like the simple jQuery below
animate({'left' : left_indent})
I'm using the Angular2 Animations but the problem is how do I pass the left_indent parameter outside my Component Class in to the animation trigger?
animations: [
trigger('flyInOut', [
state('for', style({
left: this.left_indent,
})),
transition('* => for', [
animate(2000, keyframes([
style({ opacity: 1, transform: 'translateX(0)', offset: 0 }),
style({ opacity: 1, transform: 'translateX(-300px)', offset: 0.5 }),
]))
]),
])
]
Now it's possible.
animations: [
trigger('flyInOut', [
state('for', style({
left: '{{left_indent}}', // use interpolation
}), {params: {left_indent: 0}}), // default parameters values required
transition('* => for', [
animate(2000, keyframes([
style({ opacity: 1, transform: 'translateX(0)', offset: 0 }),
style({ opacity: 1, transform: 'translateX(-300px)', offset: 0.5 }),
]))
]),
])
]
UPDATE (according to SplitterAlex answer):
in template (for Angular < 4.4.6):
<div [@flyInOut]="{value: triggerValue, left_indent: left_indent}"></div>
for Angular >= 4.4.6 template should be
<div [@flyInOut]="{value: triggerValue, params: {left_indent: left_indent}}"></div>