How to interpolate in Angular animation

Question

<ng-container *ngFor="let obj of mainData | keyvalue">
   <span [@animate]="states.{{obj.key}}">
      //////////////////////////////
   </span>
</ng-container>

I get an error saying that "Expected expression, got interpolation"

Answer 1

Brackets [] expect a expression, e.g. something like states.obj.key, whereas on normal attributes you have to use interpolation {{}} to insert an expression.

I think what you meant to write is either

[@animate]="states[obj.key]"

or

@animate="{{ states[obj.key] }}"

Answer 2

<ng-container *ngFor="let obj of mainData | keyvalue">
   <span [@animate]="states.{{obj.key}}">
        code
   </span>
</ng-container>

or

<ng-container *ngFor="let obj of mainData | keyvalue">
   <span [@animate]="states.[obj.key]">
        code
   </span>
</ng-container>