Solution for How do I stack elements using the object Array index?
is Given Below:
So I’m trying to get the elements in this angular component to cascade on load, I need them in this layout (see image).
How do I write the function in the TS file to pull their index position from the array that is creating the elements and use that to assign css properties position and z-index (index 0 in number 3 position in image)?
Got it like this below!
<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>
you can add z-index in html only
<div [ngStyle]="{'z-index': i}">
</div>
or if you have list of components
<div *ngFor="let item of list; let i = index" [ngStyle]="{'z-index': i}">
</div>