Angular Bootstrap Switch (ngx-bootstrap-switch)

This is a Angular 4 Component to add a switch like input. It's basically an Angular 4 port for this: Bootstrap-Switch. Compatibility with angular 4.x - 7.x

See Demo

---

Installation

1$ npm install --save ngx-bootstrap-switch

Install animations package:

1$ npm install @angular/animations --save

Then, add it to your app.module

1...
2import { NgxBootstrapSwitchModule } from 'ngx-bootstrap-switch';
3import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
4
5@NgModule({
6  imports: [
7    ...
8    NgxBootstrapSwitchModule.forRoot(),
9    BrowserAnimationsModule
10  ],
11  declarations: [
12    ...
13  ],
14  bootstrap: [ AppComponent ]
15})
16export class AppModule { }

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

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

Usage

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

1<ngx-switch [status]="value"
2            [onText]="onText"
3            [offText]="offText"
4            [onColor]="onColor"
5            [offColor]="offColor"
6            [size]="size"
7            [disabled]="disabled"
8            (statusChange)="onFlagChange($event)">
9</ngx-switch>

All the attributes are optional.

API

Inputs

Input	Type	Default	Required	Description
[status]	boolean	false	no	The current status of the switch (true,false). This is a two way binding
[onText]	string	On	no	The text to show on the ON label of the switch
[offText]	string	Off	no	The text to show on the OFF label of the switch
[onColor]	string	green	no	The color of the ON label of the switch (blue,default,gray,green,red,sky-blue,yellow)
[offColor]	string	red	no	The color of the OFF label of the switch (blue,default,gray,green,red,sky-blue,yellow)
[size]	string	normal	no	The size of the switch (mini,small,normal,large)
[disabled]	boolean	false	no	Boolean value to enable/disabled the switch

Outputs

Output	Description
(statusChange)	Event fired on status change