Awesome

NgxTypedWriter | Angular

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

Zoneless compatibility ( experimental )

Based in Typed.JS

Rewriter native for Angular

DEMO

See a live demo

Versions

Latest version available for each version of Angular

ngx-typed-writer	Angular
1.0.0 - 1.2.0	16.xx 17.xx
1.3.0	17.x 18.xx
1.4.0	18.x 19.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 <br> 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.