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;
}

Carabiniere

I don't think it is possible mate, you really need to create a class for this like you did – Despondent

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

Lingual

Can you show how you would use this in the html? Would it look like <div (click)="onClick()" [click]></div> Because if so that seems to me to be even worse than div (click)="onClick() class="cursor-pointer"></div> – Carabiniere

No, all you need to do is having a click binding. I'm adding a stackblitz demo too. – Lingual

Thanks, this was exactly what I needed! – Carabiniere