Currently, I am diving into Angular programming and encountering an issue with property bindings. Let me share a snippet of my code:
// TS FILE
data[
{"id": "1", "name": "tester", "rev": "1"},
{"id": "2", "name": "tester", "rev": "1"},
{"id": "3", "name": "tester", "rev": "1"},
];
createNumberArray(): number[] {
// code to fill array
return anyArrayOfNumbers
}
<div *ngFor="let datas of data; let i = index" >
<ul>
<li class='list-item' [id]= datas.id [ngStyle]="{ 'transform': 'rotate( numberArray[i] deg) translate(0,-100px) rotate(-numberArray[i]deg)' }">
<!-- how it would work: <li class='list-item' [id]= datas.id [ngStyle]="{ 'transform': 'rotate(200deg) translate(0,-100px) rotate(-150deg)' }"> -->
<div class='label1'><img alt='notfound' class='img2' src='any icon'></div>
<div class='label2'>
{{ datas.name }}
</div>
<div class='label3'>
{{ datas.id }}
</div>
<div class='label4'>
{{ datas.rev }}
</div>
</li>
</ul>
</div>
I have an Array of Objects in the data property that contains name, id, and rev for each object. The goal is to list these objects while also dynamically rotating them. To achieve this, I created another Array of numbers using the createNumberArray() function. These numbers are meant to dictate the rotation values for ngStyle during each loop iteration:
<li class='list-item' [id]= datas.id [ngStyle]="{ 'transform': 'rotate( numberArray[i] deg) translate(0,-100px) rotate(-numberArray[i]deg)' }">
However, I'm facing difficulties in making this work as intended. I've tried property binding but couldn't extract the number from the array within the transform property. In contrast, here's how it works with a static number value:
<!-- how it would work: <li class='list-item' [id]= datas.id [ngStyle]="{ 'transform': 'rotate(200deg) translate(0,-100px) rotate(-150deg)' }"> -->
In the past, I successfully achieved this using Js, Jquery, and HTML. However, I want to implement this functionality in Angular without relying on Jquery to avoid copying old code. I'm unsure about incorporating Jquery in Angular going forward. What is the optimal approach to manipulate the DOM? Your insights on this matter would be greatly appreciated!
Your assistance means a lot to me, and thank you for investing time in understanding my query.