Currently, I am attempting to make the elements within this angular component cascade upon loading. The goal is to have them appear in a specific layout as shown in the accompanying image.
I'm seeking guidance on how to write a function in the TypeScript file that can extract the index position from the array responsible for creating these elements. This extracted index will then be used to assign CSS properties like position and z-index (for example, having index 0 correspond to position number 3 in the image).
Here's the approach I've come up with:
<div *ngFor="let img of imageURLs, let i = index" class="tap-target">
<img [alt]="'image' + i" [id]="'image' + i" style="width: 20%; height: auto"
[src]="img" class="resize-drag" [ngStyle]="{{'z-index': i, 'top': 2 * i + '%', 'left': 2 * i + '%'}}">
</div>