Programmatically change mouse cursor using Angular

Question

What is the best practice for set the mouse cursor programmatically using Angular?

For example:

HTML:

<div [style.cursor]="cursorStyle">Some content here</div>

or

<div [ngStyle]="{ 'cursor': cursorStyle }">Some content here</div>

TS:

setCursorPointer() {
    this.cursorStyle = 'pointer';
}

setCursorDefault() {
    this.cursorStyle = 'default';
}

Answer 1

If we are considering just these 2 options, the first one, since ngStyle and ngClass are better to use if you need to bind multiple properties, otherwise [style.*] or [class.*] would be better.