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

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>

Dropdown List Option Grouping

What You Will See

Basic Usage

Suggested Links