Skip to content

shiv-source/ngx-typed2

Repository files navigation

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

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