This is a Angular 2 Component to add a switch like input. It's basically an Angular 2 port for this: Bootstrap-Switch.

$ npm i angular2-bootstrap-switch

Then, add it to your app.module

...
import { AppComponent }   from './app.component';
import { SwitchComponent } from 'angular2-bootstrap-switch/components';

@NgModule({
  imports:      [ 
    ...
    ],
  declarations: [ 
    AppComponent,
    SwitchComponent
  ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

For styling purposes, you should add the Bootstrap stylesheet to your index.html

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

In your component template you just need to add the component with the bindings you want. Like this:

<switch [status]="value" [onText]="onText" [offText]="offText" [onColor]="onColor" [offColor]="offColor" [size]="size"></switch>

All the attributes are optional.

Status: The current status of the switch (true|false). This is a two way binding

onText: The text to show on the ON label of the switch

offText: The text to show on the OFF label of the switch

onColor: The color of the ON label of the switch ("blue"|"default"|"gray"|"green"|"red"|"sky-blue"|"yellow")

offColor: The color of the OFF label of the switch ("blue"|"default"|"gray"|"green"|"red"|"sky-blue"|"yellow")

size: The size of the switch ("mini"|"small"|"normal"|"large")

To see the component in action, here's an example project

git clone https://github.com/ovsleep/bootstrap-switch.git
cd bootstrap-switch
cd app
npm install
npm run all