How to apply cursor-pointer property to (click) event handler?

Question

<i class="cursor-pointer" (click)="sort()"></i>

Our codebase has a lot of redundant classes like this. I was looking for a way to apply the cursor pointer property anytime there is a (click) event handler.

Before angular 2, you were able to apply css to angular attributes, but that is no longer possible. Change the mouse pointer on ngclick

[ng-click]{
    cursor: pointer;
}

Answer 1

You can create a directive that selects all the elements with click binding and apply the style.

click.cursor.directive.ts:

@Directive({
  selector: '[click]'
})
export class ClickCursorDirective {
  @HostBinding('style.cursor') cursor: string = 'pointer';
}

app.component.html:

<div (click)="onClick()">Button</div>

Here is a Stackblitz demo