Migrating Selects from Semantic UI to Bootstrap

In this document we'll be using SUI for ng2-semantic-ui and Bootstrap for ng-bootstrap.

SUI <sui-select> elements translate to Bootstrap's <div ngbDropdown>. The APIs are rather different, and some concepts don't translate directly; the dropdown is a much simpler component.

SUI selects follow this structure:

<sui-select id="avSelectArc"
              class="selection"
              [(ngModel)]="selectedOption"
              [options]="options"
              labelField="name"
              (selectedOptionChange)="onOptionChange()"
              #select>
    <sui-select-option *ngFor="let option of select.options"
                       [value]="option">
</sui-select-option>

Bootstrap selects follow this structure instead:

<div id="avSelectArc" ngbDropdown >
    <button class="btn"
            ngbDropdownToggle
            [ngClass]="{ 'text-muted': ! selectedOption }">
        {{ selectedOption ? selectedOption.name : 'Select one' }}
    </button>
    <div ngbDropdownMenu >
        <button ngbDropdownItem
                *ngFor="let option of options"
                (click)="setSelectedOption(option.name)">
            {{ option.name }}
        </button>
    </div>
</div>

NOTES

• ngbDropdown does not support an ngModel or a list of options; see the Bootstrap API and the SUI documentation for more info.

• SUI's options are objects, and the labelField parameter selects which object field should be used for displaying the selection value.
  In the example above, selectable elements are something like
  {id: 'ch', name: 'Charlottesville'}
  so labelField="name" will have the effect of displaying Charlottesville in the select element.
  That is not available in Bootstrap, so one has to explicitly reference option.name in the *ngFor loop.

• Similarly, the (selectedOptionChange) event does not have a Bootstrap equivalent, and one must define a component method to be invoked when the pulldown selection happens. In the example above that's setSelectedOption(option): in addition to setting the selectedOption field, the method should incorporate the functionality played by the SUI onOptionChange() method.

• SUI's selects know when nothing is selected and display a configurable default text, defaulting to Select one. That behavior must be explicitly coded in Bootstrap:
  {{ selectedOption ? selectedOption.name : 'Select one' }} displays a default text if the selectedOption field is unset, and
  [ngClass]="{ 'text-muted': ! selectedOption }" sets that text to a grayish font.

• SUI's select.filteredOptions field is not available in Bootstrap; any option processing must be performed before assigning the options list. (Not shown in the example above.)

• The dropdown's size defaults to 14em. To change that, add the following definitions to your component's CSS file (e.g. manage.component.css) with the desired width:

    .dropdown-item {
        min-width: 19.85em;
    }
    .dropdown-toggle {
        min-width: 20em;
    }

Notice that the item's width should be about 0.15em smaller.

• The Bootstrap dropdown doesn't deal very well with an empty set of options. It is suggested to disable the toggle if the there are no options to choose from:

    <button class="btn" ngbDropdownToggle
        [ngClass]="{ 'text-muted': ! selectedOption }"
        [disabled]="options.length === 0">
        ...