Datasource Trigger Input

Last updated:
Edit on GitHub

Datasource Trigger Input 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 depended element value (e.g. http.

Usage example:

<spy-select
    [datasource]="{
        type: 'trigger',
        event: 'input',
        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({
            input: InputDatasourceTriggerService,
        }),
    ],
})
export class RootModule {}

Interfaces

Interfaces for Datasource Trigger Input:

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

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

export type InputDatasourceTriggerHTMLElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;