MultiCombobox

Summary

The MultiCombobox is an input component used for multi-selection from a large list of options. It consists of a combobox which includes checkboxes in its dropdown for multiple selection of items. Selection of items adds tokens of the selected options to the element. These tokens can be removed by clicking on the remove icon within each token.

Example

<fdp-multi-combobox
    [(ngModel)]="shoppingBag"
    [placeholder]="'Add items'"
    [dropdownValues]="['Apple', 'Banana', 'Orange']"
    [disabled]="true"></fdp-multi-combobox>

<fdp-multi-combobox
    [(ngModel)]="shoppingBag"
    [placeholder]="'Add items'"
    [dropdownValues]="catalogObservable | async"></fdp-multi-combobox>

Design

The MultiCombobox has the same features and functionality as the MultiInput component in Fundamental NGX: Core. As such, the Platform MultiCombobox component will be a wrapper around the Core MultiInput component and will provide identical bindings as MultiInput. Additionally, since this is an input element, it needs to implement the FormFieldControl as described in the FormGroup Layout or extend existing BaseInputComponent.

---

i18n

Link to general support for i18n: Supporting internationalization in ngx/platform

Special Usecase: No

• fdp-multi-combobox's placeholder attribute can be supported with string binding:

<fdp-multi-combobox
    [(ngModel)]="shoppingBag"
    i18n-placeholder="@@placeholderText"
    placeholder="Add items"
    [dropdownValues]="['Apple', 'Banana', 'Orange']"
    [disabled]="true">
</fdp-multi-combobox>

Redesign Required: Yes

Multi-combobox does not provide means to give individual items in template and only accepts a datasource/observable/array of objects and therefore is not completely declarative. Design needs to be changed to support i18n completely. Currently, only placeholder attribute can be translated with i18n marker.

---

Notes