Dropdown List Option Grouping
This feature allow users to group data into separate categories and show them in the same Dropdown. please note option grouping is possible when only one or more data is available.
What You Will See
Select
import { Component } from '@angular/core'; import { ExampleData } from 'helper-models'; import { DataFetchService } from 'helper-services'; @Component({ selector: 'app-option-grouping-usage', templateUrl: './option-grouping-usage.component.html' }) export class OptionGroupingUsageComponent { public options: ExampleData[]; constructor(private dataFetchService: DataFetchService) { this.options = this.dataFetchService.fetchStaticData(); } }
<ng-dropdown [id]="'products_features_13'" [selectTrackBy]="'id'" [displayTrackBy]="'productType'" [groupByField]="'productLine'" [showOptionSelectCheckbox]="true" [options]="options" [limit]="50"> </ng-dropdown>
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { DropdownModule } from 'ornamentum'; import { OptionGroupingUsageComponent } from './option-grouping-usage.component'; @NgModule({ bootstrap: [OptionGroupingUsageComponent], declarations: [OptionGroupingUsageComponent], imports: [ BrowserModule, DropdownModule.forRoot() ] }) export class OptionGroupingUsageModule { }
Basic Usage
For enable multiple option grouping, it is required to bind a specific string field name into groupByField
property. by default it is set to undefined.
<ng-dropdown ... [groupByField]="'productLine'"> </ng-dropdown>
Suggested Links
Option FilteringClient-side Basic Data Binding
Translations
API Doc for Dropdown Option Grouping