Country select

A single-select over object options with a fully custom option row. getOptionLabel maps each country to its display string, while an *ngOption template renders the flag emoji, country name and dial code.

Overview

Examples

Usage

Import AutocompleteComponent and configure it with the inputs below. The full runnable source is on the Examples tab.

html

<autocomplete
  [options]="countries"
  [(value)]="value"
  [getOptionLabel]="getOptionLabel"
  label="Country">
  <div *ngOption="let country">
    {{ country.label }} (+{{ country.phone }})
  </div>
</autocomplete>

API

This example demonstrates the inputs below. See the Autocomplete introduction for the complete API — every input, output, content template and filter helper.

Inputs

Name	Type	Default	Description
`options`	`readonly T[]`	`— (required)`	The list of options shown in the panel.
`value`	`T \| T[] \| null`	`null`	Two-way selected value (model). An array when multiple.
`getOptionLabel`	`(option: T) => string`	`option.label ?? String(option)`	Maps an option to its display string.
`label`	`string \| null`	`null`	Field label (mat-label).

Content templates

Directive	MUI equivalent	Purpose
`*ngOption`	`renderOption`	Custom option row. Context: $implicit (option), option, highlighted, selected, query.