Changing child component z-index by [ngStyle]

I am showing multiple samples of a child component in a parent component as below:

parent.html

@for (item of Iems; track item) {
<app-child> </app-child>
}


I need to bring each selected child sample in front of others, to do so I tried to change z-index as below:

child.html

<div
cdkDrag
(pointerdown)="toggleFrontStatus()"
(pointerup)="toggleFrontStatus()"
[ngStyle]="{'z-index': isFront ? '10!important' : 0}"
[ngStyle]="{'border': isFront ? 'solid green' : null}"
>
<span>Child component!</span>
</div>



child.ts:

isFront: boolean = false;
toggleFrontStatus() {
this.isFront = !this.isFront;
}



But it is not working, i.e., the older elements stay under the newer elements. Then I added a border style to the selected element. Now I see that the selected element gets the green border when it is selected, but it is not coming front, i.e., z-index is not applied. I checked inspector, while border is added to the style of the element, z-index is not, even though I had used !important! Does anyone know what is wrong? Thanks in advance!

Continue reading...