Documentation

Streaming Text

Typewriter effect component for streaming AI responses with configurable speed and cursor animation.

Installation 

1import { StreamingTextComponent } from '@angular-ai-kit/core';

Live Demo

Hello! I am an AI assistant. This text is being streamed character by character to simulate how AI responses appear in real-time chat applications.

Configuration

Show Cursor
Speed: 30ms per character

API Reference

Inputs

Prop Type Default Description
content string required Full text content to display
isStreaming boolean false Whether text is currently streaming
speed number 30 Milliseconds per character
showCursor boolean true Show blinking cursor during streaming
cursorChar string '▊' Character used for cursor
customClasses string '' Additional CSS classes

Usage Example 

1<ai-streaming-text2  [content]="message.content"3  [isStreaming]="message.status === 'streaming'"4  [speed]="30"5  [showCursor]="true"6/>

Accessibility

  • Uses aria-live for screen reader announcements
  • Cursor animation respects prefers-reduced-motion
  • Content remains accessible during streaming
  • Supports keyboard focus management