A Angular 2+ Typing Animation Library. Angular SSR Friendly
npm install ngx-typed-writerAngular SSR-friendly typing text animation component with zoneless compatibility.
Based in Typed.JS
Rewritten natively for Angular
See a live demo
Latest version available for each version of Angular
| ngx-typed-writer | Angular |
| ---------------- | ----------- |
| 1.0.0 - 1.2.0 | 16.xx 17.xx |
| 1.3.0 | 17.x 18.xx |
| 1.4.0 | 18.x 19.xx |
| 1.5.0 | 19.x 20.xx |
| 1.6.0 | 20.x 21.xx |
Typing a list of strings with tipping text efect
``html`
Typing a list of strings with fade out effect enable fadeOut and configure fadeOutDelay
`html`
Randomized typing list of string with enable shuffle
`html`
'1 Some strings with',
'2 Some HTML',
'3 Chars × ©'
]"
[shuffle]="true"
[isHTML]="true"
[backSpeed]="20"
[typeSpeed]="30"
>
In the following example emable smartBackspace, this would only backspace the words after "My List of strings :"
`html`
'My List of strings : Angular',
'My List of strings : Universal',
'My List of strings : HTML'
]"
[isHTML]="true"
[smartBackspace]="true"
[backSpeed]="20"
[typeSpeed]="30"
>
`bash`
npm install ngx-typed-writer
`typescript
import { NgxTypedWriterComponent } from 'ngx-typed-writer';
@NgModule({
imports: [
...,
NgxTypedWriterComponent
]
})
export class AwesomeComponent { }
`
`typescript
import { NgxTypedWriterModule } from 'ngx-typed-writer';
@NgModule({
imports: [
...,
NgxTypedWriterModule
],
declarations: [...],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
`
| Input | Type | Description |
| -------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| strings | string[] | An array of strings to be typed. |number
| typeSpeed | | The speed at which the strings are typed, in milliseconds. |number
| startDelay | | The delay before the first string is typed, in milliseconds. |number
| backSpeed | | The speed at which the strings are back-spaced, in milliseconds. |boolean
| smartBackspace | | When use smart backspace, which means that the typing will stop boolean
when the next string starts with the same characters as the current string. |
| shuffle | | Whether to shuffle the strings before typing them. |number
| backDelay | | The delay before the back-spacing starts, in milliseconds. |boolean
| isHTML | | Whether the strings contain HTML. |boolean
| fadeOut | | Whether the component should fade out after each string is typed. |boolean
| loop | | When you activate the loop, the list of strings loops infinitely with the typing animation. |boolean
| showCursor | | Whether to show a cursor while the component is typing. |string
| cursorChar | | The character to use for the cursor. |number` | The delay before the component starts to fade out, in milliseconds. |
| fadeOutDelay |
| 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. |