Home

Awesome

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-messengerAngular
1.0.0 - 1.2.016.xx 17.xx
1.3.017.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

InputTypeDescription
stringsstring[]An array of strings to be typed.
typeSpeednumberThe speed at which the strings are typed, in milliseconds.
startDelaynumberThe delay before the first string is typed, in milliseconds.
backSpeednumberThe speed at which the strings are back-spaced, in milliseconds.
smartBackspacebooleanWhen use smart backspace, which means that the typing will stop <br> when the next string starts with the same characters as the current string.
shufflebooleanWhether to shuffle the strings before typing them.
backDelaynumberThe delay before the back-spacing starts, in milliseconds.
isHTMLbooleanWhether the strings contain HTML.
fadeOutbooleanWhether the component should fade out after each string is typed.
loopbooleanWhen you activate the loop, the list of strings loops infinitely with the typing animation.
showCursorbooleanWhether to show a cursor while the component is typing.
cursorCharstringThe character to use for the cursor.
fadeOutDelaynumberThe delay before the component starts to fade out, in milliseconds.

Outputs

OutputDescription
destroyEmitted when the component is destroyed.
initTypedEmitted when the first string is typed.
completeLoopEmitted when the last string is typed and the component loops back to the beginning.