7
<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;
}
Garet Webster
  • 111
  • 2
  • 9
  • 1
    I don't think it is possible mate, you really need to create a class for this like you did – Eudz Nov 05 '19 at 17:18

1 Answers1

11

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

talhature
  • 2,246
  • 1
  • 14
  • 28