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 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. |