Dropdown List Option Group Header Template
This feature enables users to customize the dropdown option group header view by providing their own template. to use of group header template it is mandatory to define a groupByField
property, unless option grouping is disabled and no longer need to configure grouping header template. for Option Grouping and it's usages please refer Option Grouping section for more details.
What You Will See
import { Component } from '@angular/core'; import { ExampleData } from 'helper-models'; import { DataFetchService } from 'helper-services'; @Component({ selector: 'app-option-group-header-template-usage', templateUrl: './option-group-header-template-usage.component.html' }) export class OptionGroupHeaderTemplateUsageComponent { public options: ExampleData[]; constructor(private dataFetchService: DataFetchService) { this.options = this.dataFetchService.fetchStaticData(); } }
<ng-dropdown [id]="'products_templating_01'" [selectTrackBy]="'id'" [displayTrackBy]="'productType'" [groupByField]="'productLine'" [options]="options" [filterable]="true"> <ng-template #ngDropdownOptionGroupHeader let-groupedOption="groupedOption"> <h4 style="font-size:150%; color: #9eff93">{{ groupedOption.groupName }}</h4> </ng-template> </ng-dropdown>
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { DropdownModule } from 'ornamentum'; import { OptionGroupHeaderTemplateUsageComponent } from './option-group-header-template-usage.component'; @NgModule({ bootstrap: [OptionGroupHeaderTemplateUsageComponent], declarations: [OptionGroupHeaderTemplateUsageComponent], imports: [ BrowserModule, DropdownModule.forRoot() ] }) export class OptionGroupHeaderTemplateUsageModule { }
Basic Usage
As same as the all other templates, we can bind a specific property #ngDropdownOptionGroupHeader
into ng-template to indicates customize group header dropdown options are need to be applied.
The following code block example shows the way of dropdown option group header template usages. In here we used simple text to override the native loading functionality. You can also provide your own custom templates with the any custom styles as you like.
<ng-template #ngDropdownOptionGroupHeader let-groupedOption="groupedOption"> <h4 style="font-size:150%; color: #9eff93">{{groupedOption.groupName}}</h4> </ng-template>
Suggested Links
Option GroupingEvents
Option Filtering
API Doc for Dropdown Option Group Header Template