Platform: ComboBox Component Technical Design

Autocomplete-like component that provides Typeahead fundanality needs to support varienty of input types such as Array, Observable or DataSource.

Arrays

Array is pretty much clear as core component already works with [] but what we want to support is a new type which represent readonly array ReadonlyArray. When working with array and this component can work with larger dataserver we need to use differ to make sure we are not re-rendering list of suggestion if nothing is changed.

Observable

Reactive stream that can emits data array everytime the array changes. This is usually output type from a HTTP requests.

DataSource

A need for the DataSource I have already described in this document Enterprise Data where I tried to stress how important is to be able to connect directly to your data espetially if we are working with tousands or milions of records. On this level we will create a new interface similar to the one used by cdk datatable, to define several abstract methods that a specific component implementation needs to extend in order to unify a way how we work with a data.

The signature will be similar to core combobox with a few adjustments to align inputs naming with similar components (select).

<fdp-combobox [(ngModel)]="searchTermOne"
             [dataSource]="addresses"
             [placeholder]="'Type some text...'"
             [maxHeight]="'250px'">
</fdp-combobox>

We need also support several ng-template to be able to modify rendered items

<fdp-combobox [(ngModel)]="searchTermOne"
             [dataSource]="addresses"
             [placeholder]="'Type some text...'"
             [maxHeight]="'250px'">

   <ng-template #sugessionItem let-item let-index="index">

        <div class="fd-template-container-div">
            <fd-icon [glyph]="item.icon" size="l" class="fd-template-icon"></fd-icon>
            <span>{{item.name}}</span>
       </div>
   </ng-template>
</fdp-combobox>

Since its form components then it needs to also provide id.