Home

Awesome

ngx-typed2

NPM Version NPM Downloads GitHub release License GitHub Pull Requests

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

InputTypeDefaultDescription
stringsstring[][]Array of strings to be typed out sequentially.
stringsElementstringundefinedString element to be typed out.
typeSpeednumber100Typing speed (in milliseconds per character).
startDelaynumberundefinedDelay before typing starts (in milliseconds).
backSpeednumber100Backspacing speed (in milliseconds per character).
smartBackspacebooleanundefinedEnable smart backspacing for natural typing effects.
shufflebooleanundefinedEnable random string selection.
backDelaynumber500Delay between characters during backspacing.
fadeOutbooleanundefinedEnable fade-out effect.
fadeOutClassstringundefinedCSS class for fade-out effect.
fadeOutDelaynumber500Delay before fade-out (in milliseconds).
loopbooleantrueControl looping of typing animation.
loopCountnumberundefinedSpecify the number of loop counts.
showCursorbooleanundefinedToggle cursor visibility.
cursorCharstringundefinedCustomize cursor appearance.
autoInsertCssbooleanundefinedAutomatically insert Typed.js CSS.
attrstringundefinedAdditional attributes.
bindInputFocusEventsbooleanundefinedBind input focus events.
contentTypestringundefinedSpecify content type (e.g., 'html', 'text').
cursorColorstringundefinedCustomize cursor color.
ngClassstringundefinedApply custom classes.

Available Outputs

OutputEvent Emitted DataDescription
onBeginEventTypedTriggered when typing begins.
onCompleteEventTypedTriggered 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.
onLastStringBackspacedEventTypedTriggered 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.
onResetEventTypedTriggered 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.
onDestroyEventTypedTriggered when the ngx-typed2 instance is destroyed.

Available Methods

MethodDescription
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