"cursor: pointer" just not working at all - html

Question

This is my angular template code:
<!-- Modal -->
<ng-template #levelsmodal let-c="close" let-d="dismiss">
<div class="modal-header">
Select the levels you want to show in the table and chart
</div>
<div id="segments-modal" class="modal-body">
<div class="row margin" *ngFor="let level of config?.data?.groups; let i = index" (click)="selectLevel(level)">
<div class="colorspan" [style.backgroundColor]="level.active ? colors[i] : 'gray'" class="colorspan">
</div>
<span class="level-labels pointer-cursor" [innerHTML]="getLabel(level)" ></span>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-success" (click)="c()">Close</button>
</div>
</ng-template>
The class "pointer-cursor" is plain simple:
.pointer-cursor{
cursor: pointer !important;
z-index: 500;
}
The z-index was only added for trying if it could make some difference, but it doesn't. I also tried applying this class to other parts like the wrapper div and so, but it's just not working. I keep seeing the normal "text cursor" instead of the pointer one...
Does anybody know why this happens?

Answer 1

Try that
::ng-deep .pointer-cursor{
cursor: pointer !important;
z-index: 500;
}
Edit
The ::ng-deep combinator (https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep) ensures that the defined style applies to all child elements of the component, not only elements directly created by the component.
Since the element you want to style in inside a ng-template tag (so it does not belong directly to the component), you need to use this to style its elements