Skip to content

A Native Angular 2+ Typing Animation Library , Angular SSR , Angular Universal Friendly

Notifications You must be signed in to change notification settings

SkyZeroZx/ngx-typed-writer

Repository files navigation

NgxTypedWriter | Angular

Angular component for typing text animation . Angular SSR and Universal ( previous Angular 16 ) Friendly.

Based in Typed.JS

Rewriter native for Angular

DEMO

See a live demo

Versions

Latest version available for each version of Angular

ngx-facebook-messenger Angular
1.0.0 - 1.2.0 16.xx 17.xx
1.3.0 17.x 18.xx

Basic Usage

Typing a list of strings with tipping text efect

<ngx-typed-writer [strings]="['This a Angular Library', 'Angular Universal Friendly']" [cursorChar]="'_'" [showCursor]="true" [backSpeed]="30" [typeSpeed]="30"> </ngx-typed-writer>

Fade Out Effect

Typing a list of strings with fade out effect enable fadeOut and configure fadeOutDelay

<ngx-typed-writer [strings]="['This a Angular Library', 'Angular Universal Friendly']" [fadeOut]="true" [fadeOutDelay]="200" [showCursor]="false" [backSpeed]="30" [typeSpeed]="30"> </ngx-typed-writer>

Shuffled

Randomized typing list of string with enable shuffle

<ngx-typed-writer
  [strings]="[
        '1 Some <i>strings</i> with',
        '2 Some <strong>HTML</strong>',
        '3 Chars &times; &copy;'
      ]"
  [shuffle]="true"
  [isHTML]="true"
  [backSpeed]="20"
  [typeSpeed]="30"
>
</ngx-typed-writer>

Smart BackSpace

In the following example emable smartBackspace, this would only backspace the words after "My List of strings :"

<ngx-typed-writer
  [strings]="[
        'My List of strings : Angular',
        'My List of strings : Universal',
        'My List of strings : <strong>HTML</strong>'
      ]"
  [isHTML]="true"
  [smartBackspace]="true"
  [backSpeed]="20"
  [typeSpeed]="30"
></ngx-typed-writer>

Usage

Install

npm install ngx-typed-writer

Import into Module

import { NgxTypedWriterModule } from 'ngx-typed-writer';

@NgModule({
  imports: [
    ...,
    NgxTypedWriterModule
  ],
  declarations: [...],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

API

Inputs

Input Type Description
strings string[] An array of strings to be typed.
typeSpeed number The speed at which the strings are typed, in milliseconds.
startDelay number The delay before the first string is typed, in milliseconds.
backSpeed number The speed at which the strings are back-spaced, in milliseconds.
smartBackspace boolean When use smart backspace, which means that the typing will stop
when the next string starts with the same characters as the current string.
shuffle boolean Whether to shuffle the strings before typing them.
backDelay number The delay before the back-spacing starts, in milliseconds.
isHTML boolean Whether the strings contain HTML.
fadeOut boolean Whether the component should fade out after each string is typed.
loop boolean When you activate the loop, the list of strings loops infinitely with the typing animation.
showCursor boolean Whether to show a cursor while the component is typing.
cursorChar string The character to use for the cursor.
fadeOutDelay number The delay before the component starts to fade out, in milliseconds.

Outputs

Output Description
destroy Emitted when the component is destroyed.
initTyped Emitted when the first string is typed.
completeLoop Emitted when the last string is typed and the component loops back to the beginning.