Angular CustomCursor 🎨🖱️

A lightweight and customizable cursor library for Angular. Replace the default cursor with a smooth animated cursor for a unique UI experience.

📦 Installation

Install the package using npm or yarn:

npm install angular-custom-cursor

or:

yarn add angular-custom-cursor

usage

1️⃣ Standalone Component Approach (Angular 15+)

If your app uses standalone components, you can directly import AngularCustomCursorComponent:

✅ Import in app.component.ts

import { Component } from '@angular/core';
import { AngularCustomCursorComponent } from 'angular-custom-cursor';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [AngularCustomCursorComponent], // Import here
})

export class AppComponent {}

2️⃣ Non-Standalone (NgModule) Approach

If you are using a traditional NgModule-based Angular app, follow these steps:

✅ Import in app.module.ts

Modify app.module.ts to include AngularCustomCursorModule:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AngularCustomCursorModule } from 'angular-custom-cursor';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AngularCustomCursorModule // Import here
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

✅ Use in app.component.html

<lib-angular-custom-cursor></lib-angular-custom-cursor>

3️⃣ You can just Import in App.component.ts to use all over the application.

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { AngularCustomCursorComponent } from 'angular-custom-cursor';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, AngularCustomCursorComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'demo-project';
}

4️⃣ Use in app.component.html

<lib-angular-custom-cursor></lib-angular-custom-cursor>