Datasource Dependable

Edit on GitHub

Datasource Dependable is an Angular service in the components library that resolves datasources for a component based on the value of a specific element.


Service configuration:

type A datasource type.
id An ID of the dependent element.
datasource The next datasource that runs based on the depended element value, like http.

Usage example:

<spy-datasource-dependable id="dependable-select">
        [options]="{ ... }"

        type: 'dependable-element',
        id: 'dependable-select',
        datasource: {
            type: 'http',
            url: '/request-url',

The dependent element, being SelectComponent in the example, must implement a DatasourceDependableElement abstract class (token) and return a component value using the getValueChanges() abstract method:

    providers: [
            provide: DatasourceDependableElement,
            useExisting: SelectComponent,
export class SelectComponent implements DatasourceDependableElement {
    getValueChanges(): Observable<SelectValueSelected> {
        // This method must return an Observable of the component value.

Service registration

Register the service:

declare module '@spryker/datasource' {
    interface DatasourceRegistry {
        'dependable-element': DatasourceDependableService;

    imports: [
            'dependable-element': DatasourceDependableService,
export class RootModule {}

Datasource Dependable interfaces

Datasource Dependable interfaces:

import { DatasourceConfig } from '@spryker/datasource';
import { Observable } from 'rxjs';

export interface DatasourceDependableConfig extends DatasourceConfig {
    id: string;
    datasource: DatasourceConfig;

export interface DatasourceDependableElementsConfig {
    [id: string]: DatasourceDependableElement;

export abstract class DatasourceDependableElement {
    abstract getValueChanges(): Observable<unknown>;