Option template

Option layout and styling can be customized with an option template. To do this, add an <ng-template> element with parameters #optionTemplate and let-option="option" as child to the <ng-select> element. The option template can now be defined in the <ng-template> element, in which option can be used to access the IOption object.

In the example below, a template is defined to show a flag icon in front of the country name using the famfamfam flags icon library.

Single select

Selected option: {{selectedCountry}}
{{option?.label}}
Component template
Component class
Icon styling

Multiple select

Selected options: {{selectedCountries}}
{{option?.label}}
Component template
Component class
Icon styling

Using custom option properties

{{option?.label}} *
Component template
Component class