Dropdown List Option Template

This feature enables users to customize the dropdown options by providing their own templates to override native dropdown template. for it's basic usages and examples please refer Basic Usage section.

What You Will See

Select
import { Component } from '@angular/core';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-option-template-usage',
  templateUrl: './option-template-usage.component.html'
})
export class OptionTemplateUsageComponent {
  public options: ExampleData[];

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

Basic Usage

As same as the all other templates, we can bind a specific property #ngDropdownOption into ng-template to indicates customize dropdown options are need to be applied.

The following code block example shows the way of dropdown option template using. In here we used simple text to override the native dropdown option view. You can also provide your own custom template with any custom styles as you want.

  <ng-template #ngDropdownOption let-option="option">
     <h4 style="font-size:150%; color: #9eff93">{{option.text}}</h4>
  </ng-template>
Option Filtering
Option Display
API Doc for Dropdown Option Template