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

Select 
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());
  }
}

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.

Select 
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());
  }
}

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.

Select 
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());
  }
}

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.

Select 
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();
  }
}

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.

Select 
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');
  }
}
Load Data On Init
API Doc for Data Filtering