Generic Dropdown

The GenericDropdownComponent is a dynamic Angular component for creating customizable dropdown menus. It supports both static and remote data sources, lazy loading for performance optimization, and translation for option labels. Designed to integrate seamlessly with Angular applications, it enables real-time data updates, event-driven interactions, and flexible configurations for various use cases.

How to use the component in your app :

1. import the component :

import {GenericDropdownComponent} from '@tradinos/cms-frontend-form';

1. The selector for component , like it :

<lib-cms-generic-dropdown></lib-cms-generic-dropdown>

Features

1. Dynamic and Static Data Support:

   • Fetches dropdown options from static lists or remote data sources via API endpoints.

2. Lazy Loading:

   • Optimized for large datasets with lazy loading support through ScrollerOptions.

3. Translation Support:

   • Translates dropdown option labels using the PrimeNG translation service.

4. Customizable Behavior:

   • Fully configurable via the DropdownConfiguration object, allowing customization of labels, value mapping, and more.

5. Pre-Selection:

   • Automatically selects options based on predefined indices or custom logic (indexFn).

6. Event-Driven:

   • Emits optionChange and valueChange events for real-time integration with parent components.

7. Caching:

   • Uses HttpCacheManager to cache API responses, optimizing repeated requests for the same data.

8. Validation States:

   • Handles disabled and invalid states for enhanced form integration.

9. Loading State:

   • Displays a loading indicator while fetching data from remote sources.

Inputs

Input	Type	Description	Default value
configuration	DropDownConfiguration	The key used to uniquely identify the data being updated.	-
disabled	boolean | null	A dictionary of custom templates to customize specific parts of the form.	null
option	any	The initial data to pre-fill the form fields.	-
loading	boolean	Controls whether the submit button is displayed.	false
invalid	boolean	Marks the component as invalid when set to true.	false
placeHolder	string	Placeholder text for the dropdown.	-

This is the options in DropDownConfiguration type:

{
  showClear?: boolean;//Indicates if a "clear" button should be displayed to reset the selected value.
                     //Default value is false
  filter?: boolean;//Enables filtering within the dropdown options. When true, a search input appears for filtering the items.
  filterBy: string;//Specifies the field in the options array used for filtering (e.g., 'name' for filtering by names).
  optionLabel: string;//Defines the field in the options array to be displayed as the label for each dropdown item.
  translate?: boolean;//Determines if the option labels should be translated using a translation service. Defaults to false.
  options: any[];//A static array of options for the dropdown.
  optionsFn?: () => any[]; // A function that dynamically generates the dropdown options when called.
  valueBy: string;// Specifies the field in the options array whose value will be emitted when an option is selected (e.g., 'id').
  remoteDataConfiguration?: RemoteDataConfiguration;//Configuration for fetching options from a remote API. Includes endpoint, query parameters, and response mapping.
  index?: number;//Specifies the default selected option by its index in the options array.
  index$?: BehaviorSubject<number | undefined>;//A reactive stream that dynamically sets the selected option based on the emitted index value.
  indexFn?: (items: any[]) => number;//A custom function to determine the default selected option based on the options array.
  onChange?: (value: any) => void;//A callback function triggered when the selected option changes. Receives the selected value as an argument.
  template?: OptionTemplate;//A template reference used to customize the appearance of dropdown options.
}

For example:

typescript:

dropdownConfig={
 showClear: true;
  filter: true;
  filterBy: 'name';
  options: [],//Static options or leave empty for remote data
  remoteDataConfiguration: {
    endPoint: 'api/options',
    queryParams: { limit: 10 },
    mapHttpResponse: (response: any[]) => response.map((item) => ({ label: item.name, value: item.id })),
    cache: true,
  },
  optionLabel: 'label',//Field to display as option labels
  valueBy: 'id',//Field to use as the selected value
  index: 0,//Default pre-selected index
  translate: true,//Enable translation of labels
};

html:

<cms-generic-dropdown
  [configuration]="dropdownConfig"
  [disabled]="false"
  [loading]="true"
  [placeHolder]="'Select an option'">
</cms-generic-dropdown>

Outputs

Output	Type	Description
optionChange	EventEmitter<any>	Emits the selected option whenever the user makes a selection.
valueChange	EventEmitter<any>	Emits the value of the selected option.

Methods

1. ngOnInit()

• Description:

  • Initializes the dropdown by setting up options, applying translations, and handling reactive streams for dynamic updates.

• Parameters: None.

2. fetchOptions(endPoint: string, queryParams?: any): void

• Description:

  • Fetches options from a remote data source and updates the dropdown list.

  • Uses caching for optimization and applies a response mapping function (mapHttpResponse).

• Parameters:

  • endPoint: The API endpoint URL.

  • queryParams (optional): Additional query parameters for the API request.

3. selectIndex(value?: number): void

• Description:

  • Selects an option based on a predefined index or custom logic (indexFn).

• Parameters:

  • value (optional): Index of the option to select.

4. onChange(event: Partial<DropdownChangeEvent>): void

• Description:

  • Handles option selection changes and emits the optionChange and valueChange events.

• Parameters:

  • event: The change event containing the selected option.