# Typewriter

> Types and deletes strings with a blinking cursor.

Source: https://ngwr.dev/bits/typewriter  
Updated in v15

## Installation

Import the class, and `@use` the entry point in your global styles: without it the component renders unstyled.

```typescript
import { Component } from '@angular/core';
import { WrTypewriter } from 'ngwr/bits/typewriter';

@Component({ imports: [WrTypewriter] })
export class MyComponent {}
```

```scss
@use 'ngwr/bits/typewriter';
```

## Playground

```angular-html
<wr-typewriter
  [texts]="['design.', 'ship.', 'iterate.']"
  [typingSpeed]="50"
  [deletingSpeed]="30"
  [pauseDuration]="2000"
  [loop]="true"
  cursorCharacter="|"
/>
```

```angular-ts
import { Component } from '@angular/core';

import { WrTypewriter } from 'ngwr/bits/typewriter';

/**
 * Playground
 */
@Component({
  selector: 'ngwr-the-angular-ui-library-for-signal-forms-playground-example',
  templateUrl: './ngwr-the-angular-ui-library-for-signal-forms-playground-example.html',
  imports: [WrTypewriter],
})
export class NgwrTheAngularUiLibraryForSignalFormsPlaygroundExample {}
```

## 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` |

## See also

- [Rotating Text](https://ngwr.dev/bits/rotating-text) — Cycles through a list of words in one place.
- [Decrypt Text](https://ngwr.dev/bits/decrypt-text) — Text that scrambles, then resolves into the real string.
- [Split Text](https://ngwr.dev/bits/split-text) — Reveals text piece by piece when it scrolls into view.