# Rotating Text

> Cycles through a list of words in one place.

Source: https://ngwr.dev/bits/rotating-text  
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 { WrRotatingText } from 'ngwr/bits/rotating-text';

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

```scss
@use 'ngwr/bits/rotating-text';
```

## Playground

```angular-html
<wr-rotating-text
  [texts]="['design', 'ship', 'iterate']"
  [rotationInterval]="2000"
  splitBy="characters"
  [duration]="0.6"
  easing="cubic-bezier(0.16, 1, 0.3, 1)"
  [staggerDuration]="0"
  staggerFrom="first"
  [loop]="true"
/>
```

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

import { WrRotatingText } from 'ngwr/bits/rotating-text';

/**
 * 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: [WrRotatingText],
})
export class NgwrTheAngularUiLibraryForSignalFormsPlaygroundExample {}
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `texts`required | Strings to cycle. | `readonly string[]` | — |
| `rotationInterval` | Auto-advance interval in ms. | `number` | `2000` |
| `splitBy` | Granularity of the split. | `'characters' \| 'words' \| 'lines'` | `'characters'` |
| `auto` | Auto-advance on a timer. | `boolean` | `true` |
| `loop` | Loop back to the first string after the last. | `boolean` | `true` |
| `duration` | Per-swap tween duration in seconds. | `number` | `0.6` |
| `easing` | CSS easing of the per-piece tween. | `string` | `'cubic-bezier(0.16, 1, 0.3, 1)'` |
| `staggerDuration` | Per-piece stagger in seconds. | `number` | `0` |
| `staggerFrom` | Stagger origin. | `'first' \| 'last' \| 'center'` | `'first'` |
| `(nextChange)` | Emits with the new index on every rotation. | `number` | `—` |
| `next() / previous() / jumpTo(i) / reset()` | Imperative methods on the component instance. | `method` | `—` |

## See also

- [Typewriter](https://ngwr.dev/bits/typewriter) — Types and deletes strings with a blinking cursor.
- [Split Text](https://ngwr.dev/bits/split-text) — Reveals text piece by piece when it scrolls into view.
- [Decrypt Text](https://ngwr.dev/bits/decrypt-text) — Text that scrambles, then resolves into the real string.
- [Circular Text](https://ngwr.dev/bits/circular-text) — Text laid out on a spinning circle.