ngx-cursor-hover

ngx-cursor-hover (latest)

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="https://cdn.beforepost.com/neptune/ngx-cursor-hover-minified.css">

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

• [x] Directly add it to your Css / Scss file.

@import url("https://cdn.beforepost.com/neptune/ngx-cursor-hover-minified.css");

---

Import

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

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

Add to imports

imports: [
  ...
  NgxCursorHoverModule
  ...
],

Core function

<div class="card-body" ngxCursor
  [cursor]="'cursor-name-from-below-table'">

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

</div>

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

NgxResizeElementModule