Skip to content

Split text

@xngui/components/split-text
@xngui/components/split-text

Splits text into indexed units for custom animation.

Preview

Hover each word
import { Component } from '@angular/core';
import { XSplitText } from '@xngui/components/split-text';
 
@Component({
selector: 'app-example',
imports: [XSplitText],
templateUrl: './split-text.component.html',
})
export class ExampleComponent {
protected onUnitsReady(units: readonly { index: number; text: string }[]): void {
// unitsReady
}
}

Events 1

  1. unitsReady
    {
      "unitCount": 5
    }