Angular 9 animate a stepper component

Question

I am trying to create a component that can (potentially) have as many children as needed. So I created a stepper component which consists of two components, the parent (Stepper) and child (Step). They are pretty simple in design, the stepper html looks like this:

<div class="panes">
    <ng-content></ng-content>
</div>

And the step html looks like this:

<div [ngClass]="{'expanded': expanded}"><ng-content></ng-content></div>

In my application it is a little more advanced, but you will get the idea if I keep it simple :) I have created a stackblitz here:

https://stackblitz.com/edit/angular-jsj2na

Now I have the stepper, I would like to create some animations. There are a couple of ways I could do this, but I started with this idea:

https://stackblitz.com/edit/angular-pkgh4v

This works in a crude way, but it doesn't take into consideration n+ steps. I would love to use Angular Animations, but I have no idea how to pass variables to it (or even if you can!) I had this animation declared:

trigger('slide', [
  state('left', style({ transform: 'translateX(0)' })),
  state('right', style({ transform: 'translateX(-50%)' })),
  transition('* => *', animate(300)),
]),

But as you can see, this only works with 2 steps.... Can anyone help?

what do you want me to do when it comes to the last step? to get it from the beginning? — Chris, Apr 21 '20 at 01:11
to work like this example https://eljallo.herokuapp.com/, is made in angular — Chris, Apr 21 '20 at 01:12

score 0 · Accepted Answer · answered Apr 21 '20 at 08:52

I have managed to get this to a reasonable state.

https://stackblitz.com/edit/angular-4psjsm

As you can see, I have managed to use [style.transform] and [style.width.%] and although it works (and doesn't care how many steps there are) it doesn't use angular animation. I did some reading last night and can see how to pass variables to animations:

https://medium.com/@danieltamirr/parameterized-angular-animations-fa73a2727158

But the problem I have is how to stipulate the actual animation. If someone could help with that, then I will mark theirs as the answer

Angular 9 animate a stepper component

1 Answers1