Datasource Trigger Change

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.


Service configuration:

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:

        type: 'trigger',
        event: 'change',
        debounce: 400,
        minCharacters: 3,
        datasource: {
            type: 'http',
            url: '/request-url',

Service registration

Register the service

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

    imports: [
            trigger: DatasourceTriggerService,
            change: ChangeDatasourceTriggerService,
export class RootModule {}


Datasource Trigger Change interfaces:

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

export interface ChangeDatasourceTriggerConfig extends DatasourceTriggerConfig {
    minCharacters?: number;

export type ChangeDatasourceTriggerHTMLElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;