type-writer-xs

Angular Typewriter made with typescript language.

Installation

npm i type-writer-xs

Example usage

import { TypeWriterXsComponent } from 'type-writer-xs';

@Component({
  selector: 'your-component',
  template: `
    <div class="whitespace"></div>
  `,
  styles: []
})

export default function InsideYourComponent() {

    //TypeWriterXsComponent -> (HTMLElement, loop = false (default), typeSpeed = 50 (default), DeleteSpeed = 50 (default))
    //Note All speeds in milliseconds.
    const writer = new TypeWriterXsComponent(document.querySelector(".whitespace") as HTMLDivElement ,true, 130, 150);

    writer.typeString('hello there').typeString(' its type writer ').typeString(' Made by XeNDeR ').pauseFor(2000).deleteUpto(12).typeString(' visit : www.ixender.com').deleteAll().typeString('Bye').deleteAll().start();
}

Inside Details

Name	Type	Description	Required	Default
userInput	string	Text to display as string	true
loop	boolean	Set to true if the typewriter should loop after finishing typing the string(s)	true	false
typeSpeed	number	How long (in ms) does the the typewriter wait after typing one character	true	50ms
deleteSpeed	number	How long (in ms) does the the typewriter wait after deleting one character	true	50ms
typeString(userInput: string)	function()	It will start the typing animation
pauseFor(duration: number)	function()	It will start pause the typing animation upto "duration"
deleteUpto(chars : number)	function()	It will delete upto "chars" given by user.
deleteAll()	function()	It will delete complete text.