✨ Typewriter Text Angular Directive

🧩 A lightweight Angular directive wrapper for typewriter-text-effect, providing a clean, reactive, and customizable typewriter animation for any DOM element.

📦 Published as: typewriter-text-angular

Typewriter

This library was generated with Angular CLI version 18.2.0.

Installation

Install both the core library and the Angular wrapper :

npm install typewriter-text-effect
npm install typewriter-text-angular

🚀 Getting Started

1. Import the Module :

In your AppModule (or any feature module):

import { TypewriterModule } from 'typewriter-text-angular';

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

2. Use the Directive in HTML :

<div
    typewriter
    [typewriter]="['fullstack developer', 'freelancer', 'football player']"
    [loop]="true"
    [speed]="80"
    [deleteSpeed]="40"
    [delayBetween]="1000"
    [cursor]="true"
    cursorChar="|"
    [pauseOnHover]="true"
    style="display: inline; font-weight: bold; color: #007acc;"
  ></div>

⚙️ Input Options

| Input | Type | Default | Description | |--------------------|--------------------|-------------|---------------------------------------------------------| | typewriter | string \| string[] | '' | Text or array of strings to animate | | speed | number | 100 | Typing speed in milliseconds | | deleteSpeed | number | 50 | Speed at which text is deleted | | delayBetween | number | 1000 | Delay after typing before deletion | | pauseBetweenLoops | number | 2000 | Pause duration between loops | | loop | boolean | true | Whether to loop through text continuously | | cursor | boolean | true | Show a blinking cursor | | cursorChar | string | ' | Character used as the cursor | | startDelay | number | 0 | Delay before typing starts | | pauseOnHover | boolean | false | Pause typing when mouse hovers over text | | randomSpeed | boolean | false | Add variation to typing speed | | autoStart | boolean | true | Automatically start typing on init | | textStyleClass | string | '' | Optional CSS class to style the typed text |

🧨 Destroy and Clean Up

When the component is destroyed, the directive automatically stops and cleans up the typewriter instance to avoid memory leaks.

Related

🔗 Related Projects :

📦typewriter-text-angular (this package)

✨ typewriter-text-effect (core library)

📜 License

MIT

Authors

• Rajat Singh

Contributing

Contributions are always welcome! Please adhere to this project's code of conduct.