how to dynamically set the number of states in angular

Question

  changeDetection: ChangeDetectionStrategy.OnPush,
  animations: [
    trigger('slide', [
      state('1', style({ transform: 'translateX(0)' })),
      state('2', style({ transform: 'translateX(-50%)' })),
      transition('* => *', animate(300))
    ])
  ]
})

export class SlidePanelComponent {
  @Input() numberOfStatesToHave

... more code

How can I dynamically set the number of states in angular using the @input decorator?

For example if the @Input numberOfStatesToHave is 3, how can I have three animations states in the animations 'array' in the @Component decorator? And also dynamically pass values to the transform css property?

In that case you need to use the Animationbuilder. https://www.google.com/url?sa=t&source=web&rct=j&url=https://angular.io/api/animations/AnimationBuilder&ved=2ahUKEwjR5-Oi_aDlAhXgIbcAHYcrBIQQFjAAegQIAhAB&usg=AOvVaw1uB7gk6xBAoRBhuBOROesN — SplitterAlex, Oct 16 '19 at 14:23
@SplitterAlex Thanks for pointing me there. But I do not understand some of what is happening there, like `player.play();` where does `play` come from? ` — YulePale, Oct 16 '19 at 14:32
@SplitterAlex I got it! : https://angular.io/api/animations/AnimationPlayer#play — YulePale, Oct 16 '19 at 14:43

score 0 · Answer 1 · answered Oct 16 '19 at 14:10

I think it's not possible. But my suggestion for your requirements is below.

const numberOfStatesToHave = localStorage.getItem('NUMBEROFSTATESTOHAVE')

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
    changeDetection: ChangeDetectionStrategy.OnPush,
    animations: [
      trigger('slide', numberOfStatesToHave)
    ]
})

If before call this component set that localStorage value

score 0 · Accepted Answer · answered Oct 18 '19 at 13:31

After doing research(thanks to @SplitterAlex comment that pointed me to the right direction), I have come up with a solution.

To dynamically create animation states you should have the animations logic inside the @Components decorator but rather you should use angular's Animationbuilder.

This stackblitz example helped me understand how the animation builder works as it contrasts it with doing the animation inside the @Component decorator.

Here is my complete code of dynamically setting the number of animation states in angular.

how to dynamically set the number of states in angular

2 Answers2