7

I've just recently started messing around with Ng2 and I'm now developing an app with ionic2. I'm digging into the animation part for the first time and I've ran into some issues.

I have a ngFor that basically repeats s with different widths. Each element in the array has it's own div's width value which is calculated the component's onInit method. Before the animations I was binding the width via [style.width]="expresson". The docs say you can define an animation end state style with '*' which means it'll get the right value from the computed style, but that doesn't work when I'm programatically setting the width myself.

So, question is, how can I tell the animation to either trigger when I change the width, or to dynamically set the value for the end state? Thanks!

EDIT: Here's a plunkr with an example. I set the final width after animating to 50%, but what I'm having trouble is setting that final width to the values defined in the component's array. Just remove the @animation in the html to see the final result I'd like to get.

tiansivive
  • 506
  • 1
  • 4
  • 16
  • Could you create a simple plunker so we can take a look at the code? – sebaferreras Jul 31 '16 at 07:15
  • @sebaferreras Just added a link to the question. It exemplifies exactly what I'm trying to achieve – tiansivive Jul 31 '16 at 16:14
  • I was not able to make it work by using Angular2 animations. Instead, I followed a simpler approach like you can see in [this plunker](https://plnkr.co/edit/Xtiien?p=preview). If you think this still could be a valid answer to the OP, please let me know and I'll add an answer with the proper explanation for other users having the same issue. – sebaferreras Jul 31 '16 at 16:54
  • 1
    While your solution is definitely helpful for somebody in a similar situation - I also resolved my problem with something along those lines, though yours is more elegant - I don't think it fit's into an angular2 context. To me this problem seems like something that'd come up often for devs, so I'm surprised there's no simple way to do this (yet) with ng2's animations. I think it's best to leave this open in case other people have a proper solution, or ng2 devs come across this particular issue. Don't you agree? – tiansivive Jul 31 '16 at 17:24
  • Yeap I agree with you (that's why I didn't want to add and answer with that information). Let's see if someone finds the proper solution for this issue :) – sebaferreras Jul 31 '16 at 18:05

0 Answers0