Angular component for typing text animation . Angular SSR and Universal ( previous Angular 16 ) Friendly.
Based in Typed.JS
Rewriter native for Angular
See a live demo
Latest version available for each version of Angular
ngx-facebook-messenger | Angular |
---|---|
1.0.0 - 1.2.0 | 16.xx 17.xx |
1.3.0 | 17.x 18.xx |
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>
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>
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 × ©'
]"
[shuffle]="true"
[isHTML]="true"
[backSpeed]="20"
[typeSpeed]="30"
>
</ngx-typed-writer>
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>
npm install ngx-typed-writer
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. |
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. |
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. |