ngx-cursor v16.0.0

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

Docs custom attribute

And that's it, Enjoy !