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 item grouping is disabled and no longer need to configure grouping header template. for Item Grouping and it's usages please refer Item 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 items: ExampleData[];

  constructor(private dataFetchService: DataFetchService) {
    this.items = this.dataFetchService.fetchStaticData();
  }
}

<ng-dropdown
  [selectTrackBy]="'id'"
  [displayTrackBy]="'productType'"
  [groupByField]="'productLine'"
  [items]="items"
  [filterable]="true">
  <ng-template #ngDropdownOptionGroupHeader let-groupedItem="groupedItem">
    <h4 style="font-size:150%; color: #9eff93">{{ groupedItem.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-groupedItem="groupedItem">
    <h4 style="font-size:150%; color: #9eff93">{{groupedItem.groupName}}</h4>
  </ng-template>

Suggested Links