XcFormAutocomplete (and Dropdown)

Name

XcFormAutocomplete

Description

A field with a value in it, where the value can be selected from a dropdown list. Dependent on how the XcFormAutocomplete is configured, it behaves like a typical dropdown field or like an input field with proposed values.

Attributes

• xc-form-autocomplete-option: Input and output to bind the currently selected value to
• xc-form-autocomplete-options: Array containing possible options
• xc-form-autocomplete-asdropdown: Autocomplete behaves like a dropdown (not possible to type text into the field)
• xc-form-autocomplete-asinput: Insert a text into the field that is not included in options

Example Implementation

HTML

<xc-form-autocomplete
    label="Color"
    placeholder="choose color..."
    [(xc-form-autocomplete-option)]="color"
    [xc-form-autocomplete-options]="colors"
></xc-form-autocomplete>

TypeScript

color: string;
colors: XcOptionItem[] = [{
    name: 'white',
    value: '#eee'
}, {
    name: 'black',
    value: '#111'
}, {
    name: 'red',
    value: '#c32'
}];