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.

Answer 1

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

Answer 2

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

Answer 3

All you have to do is use the cursor property

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

.pointer {
    cursor: pointer;
}

Answer 4

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

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

Answer 5

Can be done via css, just add:

.yourClass { cursor: pointer; }

To your stylesheet