shiv-source / ngx-typed2

An Angular Typing Animation Library.

ngx-typed2

ngx-typed2 is an Angular library designed to seamlessly integrate Typed.js functionalities into Angular applications, compatible with both Single Page Applications (SPA) and Server-Side Rendering (SSR)

Installation

You can install ngx-typed2 via npm:

npm install ngx-typed2

You can install ngx-typed2 via yarn:

yarn add ngx-typed2

You can install ngx-typed2 via pnpm:

pnpm add ngx-typed2

Usage

Import the Module

Import the NgxTypedJsModule into your Angular module:

import { NgxTypedJsModule } from 'ngx-typed2';

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

Use in the Component

Use the ngx-typed2 component in your Angular templates:

<ngx-typed2
  [strings]="['Hello', 'World']"
  typeSpeed="50"
  backSpeed="30"
  [loop]="false"
  [showCursor]="true"
  cursorChar="|"
  [autoInsertCss]="true"
></ngx-typed2>

Available Inputs

Input	Type	Default	Description
strings	string[]	[]	Array of strings to be typed out sequentially.
stringsElement	string	undefined	String element to be typed out.
typeSpeed	number	100	Typing speed (in milliseconds per character).
startDelay	number	undefined	Delay before typing starts (in milliseconds).
backSpeed	number	100	Backspacing speed (in milliseconds per character).
smartBackspace	boolean	undefined	Enable smart backspacing for natural typing effects.
shuffle	boolean	undefined	Enable random string selection.
backDelay	number	500	Delay between characters during backspacing.
fadeOut	boolean	undefined	Enable fade-out effect.
fadeOutClass	string	undefined	CSS class for fade-out effect.
fadeOutDelay	number	500	Delay before fade-out (in milliseconds).
loop	boolean	true	Control looping of typing animation.
loopCount	number	undefined	Specify the number of loop counts.
showCursor	boolean	undefined	Toggle cursor visibility.
cursorChar	string	undefined	Customize cursor appearance.
autoInsertCss	boolean	undefined	Automatically insert Typed.js CSS.
attr	string	undefined	Additional attributes.
bindInputFocusEvents	boolean	undefined	Bind input focus events.
contentType	string	undefined	Specify content type (e.g., 'html', 'text').
cursorColor	string	undefined	Customize cursor color.
ngClass	string	undefined	Apply custom classes.

Available Outputs

Output	Event Emitted Data	Description
onBeginEvent	Typed	Triggered when typing begins.
onCompleteEvent	Typed	Triggered when typing completes.
preStringTypedEvent	{ arrayPos: number, self: Typed }	Triggered before a string is typed.
onStringTypedEvent	{ arrayPos: number, self: Typed }	Triggered after a string is typed.
onLastStringBackspacedEvent	Typed	Triggered when the last string is backspaced.
onTypingPausedEvent	{ arrayPos: number, self: Typed }	Triggered when typing is paused.
onTypingResumedEvent	{ arrayPos: number, self: Typed }	Triggered when typing resumes after being paused.
onResetEvent	Typed	Triggered when typing is reset.
onStopEvent	{ arrayPos: number, self: Typed }	Triggered when typing is stopped.
onStartEvent	{ arrayPos: number, self: Typed }	Triggered when typing starts for a particular string.
onDestroyEvent	Typed	Triggered when the ngx-typed2 instance is destroyed.

Available Methods

Method	Description
start()	Initiates the typing animation.
stop()	Pauses the typing animation.
reset()	Resets the typing animation to its initial state.
toggle()	Toggles between starting and stopping the typing animation.
destroy()	Stops the typing animation and cleans up any resources used.

License

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

Contact

• Author: Shiv Kumar
• Website: https://shivkumar.me
• Email: [e-mail]
• Issue Tracker: GitHub Issues