Ngx Typed Writer

Awesome Angular Library for typping text animation

Friendly with Angular Universal,Native Angular library for Typing Text,Based in Typed.Js

Basic Demo

Code

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

Fade Out

Code

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

Smart BackSpace

Code

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

Shuffled

Code

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

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.

Ouput

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.