Consuming Context (Using Streams)

Streaming

accepts an optional selector map; and derives a change stream context store.data of derived signal fields.

injected store monitors changes in the underlying state slices referenced by the selector map.

updates the store.data fields in realtime reflecting changes in any of the state slices at which they reference.

The `StreamService` Class

A StreamService instance streams to a client all changes occuring within an Angular Eagle Eye context store.

A StreamService instance holds 3 store properties.

Note: Attention

The StreamService produces automatic signals for its data properties.

Changes can be made directly to data properties.

Those changes do not affect context data.

Only a StreamService or its originating ContextService can write into a related context.

`provideStreamService(...)`

The provideStreamService(...) is the stream service provider. See usage here. It creates and provides the streaming service for the Angular Eagle Eye context service.

To stream the Angular Eagle Eye context in Angular environment, a StreamService class has been provided. This service can be provided to the Angular application environment in two options. Namely:

at the root level (i.e. visible globally within the app).
at the scope level (visible within a specific section of the app).

Service Configuration

Before we begin with the creation and provision of this service, let us pave the way by acquainting ourselves with the input configurations expected by this service provider.

Configuration Object:

Property	Type	Optional	Description
contextRef	InjectionToken<ContextService<STATE>>	Yes	A custom reference handle to the context instance to stream. When none provided, `ContextService` will be used.
ref	InjectionToken<StreamService<STATE>>	Yes	A custom reference handle to this stream instance. When none provided, `StreamService` will be used.
selectorMap	SelectorMap	Yes	Please see selector map

Streaming Example

Let us stream a few state slices from a proverbial context store. We assume that a certain non-custom referenced ContextService instance has already been provisioned in the DI chain. Our StreamService example here will be streaming its underlying context.

In this example, we will provide this StreamService instance exactly at our client component scope. Keep in mind that this particular StreamService may well have been provided at the root level or at any scope preceding this component -- doing this only makes it injectable to a larger client scope within the application.

import { provideStreamService } from '@webkrafters/ng-eagleeye';
import type { StateType } from './context/definition';

const PATH = 'a.c.e.g';

cont selectorMap = { point: PATH } as const;

@Component({
	providers: [ provideStreamService({ selectorMap }) ],
    template: `
        <div>
            <div>
                <label>Current point: </label>
                <input type="text" readonly [value]="data.point()" />
            </div>
            <button (click)="resetPoint()">
                reset point
            </button>
        </div>
    `
})
export class TestComponent {
	streamService = inject( StreamService<StateType, typeof selectorMap> );
    data = {} as unknown as DataSignals<StateType, typeof selectorMap>;
	constructor() {
		this.data = this.streamService.data;
	}
    resetPoint() {
        this.streamService.resetState([ PATH ]);
    }
}