Skip to content

omnedia/ngx-typewriter

Repository files navigation

Ngx Typewriter Component

@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"
        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.
  • styleClass (optional): Add a class to the <p> Tag.

Contributing

Contributions are welcome! Please feel free to submit a pull request or open an issue on GitHub.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

  • RxJS for providing powerful reactive programming tools.
  • All the contributors who have helped in improving this project.

Contact

For any questions or suggestions, please open an issue or reach out to me at markus.block@omnedia.com.