Parameters inside stagger() don't work

[heddendorp]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

When using an animation parameter inside stagger like stagger('{{ delay }}', [ the animation fails, because the parameter is not replaced.

Expected behavior

Parameters work inside stagger timings as well

Minimal reproduction of the problem with instructions

http://plnkr.co/edit/SqrTDLrYKNaL8hTYHESj?p=preview
Create a stagger animation with an parameter inside the staggers timing

What is the motivation / use case for changing the behavior?

Parameter replacement works on other timing properties, it should work in stagger as well.

Environment

@angular/cli: 1.4.2
node: 8.2.1
os: darwin x64
@angular/animations: 4.4.5
@angular/cdk: 2.0.0-beta.12
@angular/common: 4.4.5
@angular/compiler: 4.4.5
@angular/core: 4.4.5
@angular/flex-layout: 2.0.0-beta.9
@angular/forms: 4.4.5
@angular/http: 4.4.5
@angular/material: 2.0.0-beta.12
@angular/platform-browser: 4.4.5
@angular/platform-browser-dynamic: 4.4.5
@angular/router: 4.4.5
@angular/cli: 1.4.2
@angular/compiler-cli: 4.4.5
@angular/language-service: 4.4.5
typescript: 2.3.4


Browser:
- [x] Chrome (desktop) version 61.0.3163.100
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [x] Firefox version 57.0b8
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX

[manekinekko]

Hi, can you link to a plunkr online demo?

@matsko is this a known issue?

[heddendorp]

I added a plunkr @manekinekko
Hope it's sufficient

[matsko]

Thank you for bringing this up. I will get to a fix shortly.

[elvisbegovic]

it's me or this not working :

 trigger('ngIfAnimation', [
      transition(':enter, :leave', [
        query('@*', animateChild())
      ])
    ]),
    trigger('easeInOut', [
      transition('* => *', [ // each time the binding value changes

        query(':enter', [
          style({ opacity: 0 }),
          stagger(100, [
            animate('0.5s', style({ opacity: .5 }))
          ])
        ])
      ])
    ])
  ]

then in template simply use @easeInOut

[artsys78]

Hi,

Parameters inside stagger() don't work.

When it would be fixed ?
The problem still persist.

Thank's

[sublimator]

super sad sad face

[tayambamwanza]

Please can this be fixed, I can't make re-usable animations for lists now.

[fattslug]

bump

[Steven4294]

bump

[AsafAgranat]

BUUUMP.
Please kindly fix this. Much appreciated

[xe4me]

The entire Angular framework is on one side from being intuitive and reusable and simplicity and animation API is on another side. so so so unintuitive and unnecessarily complicated and weird. It's trying to follow functional programming while passing strings around as animation and I have to always look for examples because the docs make no sense and it's super tiring to read to be able to just create a simple fade animation with a variable passed in.
I'm sure even in Google devs try to avoid using it and resort to CSS animations instead.
What a disaster.
It's been 5? years since I started using Angular2, and my experience with animations API has been nothing but pain.
Can't believe it's been 5ish years since this API was announced, and it still does not support variables, wtf. That's like the most fundamental feature any animation library provides. 5 years

[tayambamwanza]

@xe4me I won't say that it doesn't have positives but for some reason I feel like animations isn't part of Angular, it's like a whole new language that I have to learn and a whole new way of thinking, so it ads extra learning curve.

[AsafAgranat]

@xe4me,

I'm sure even in Google devs try to avoid using it and resort to CSS animations instead.

Please keep your personal peeves out of this discussion. Angular animations is powerful and provides a ground for creating animations outside the scope of CSS. Even if its syntax is on the complex side (and you're welcome to suggest a better one), its still learnable and is highly useable (I use it incessantly in enterprise level apps).

Can't believe it's been 5ish years since this API was announced, and it still does not support variables

This is a grossly wrong statement. Variables are supported, and they work well. If you read this issue properly you'd realize that people ask for animations parameters would be supported inside stagger() function too, which currently they are not.

That's like the most fundamental feature any animation library provides.

Variables are not are not fundamental to "any animation library". Most frameworks provide APIs to create CSS animations. Angular animates DOM elements with timers, and not many frameworks provide this OTB.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}