What is the best way to use the cursor-pointer property in combination with a (click) event handler

Question

What is the best way to use the cursor-pointer property in combination with a (click) event handler

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

Our development team is grappling with numerous repetitive class definitions such as this one. I wanted to find a more efficient way to automatically add the cursor pointer style whenever a (click) event handler is present.

In the past, it was possible to style Angular attributes directly with CSS, but with Angular 2 and beyond, this is no longer feasible. This Stack Overflow thread explores options for changing the mouse pointer on ngclick events

[ng-click]{
    cursor: pointer;
}

css angular

Answer 1

Answer №1

If you want to give a special style to all elements with a click binding, you can create a directive to handle that.

click.cursor.directive.ts:

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

app.component.html:

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

Check out this Stackblitz demo

Answer 2

If you want to give a special style to all elements with a click binding, you can create a directive to handle that.

click.cursor.directive.ts:

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

app.component.html:

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

Check out this Stackblitz demo

What is the best way to use the cursor-pointer property in combination with a (click) event handler

Answer №1

Similar questions

Is there a way to generate a distinctive curved design using CSS for a

Positioning a div to the right of another div within a container (box)

Input field that adjusts its width based on screen size, accompanied by two buttons displayed side

nsIStyleSheetService - The Gateway to Stylish CSS

Modification of a CSS element

Ways to retrieve data from an Observable and save it in an Array categorized by a specific identifier

I'm running into issues transferring data between Angular and an API

Style your index with a Wordpress plugin

What is the solution to making flexbox align-items flex-end work in WebKit/Blink?

Refresh the project once logged in using angular

Tips for showcasing a Bootstrap alert

"Learn how to specifically extract parent <li> elements without including the child <li> elements

Aligning a block of text containing two varying font sizes in the center

What is the best way to begin an ordered list from the number 2 instead of 1, while ensuring W3C validity and compatibility with

Tips for receiving @ mentions in PrimeNg Editor using Quill and quill-mention with Angular

Switching Background Colors with CSS

Replace the image with text inside an anchor when the anchor is being hovered

Leverage the power of the MEAN stack with Angular 2 to seamlessly retrieve data from multiple APIs

Encountering issues when integrating an Angular library project into the main project

What is the best way to display the tabcontent when clicking on a menu tab in this code, as neither method seems to work?