Datasource Trigger Change

Last updated:
Edit on GitHub

Datasource Trigger Change is an Angular service in the components library that extracts the value from an event trigger element and checks if it meets a certain criteria. If the value is valid, it emits an object containing the value.

Usage

Service configuration:

ATTRIBUTE DESCRIPTION
type A datasource type.
event An event type triggered by element.
debounce Delays the emission of values of the next datasource; by default, delays by 300ms.
minCharacters Emits the trigger element value if the length is greater than or equal to the minCharacters property. The default value is 2.
datasource the next datasource that runs based on the dependent element value, like http.

Usage example:

<spy-select
    [datasource]="{
        type: 'trigger',
        event: 'change',
        debounce: 400,
        minCharacters: 3,
        datasource: {
            type: 'http',
            url: '/request-url',
        },
    }"
>
</spy-select>

Service registration

Register the service

declare module '@spryker/datasource' {
    interface DatasourceRegistry {
        trigger: DatasourceTriggerService;
    }
}

@NgModule({
    imports: [
        DatasourceModule.withDatasources({
            trigger: DatasourceTriggerService,
        }),
        DatasourceTriggerModule.withEvents({
            change: ChangeDatasourceTriggerService,
        }),
    ],
})
export class RootModule {}

Interfaces

Datasource Trigger Change interfaces:

import { DatasourceTriggerConfig } from '@spryker/datasource.trigger';

export interface ChangeDatasourceTriggerConfig extends DatasourceTriggerConfig {
    minCharacters?: number;
}

export type ChangeDatasourceTriggerHTMLElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;