Migrating Checkboxes from Semantic UI to Bootstrap

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

Support

In order to define checkboxes you need to declare NgbCheckBox and NgbButtonLabel as providers in app.module.ts.

import { NgbCheckBox, NgbButtonLabel } from '@ng-bootstrap/ng-bootstrap';

... 

providers: [
    ...,
    NgbCheckBox,
    NgbButtonLabel
  ],

Migration

SUI <sui-checkbox> elements translate to Bootstrap's <type="checkbox" ngbButton ...> inside a <label>. Otherwise, the migration is rather straightforward.

SUI checkboxes follow this structure:

<sui-checkbox [(ngModel)]="checkboxModel">
    Checkbox label
</sui-checkbox>

Bootstrap's equivalent structure is:

<label class="labeled-checkbox">
    <input type="checkbox" ngbButton [(ngModel)]="checkboxModel">
    <span> Checkbox label </span>
</label>

NOTES

• The similarities are such that much of the migration can be performed with a (careful use of) global search-and-replace.

• Bootstrap's checkbox looks slightly different from SUI: the border is thicker, and the selected state has a colored background.
  Changing that would mean reaching deep into Bootstrap, and the resulting HTML would be awkward. See for instance here and the associated jsFiddle.