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

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

Outputs