@omnedia/ngx-typewriter NPM

Ngx Typewriter Component

This Library is part of the NGXUI ecosystem. View all available components at https://ngxui.com

@omnedia/ngx-typewriter is a lightweight and easy-to-use angular library for creating typewriter effects in your web applications. It uses RxJS to manage the typewriting effect, ensuring smooth and customizable animations.

Installation

You can install the library via npm:

npm install @omnedia/ngx-typewriter

Usage

First, import the Component class from the library:

import {NgxTypewriterComponent} from '@omnedia/ngx-typewriter';

@Component({
  ...
    imports:
[
  ...
    NgxTypewriterComponent,
],
...
})

Then, create an DOM Element of the TypeWriter:

words: string[] = ['Im', 'typed', 'one', 'after', 'another'];

<om-typewriter
  [words]="words"
></om-typewriter>

API

<om-typewriter
  [words]="words"
  [disableLoop]="true"
  [writeSpeed]="writeSpeed in Ms"
  [deleteDelay]="deleteDelay in Ms"
  [writeDelay]="writeDelay in Ms"
  [textCursorColor]="textCursorColor"
  styleClass=" your-custom-class"
></om-typewriter>

Starts the typewriter effect.

words: An array of strings to be typed.
disableLoop: (optional): If set to true, the last word in the words array will stay.
writeSpeed (optional): The speed of typing each character in milliseconds. Default is 40.
deleteDelay (optional): The delay before starting to delete the typed word in milliseconds. Default is 3500.
writeDelay (optional): The delay before starting to type the next word after deleting the current word in milliseconds. Default is 50.
textCursorColor (optional): The color of the blinking text cursor. Default is #8a8a8a.
styleClass (optional): Add a class to the <p> Tag.