angular - Dynamic variable inside angular @Component decorator

Question

I would like to pass dynamic variable to angular @Component class decorator.

As you can see from example there is a list of items. I would like each item to be initially rotated with different degree -${DYNAMIC_DEGREE_VAR}.

If I set transform to random value directly: rotate(${Math.floor(Math.random() * 15 + 1)}deg) - each item will have same random value.

Any tips appreciated.

@Component({
    selector: 'my-list',
    templateUrl: 'my-list.component.html',
    styleUrls: ['my-list.component.css']
})
export class MyListComponent implements OnInit {
  items: ItemModel[] = [];
}


@Component({
    selector: 'my-item',
    templateUrl: 'my-item.component.html',
    styleUrls: ['my-item.component.css'],
    animations: [
        trigger('itemState', [
            state('inactive', style({
                transform: `rotate(${DYNAMIC_DEGREE_VAR}deg)`
            })),
            state('active', style({
                transform: `rotate(0deg)`
            })),
            transition('inactive => active', animate('100ms ease-in')),
            transition('active => inactive', animate('100ms ease-out'))
        ])
    ]
})
export class MyItemComponent implements OnInit {

   item: ItemModel;

   state: string = 'inactive';
}

// ---------------------------------------------------------

// my-item.component.html
<div [@itemState]="state"></div>

// my-list.component.html
<my-item [item]="item" *ngFor="let items of item"></my-item>