TypeScript icon, indicating that this package has built-in type declarations

0.0.3 • Public • Published


ngx-cursor-hover (latest)

ngx-cursor-hover npm version

The CSS cursor property specifies the mouse cursor to be displayed when pointing over an element. It can be used to change the cursor to a variety of different shapes, such as a hand, a crosshair, or an arrow.

The cursor property is used to improve the user experience by providing visual cues about the actions that can be performed on an element. For example, a hand cursor is typically used to indicate that an element can be clicked, while a crosshair cursor is typically used to indicate that an element can be resized.

  • ngxCursor Add directive to any HTML block element in order to enable cursor.

Import Style

  • [x] Import using CSS CDN and Add it to your application
<link rel="stylesheet" href="">

Add crossorigin attribute as (use-credentials or anonymous) to link element if required.

  • [x] Directly add it to your Css / Scss file.
@import url("");


Import the module on your app.module.ts file as follow.

import { NgxCursorHoverModule} from "ngx-cursor-hover";

Add to imports

imports: [

Core function

<div class="card-body" ngxCursor

    <!-- Content goes here... -->

Name Category class
alias drag-and-drop .ngx-cursor-pointer-alias
all-scroll resize-and-scrolling .ngx-cursor-pointer-all-scroll
auto general .ngx-cursor-pointer-auto
cell selection .ngx-cursor-pointer-cell
col-resize resize-and-scrolling .ngx-cursor-pointer-col-resize
context-menu links-and-status .ngx-cursor-pointer-context-menu
copy drag-and-drop .ngx-cursor-pointer-copy
crosshair selection .ngx-cursor-pointer-crosshair
default general .ngx-cursor-pointer-default
e-resize resize-and-scrolling .ngx-cursor-pointer-e-resize
ew-resize resize-and-scrolling .ngx-cursor-pointer-ew-resize
grab grab .ngx-cursor-pointer-grab
grabbing grab .ngx-cursor-pointer-grabbing
help links-and-status .ngx-cursor-pointer-help
inherit general .ngx-cursor-pointer-inherit
initial general .ngx-cursor-pointer-initial
move drag-and-drop .ngx-cursor-pointer-move
n-resize resize-and-scrolling .ngx-cursor-pointer-n-resize
ne-resize resize-and-scrolling .ngx-cursor-pointer-ne-resize
nesw-resize resize-and-scrolling .ngx-cursor-pointer-nesw-resize
no-drop drag-and-drop .ngx-cursor-pointer-no-drop
none general .ngx-cursor-pointer-none
not-allowed drag-and-drop .ngx-cursor-pointer-not-allowed
ns-resize resize-and-scrolling .ngx-cursor-pointer-ns-resize
nw-resize resize-and-scrolling .ngx-cursor-pointer-nw-resize
nwse-resize resize-and-scrolling .ngx-cursor-pointer-nwse-resize
pointer links-and-status .ngx-cursor-pointer-pointer
progress links-and-status .ngx-cursor-pointer-progress
row-resize resize-and-scrolling .ngx-cursor-pointer-row-resize
s-resize resize-and-scrolling .ngx-cursor-pointer-s-resize
se-resize resize-and-scrolling .ngx-cursor-pointer-se-resize
sw-resize resize-and-scrolling .ngx-cursor-pointer-sw-resize
text selection .ngx-cursor-pointer-text
unset general .ngx-cursor-pointer-unset
vertical-text selection .ngx-cursor-pointer-vertical-text
w-resize resize-and-scrolling .ngx-cursor-pointer-w-resize
wait links-and-status .ngx-cursor-pointer-wait
zoom-in zoom .ngx-cursor-pointer-zoom-in
zoom-out zoom .ngx-cursor-pointer-zoom-out
-webkit-grab grab .ngx-cursor-pointer--webkit-grab
-webkit-grabbing grab .ngx-cursor-pointer--webkit-grabbing
-webkit-zoom-in zoom .ngx-cursor-pointer--webkit-zoom-in
-webkit-zoom-out zoom .ngx-cursor-pointer--webkit-zoom-out

Code integration

To use this package as a service npm i ngx-cursor-hover install this on the root angular project .

Note: Don't forget to run this commend npm i ngx-cursor-hover on root folder or else it will throw error.

Then import the module as follow on imports array


Package Sidebar


npm i ngx-cursor-hover

Weekly Downloads






Unpacked Size

15.7 kB

Total Files


Last publish


  • manoj10101996