Динамическая переменная внутри углового @компонентного декоратора

Question

Я хотел бы передать динамическую переменную в угловую @Component класс декоратора.

Как видно из примера, здесь есть список предметов. Я бы хотел, чтобы каждый элемент изначально вращался с разной степенью ${DYNAMIC_DEGREE_VAR},

Если я установлю преобразование на случайное значение напрямую: rotate(${Math.floor(Math.random() * 15 + 1)}deg) - каждый элемент будет иметь одинаковое случайное значение.

Любые советы приветствуются.

@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>