Dropdown List Option Filtering
This feature will allow end-users to filter specific field set by searching them on Dropdown filter bar. After enabling filtering it will filter data on every Filter Debounce Time when on idle after user's every keystroke.
Once after enable filtering by default ornamentum will activate Filter Debounce and set specific Filter Debounce Time in to dropdown. for more details about debouncing please refer Useful Properties from below.
What You Will See
import { Component } from '@angular/core'; import { Observable, of } from 'rxjs'; import { ExampleData } from 'helper-models'; import { DataFetchService } from 'helper-services'; @Component({ selector: 'app-option-filtering-usage', templateUrl: './option-filtering-usage.component.html' }) export class OptionFilteringUsageComponent { public dataSource: Observable<ExampleData[]>; constructor(private dataFetchService: DataFetchService) { this.dataSource = of(this.dataFetchService.fetchStaticData()); } }
<ng-dropdown [id]="'products_features_16'" [selectTrackBy]="'id'" [displayTrackBy]="'productType'" [dataSource]="dataSource" [limit]="50" [filterable]="true" [filterText]="'Cooking'"> </ng-dropdown>
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { DropdownModule } from 'ornamentum'; import { OptionFilteringUsageComponent } from './option-filtering-usage.component'; @NgModule({ bootstrap: [OptionFilteringUsageComponent], declarations: [OptionFilteringUsageComponent], imports: [ BrowserModule, DropdownModule.forRoot() ] }) export class OptionFilteringUsageModule { }
Basic Usage
For enabling filtering, it is mandatory to set filterable
to true. by default filterable is set to false and therefore filtering option will be disabled on default dropdown.
<ng-dropdown ... [filterable]="true"> </ng-dropdown>
Useful Properties
In addition to the filtering property, there are few more properties that will affect to the behaviour of filtering and can be use with together once filterable
was enabled.
Filter Debounce
filterDebounce: boolean
Default Value: true
Filter Debounce is responsible for listening more user inputs on user every keystroke on dropdown filter bar and search them as a bundle on every Filter Debounce Time. this will be happen recursively if user has continuously providing inputs.
import { Component } from '@angular/core'; import { Observable, of } from 'rxjs'; import { ExampleData } from 'helper-models'; import { DataFetchService } from 'helper-services'; @Component({ selector: 'app-filter-debounce-usage', templateUrl: './filter-debounce-usage.component.html' }) export class FilterDebounceUsageComponent { public dataSource: Observable<ExampleData[]>; constructor(private dataFetchService: DataFetchService) { this.dataSource = of(this.dataFetchService.fetchStaticData()); } }
<ng-dropdown [id]="'products_features_15'" [selectTrackBy]="'id'" [displayTrackBy]="'productType'" [dataSource]="dataSource" [limit]="50" [filterable]="true" [filterDebounce]="true"> </ng-dropdown>
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { DropdownModule } from 'ornamentum'; import { FilterDebounceUsageComponent } from './filter-debounce-usage.component'; @NgModule({ bootstrap: [FilterDebounceUsageComponent], declarations: [FilterDebounceUsageComponent], imports: [ BrowserModule, DropdownModule.forRoot() ] }) export class FilterDebounceUsageModule { }
The key advantage is using debounce is reduce client-side operations. because filtering is perform on every Filter Debounce Time rather than filter every keystroke that user enters.
Filter Debounce Time
filterDebounceTime: number
Default Value: 500
This property is uses for defining the debounce time for perform debounce operation and property was depend on Filter Debounce, therefore can't be uses independently on dropdown operations.
import { Component } from '@angular/core'; import { Observable, of } from 'rxjs'; import { ExampleData } from 'helper-models'; import { DataFetchService } from 'helper-services'; @Component({ selector: 'app-filter-debounce-time-usage', templateUrl: './filter-debounce-time-usage.component.html' }) export class FilterDebounceTimeUsageComponent { public dataSource: Observable<ExampleData[]>; constructor(private dataFetchService: DataFetchService) { this.dataSource = of(this.dataFetchService.fetchStaticData()); } }
<ng-dropdown [id]="'products_features_19'" [selectTrackBy]="'id'" [displayTrackBy]="'productType'" [dataSource]="dataSource" [limit]="50" [filterable]="true" [filterDebounceTime]="2000"> </ng-dropdown>
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { DropdownModule } from 'ornamentum'; import { FilterDebounceTimeUsageComponent } from './filter-debounce-time-usage.component'; @NgModule({ bootstrap: [FilterDebounceTimeUsageComponent], declarations: [FilterDebounceTimeUsageComponent], imports: [ BrowserModule, DropdownModule.forRoot() ] }) export class FilterDebounceTimeUsageModule { }
Filter Text
filterText: string
Default Value: ''
This property is uses to override default filter text value for the dropdown and will be automatically filtered according to the provided text on Load Data On Init. with indicating filtered text on filter bar.
import { Component } from '@angular/core'; import { ExampleData } from 'helper-models'; import { DataFetchService } from 'helper-services'; @Component({ selector: 'app-filter-text-usage', templateUrl: './filter-text-usage.component.html' }) export class FilterTextUsageComponent { public options: ExampleData[]; constructor(private dataFetchService: DataFetchService) { this.options = this.dataFetchService.fetchStaticData(); } }
<ng-dropdown [id]="'products_features_17'" [selectTrackBy]="'id'" [displayTrackBy]="'productType'" [options]="options" [limit]="50" [filterable]="true" [filterText]="'Cooking'"> </ng-dropdown>
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { DropdownModule } from 'ornamentum'; import { FilterTextUsageComponent } from './filter-text-usage.component'; @NgModule({ bootstrap: [FilterTextUsageComponent], declarations: [FilterTextUsageComponent], imports: [ BrowserModule, DropdownModule.forRoot() ] }) export class FilterTextUsageModule { }
Server-side Option Filtering
Unlike the client side data filtering, server side filtering uses the mechanism to initiate a new API request to fetch data from the server which matches to the particular action whenever a user performs a keyword search. In order to enable this behaviour, it is necessary to use Server-side Data Binding technique.
Also all the properties described in the Useful Properties section, can be used with Server side filtering as well.
import { Component } from '@angular/core'; import { DropdownDataBindCallback, DropdownHttpResourceFactoryService } from 'ornamentum'; import { ExampleData } from 'helper-models'; @Component({ selector: 'app-option-filtering-server-side', templateUrl: './option-filtering-server-side.component.html' }) export class OptionFilteringServerSideComponent { public onDataBind: DropdownDataBindCallback<ExampleData>; constructor(private resourceFactory: DropdownHttpResourceFactoryService) { const exampleDataResource = resourceFactory.getResourceProvider<ExampleData>(); this.onDataBind = exampleDataResource.onDataBind('/api/data'); } }
<ng-dropdown [id]="'products_features_18'" [selectTrackBy]="'id'" [displayTrackBy]="'productType'" [filterable]="true" [loadOnScroll]="true" [onDataBind]="onDataBind" [filterDebounce]="true" [filterDebounceTime]="2000"> </ng-dropdown>
Suggested Links
Load Data On InitAPI Doc for Data Filtering