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
$ npm install --save ngx-bootstrap-switch
Install animations package:
$ npm install @angular/animations --save
Then, add it to your app.module
...;;
For styling purposes, you should add the Bootstrap stylesheet to your index.html
Usage
In your component template you just need to add the component with the bindings you want. Like this:
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 |