ngx-cursor

Angular Cursor (ngx-cursor)

A simple way to change cursor in Angular 15-16

Getting Started

Links

• demo
• my twitter

Install

npm i ngx-cursor

Import "NgxCursorModule" in your angular module (or feature module).

app.module.ts

import { NgxCursorModule } from 'ngx-cursor';

@NgModule({
  imports: [...NgxCursorModule]
})
export class AppModule {}

Add in your root component (or in specific component).

<section class="main">
  <router-outlet></router-outlet>
  <ngx-cursor></ngx-cursor>
</section>

• Here you add a cusor below the native cursor if you want to remove default cursor do :

<ngx-cursor [cursor]="false"></ngx-cursor>

• Also you can change the color the size and z-index of custom cursor

<ngx-cursor color="#00FF00" size="10px" [zindex]="9999"></ngx-cursor>

• If you want to change the cursor during the user's navigation :

<!-- hover active -->
<a href="..." cursor-active></a>

<!-- hover change color -->
<a href="..." cursor-color="red"></a>
<a href="..." cursor-color="transparent"></a>
<a href="..." cursor-color="#00FF00"></a>

<!-- hover opacity -->
<a href="..." cursor-opacity="1"></a>

• You can also add a small text : use selectors to create a selector with prefix : "cursor-" to display the words with the same indice

<ngx-cursor
  [selectors]="['more', 'prev', 'next']"
  [words]="['see more', '< prev', 'next >']"
></ngx-cursor>

<a href="..." cursor-more>...</a>
<a href="..." cursor-prev>...</a>
<a href="..." cursor-next>...</a>

Docs parameters component

Parameters name	Default value	Functionality
cursor	true	display default cursor or not
color	#000	change default cursor bg color
border	none	add border in cursor
size	30px	change default cursor size
opacity	0.4	change default cursor opacity
delay	50	change delay of mousemouve
zindex	999	change default cursor z-index
selectors	[]	set a list of custom selectors to display small text
words	[]	display words if user hover the selector with indice
chekNParents	3	check if n parent have curstom attribute

Docs custom attribute

Attribute name	Functionality
cursor-active	add cusor with active mode
cursor-color	change cursor color in hover
cursor-opacity	change cursor opacity in hover
cursor-size	change cursor size in hover
cursor-border	change cursor border in hover
cursor-?	display a custom words in hover

And that's it, Enjoy !