DocsAPI ReferencestreamResource()

streamResource()

streamResource is the core primitive of the library. It creates a reactive resource that opens a server-sent event stream, tracks loading and error states, and exposes the latest emitted value — all within Angular's signal-based reactivity model.

When the url signal changes, the resource tears down the previous connection and opens a fresh one automatically. You never write subscription management or cleanup logic yourself.

import { streamResource } from '@cacheplane/stream-resource';
 
// Inside a component or service with injection context
const repo = streamResource<Repository>({
  url: () => `/api/repos/${this.repoId()}`,
  transport: inject(FetchStreamTransport),
});
 
// Use in template
// repo.value()     — latest emitted value (or undefined)
// repo.status()    — 'idle' | 'loading' | 'streaming' | 'error'
// repo.error()     — the thrown error, when status is 'error'
// repo.interrupt() — call to cancel the stream immediately

Key signals

| Signal | Type | Description | |--------|------|-------------| | value() | T \| undefined | The latest value emitted by the stream. Starts as undefined and updates with each SSE event. | | status() | 'idle' \| 'loading' \| 'streaming' \| 'error' | Lifecycle state of the current connection. | | error() | unknown | The error thrown when status() is 'error'. undefined otherwise. | | interrupt() | () => void | Closes the active stream without an error — useful for user-initiated cancellation. |

When to use

Use streamResource whenever your UI needs to react to a live data stream from the server:

  • AI / LLM responses — stream tokens into a chat bubble as they arrive
  • Live feeds — stock tickers, activity logs, or progress updates
  • Long-running jobs — subscribe to backend task progress over SSE

For plain HTTP requests that return a single value and complete, Angular's built-in resource() or httpResource() is a better fit.

Injection context required

streamResource must be called during construction, inside an injection context (e.g. a component constructor, field initializer, or a function passed to runInInjectionContext). Calling it outside an injection context will throw.

What's Next

streamResourcefunction

Creates a streaming resource connected to a LangGraph agent. Must be called within an Angular injection context (component constructor, field initializer, or `runInInjectionContext`). Returns a ref object whose properties are Angular Signals that update in real-time as the agent streams.

streamResource(options: StreamResourceOptions<T, InferBag<T, Bag>>): StreamResourceRef<T, InferBag<T, Bag>>

Parameters

ParameterTypeDescription
optionsStreamResourceOptions<T, InferBag<T, Bag>>Configuration for the streaming resource

Returns

StreamResourceRef<T, InferBag<T, Bag>>

Examples

// In a component field initializer
const chat = streamResource<{ messages: BaseMessage[] }>({
  assistantId: 'chat_agent',
  apiUrl: 'http://localhost:2024',
  threadId: signal(this.savedThreadId),
  onThreadId: (id) => localStorage.setItem('threadId', id),
});

// Access signals in template
// chat.messages(), chat.status(), chat.error()