CascadeSelect

Basic

Choose a country, a region and then a city. Only a final option changes the value.

Templates

Customize options, the selected value, icons, header and footer.

Sizes and states

Reactive forms

Store a city code with optionValue. Validation, reset and disabled state are managed by the form.

Usage and API

import { AvCascadeSelect } from 'avero-ui';
import { FormsModule } from '@angular/forms';

<av-cascade-select inputId="city" label="City"
  [options]="countries" optionLabel="cname" optionGroupLabel="name"
  [optionGroupChildren]="['states', 'cities']"
  [(ngModel)]="city" showClear />

countries = [{ name: 'Poland', states: [{ name: 'Mazovia',
  cities: [{ cname: 'Warsaw', code: 'WAW' }]
}]}];

// Add optionValue="code" to store only the city code.
// Without optionValue, the form stores the original city object.

Import AvCascadeSelect and FormsModule or ReactiveFormsModule. Provide a unique inputId and label. optionGroupChildren lists child properties in hierarchy order. optionGroupLabel labels groups and optionLabel labels leaves. Property paths may contain dots. Empty groups cannot be selected.

Use optionValue to store a primitive ID, or dataKey to compare object values by a unique property. Null and undefined represent no selection. optionDisabled defaults to disabled and also disables descendants. Async option updates preserve the form value.

onChange emits value and originalEvent for user selections and clearing; onSelectedElement emits the original leaf or null; onClear emits the clear event. Programmatic writes do not emit these outputs. Slots: #option, #value, #header, #footer, #dropdownicon, #loadingicon and #optiongroupicon.

Enter or Space opens and selects; Up/Down, Home/End navigate a level; Right enters a group and Left returns (reversed in RTL). Type an initial to find an option. Escape closes without changing the value; Tab leaves. Keep option and value templates presentational. The panel scrolls on small screens and is positioned inside the component; ancestors must allow visible overflow.

Reference: PrimeNG CascadeSelect.