Datasource Dependable

Last updated:
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.

Usage

Service configuration:

ATTRIBUTE DESCRIPTION
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">
    <spy-select
        [options]="{ ... }"
    >
    </spy-select>
</spy-datasource-dependable>

<spy-select
    [datasource]="{
        type: 'dependable-element',
        id: 'dependable-select',
        datasource: {
            type: 'http',
            url: '/request-url',
        },
    }"
>
</spy-select>

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:

@Component({
    ...,
    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;
    }
}

@NgModule({
    imports: [
        DatasourceModule.withDatasources({
            '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>;
}