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. |