import { Component } from '@angular/core';
import { WrTypewriter } from 'ngwr/bits/typewriter';
@Component({ imports: [WrTypewriter] })
export class MyComponent {}Typewriter
Types and deletes strings with a blinking cursor.
Installation
Import the class, and @use the entry point in your global styles: without it the component renders unstyled.
Angular adaptation of an effect by David Haz / reactbits.dev.
Playground
We design.
<wr-typewriter
[texts]="['design.', 'ship.', 'iterate.']"
[typingSpeed]="50"
[deletingSpeed]="30"
[pauseDuration]="2000"
[loop]="true"
cursorCharacter="|"
/>Customize
Typing Speed (ms)
Deleting Speed (ms)
Pause (ms)
Loop
Cursor
API
| Name | Description | Type | Default |
|---|---|---|---|
text | A single string to type. Set this or texts. | string | — |
texts | Strings to cycle. Set this or text. | readonly string[] | — |
typingSpeed | Per-char typing speed in ms. | number | 50 |
initialDelay | Delay before typing starts, in ms. | number | 0 |
pauseDuration | Pause after typing complete, before deleting, in ms. | number | 2000 |
deletingSpeed | Per-char deletion speed in ms. | number | 30 |
loop | Loop back to the first string after the last. | boolean | true |
showCursor | Show the cursor glyph. | boolean | true |
hideCursorWhileTyping | Hide the cursor while typing / deleting. | boolean | false |
cursorCharacter | Cursor glyph. | string | '|' |
cursorBlinkDuration | Cursor blink half-cycle in seconds. | number | 0.5 |
textColors | Cycle through these colours per string. | readonly string[] | [] |
variableSpeed | Randomise typing speed per char between min and max. | { min: number; max: number } | — |
reverseMode | Type each string backwards. | boolean | false |
startOnVisible | Start only after the host enters the viewport. | boolean | false |
(sentenceComplete) | Emits { text, index } when a string finishes typing. | { text: string; index: number } | — |
CSS variables
Set these on the component's selector or a wrapper, not on :root: the defaults are declared on ngwr/bits/typewriter's own element.
| Variable | Default | Declared on |
|---|---|---|
--wr-typewriter-cursor-blink | 0.5s | .wr-typewriter |