This is a simple type-on effect component for angular/ionic websites.

Demo page

https://viktorhajer.github.io/ng-typing/

Features

• Easy to use
• Reference animation speed can be defined
• With the Deviation parameter the speed can be randomized
• Typo can be turn on/off and in case of type the probability also can be changed (in percent)

Installation Instructions and Usage

npm install ng-typing --save

Add TypingModule to your module's imports

In component HTML

    <typing [message]="'Hello World!'" [referenceSpeed]="30" [typo]="false"></typing>

Input parameters

| Signature | Short Description | | :------------- |:-------------| | message | The message which should be animated. | | referenceSpeed | The reference speed in millisecond (the rendering time for a letter). It is 60ms by default. | | speedDeviation | The deviation amount of the speed. It should be lower then the reference speed. 30ms by default. | | typo | Field to enable the typing errors. | | typoProbability | The probability of the typo in percent. It is 5% by default (maximum value is 80%). |

Output emmiters

| Signature | Short Description | | :------------- |:-------------| | onCompleted | Fired when the animation is completed. |

Contribute

See CONTRIBUTING.md

License

MIT © Viktor Hajer