ngx-typed-js

# ngx-typed-js An Angular integration for [Typed.js](https://github.com/mattboldt/typed.js/). Typed.js is a library that types. Enter in any string, and watch it type at the speed you've set, backspace what it's typed, and begin a new sentence for however many strings you've set. [![NPM](https://nodei.co/npm/ngx-typed-js.png)](https://nodei.co/npm/ngx-typed-js/) [Live demo](https://vlad.vidac.software/) - [Source code](https://github.com/thevladeffect/portfolio) ## Table of contents - [Installation](#installation) - [Usage](#usage) - [Example](#examples) # Installation ``` npm install --save ngx-typed-js ``` ## Import in your module ```javascript import {NgxTypedJsModule} from 'ngx-typed-js'; @NgModule({ imports: [ NgxTypedJsModule, ], }) export class AppModule { } ``` # Usage To start using it add the `ngx-typed-js` component to your template and pass the text, which should be typed to the `strings` input. In addition you need to pass an element with the class `typing` to the component tag. ```html <ngx-typed-js [strings]="['Bananas are awesome', 'Nobody can argue this fact.']"> <h1 class="typing"></h1> </ngx-typed-js> ``` The `typing` class also allows you to just animate certain parts of a string: ```html <ngx-typed-js [strings]="['amazing.', 'yellow.', 'delicious.']" [shuffle]="true" [typeSpeed]="40"> Bananas are <span class="typing"></span> </ngx-typed-js> ``` ## Accessing methods exposed by vanilla Typed.js You can access the methods on your `Typed` object by using a `@ViewChild` decorator: ```javascript @ViewChild(NgxTypedJsComponent) typed: NgxTypedJsComponent; ``` ## Properties You can make use of the following properties in order to customize your typing experience: | Property | Type | Description | Usage | |----------------------|---------|----------------------------------------------------------------------|-----------------------------------------------------------------| | strings | Array | strings to be typed | `[strings]="['Text 1', 'Text 2']"` | | stringsElement | String | ID of element containing string children | `[stringsElement]="'myId'"` | | typeSpeed | Number | type speed in milliseconds | `[typeSpeed]="50"` | | startDelay | Number | time before typing starts in milliseconds | `[startDelay]="1000"` | | backSpeed | Number | backspacing speed in milliseconds | `[backSpeed]="10"` | | smartBackspace | Boolean | only backspace what doesn't match the previous string | `[smartBackspace]="true"` | | shuffle | Boolean | shuffle the strings | `[shuffle]="true"` | | backDelay | Number | time before backspacing in milliseconds | `[backDelay]="100"` | | fadeOut | Boolean | Fade out instead of backspace | `[fadeOut]="true"` | | fadeOutClass | String | css class for fade animation | `[fadeOutClass]="'fadeOutClass'"` | | fadeOutDelay | Number | fade out delay in milliseconds | `[fadeOutDelay]="100"` | | loop | Boolean | loop strings | `[loop]="true"` | | loopCount | Number | amount of loops | `[loopCount]="3"` | | showCursor | Boolean | show cursor | `[showCursor]="true"` | | cursorChar | String | character for cursor | `[cursorChar]="'_'"` | | autoInsertCss | Boolean | insert CSS for cursor and fadeOut into HTML | `[autoInsertCss]="true"` | | attr | String | attribute for typing Ex: input placeholder, value, or just HTML text | `[attr]="'placeholder'"` | | bindInputFocusEvents | Boolean | bind to focus and blur if el is text input | `[bindInputFocusEvents]="true"` | | contentType | String | 'html' or 'null' for plaintext | `[contentType]="'html'"` | These are the same properties used with vanilla Typed.js. For more information about them check out the original project. In addition to the original properties I have added a new one: `cursorColor`. This takes the value of a CSS color string (e.g. `[color]="red"`, `[color]="#fff"`). By default, the cursor color and size will be set to the values of computed styles of the passed `.typing` element. ## Events You can listen to the following events: | Event | Description | Usage | |------------------------|----------------------------------------------------------------------|-----------------------------------------------------------------| | completed | All typing is complete | `(completed)="doSmth()"` | | preStringTyped | Before each string is typed | `(preStringTyped)="doSmth(indexOfString)"` | | stringTyped | After each string is typed | `(stringTyped)="doSmth(indexOfString)"` | | lastStringBackspaced | During looping, after last string is typed | `(lastStringBackspaced)="doSmth()"` | | typingPaused | Typing has been stopped | `(typingPaused)="doSmth(indexOfString)"` | | typingResumed | Typing has been started after being stopped | `(typingResumed)="doSmth(indexOfString)"` | | reset | After reset | `(reset)="doSmth()"` | | stopped | After stop | `(stopped)="doSmth(indexOfString)"` | | started | After start | `(started)="doSmth(indexOfString)"` | | destroyed | After destroy | `(destroyed)="doSmth()"` | # Examples ```html  <ngx-typed-js [strings]="['awesome', 'amazing']" [loop]="true" (completed)="doSmth()"> <h2>We are an <span class="typing"></span> company!</h2> </ngx-typed-js>  <ngx-typed-js [strings]="['This is text ^1000 which gets paused for 1 second']"> <h2 class="typing"></h2> </ngx-typed-js> ``` ## Thank you Big thanks to the author of [vue-typed-js](https://github.com/Orlandster/vue-typed-js) from which I inspired heavily and of course to the original author of [Typed.js](https://github.com/mattboldt/typed.js/). Contributions are welcome. # License [MIT](https://opensource.org/licenses/MIT)