CODEWITHSUNDEEP
cssangular
Garet Webster
Garet Webster

Reputation: 141

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

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

Upvotes: 10

Views: 5383

Answers (1)

talhature
talhature

Reputation: 2165

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

Upvotes: 12

Related Questions