Change the mouse pointer on ngclick

Question

I've a div with the Angular ng-click directive attached to it. On hovering over this element the mouse pointer doesn't change. Is there a way to change it through CSS? I know I can simply attach an anchor tag to it, but I would like to know if this can be done.

Redeemer

Answer 1

Is there a way to change it through css?

Yes, see cursor.

If you just wanted to target elements with the ng-click attribute, for example:

[ng-click],
[data-ng-click],
[x-ng-click] {
    cursor: pointer;
}

Delft

Is there a way to add an exception to this? F.I. All ng-clicks should have pointer as cursor except the ones that have X class(or any other CSS attribute) – Wreath

@Murilo, yes. For example, .x[ng-click] { cursor: default; } – Chagall

Does anyone know how to accomplish this in Angular 2? Angular 1 used ng-click whereas Angular 2 uses (click). – Straightlaced

For angular 2 have a look at #58716747 This solution uses a directive to achieve this, so it is not a pure CSS solution. – Suiting

Answer 2

All you have to do is use the cursor property

<div data-ng-click="myFun()" class="pointer"></div>

.pointer {
    cursor: pointer;
}

Bipinnate

Answer 3

Can be done via css, just add:

.yourClass { cursor: pointer; }

To your stylesheet

Pseudohermaphroditism

Answer 4

If you are using datatables, you have to override the default datatables.css settings and add the following code to custom CSS, In the code below row-select is the class that I added on datatables in my HTML page.

table.row-select.dataTable tbody td
{
cursor: pointer;    
}

Spermatophyte

Answer 5

Yes you can achieve it simply through CSS, nothing special about AngularJS here.

<div ng-click="myAngularFunctionWithinController()" style="cursor: hand;cursor: pointer;">
</div> 

Soluble

Why are you setting cursor twice? – Chagall

Because it will cover all cases, all browsers #3088475 – Soluble

cursor:pointer will immediately override cursor:hand and there aren't any browsers in the wild today that don't correctly support this property (did you actually read the thread you linked to?). Also, applying the style inline isn't going to suit OP's use-case unless he adds that to every element that has an ng-click attribute, which really defeats the purpose of using CSS at all. – Chagall