nstreamdown

import { Component } from '@angular/core';
import { Streamdown } from '@nstudio/nstreamdown/angular';

@Component({
  selector: 'app-demo',
  template: `
    <Streamdown [content]="markdown" />
  `,
  imports: [Streamdown],
})
export class DemoComponent {
  markdown = '# Hello World!\n\nThis is **streaming** markdown!';
}

import { Component, signal } from '@angular/core';
import { Streamdown } from '@nstudio/nstreamdown/angular';

@Component({
  selector: 'app-chat',
  template: `
    <Streamdown
      [content]="streamingContent()"
      [config]="{ mode: 'streaming', showCaret: true }"
    />
  `,
  imports: [Streamdown],
})
export class ChatComponent {
  streamingContent = signal('');

  async streamFromAI() {
    const words = 'Hello! I am an **AI**...'.split(' ');
    for (const word of words) {
      this.streamingContent.update(c => c + word + ' ');
      await this.delay(50);
    }
  }

  private delay(ms: number) {
    return new Promise(resolve => setTimeout(resolve, ms));
  }
}