Angular 2 dynamic values ​​in animation

I recently started talking to Ng2, and now I am developing an application with ionic2. I dig into the animation part for the first time, and I ran into some problems.

I have ngFor, which basically repeats s with different widths. Each element of the array has its own div width value, which is calculated by the method of the onInit component. Before animation, I linked the width using [style.width]="expresson" . The docs say that you can define the style of the state of the end of the animation with "*", which means that it will get the correct value from the computed style, but that will not work when I programmatically set the width myself.

So the question is, how can I tell the animations to either start when I change the width, or dynamically set the value for the final state? Thanks!

EDIT: here is plunkr with an example. I set the final width after the animation to 50%, but I'm having trouble setting this final width to the values ​​defined in the component array. Just remove @animation in html to see the final result I would like to get.

+6
source share

All Articles