Bootstrap Switch for Angular 2+
npm install jw-bootstrap-switch-ng2
npm install jw-bootstrap-switch-ng2 --save
`
Breaking Changes
#### Version ^2.0.0
- Now in order to capture the event when the switch change, now you need to use the event changeState
- Rename the module from JWBootstrapSwitchModule to JwBootstrapSwitchNg2Module
Usage
Import the css file:
CDN:
`html
`
Or download from the official page here
Add JwBootstrapSwitchNg2Module to your list of modules imports:
`javascript
import { JwBootstrapSwitchNg2Module } from 'jw-bootstrap-switch-ng2';
@NgModule({
imports: [BrowserModule, JwBootstrapSwitchNg2Module],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
class AppModule {}
`
You can then use the directive in your templates:
`javascript
@Component({
selector: 'app',
template:
})
export class AppComponent {}
`
Available Attributes
| Attribute | Description | Type | Arguments |
|-----------|:-----------|:-------:|:--------:|
|switch-base-class| Global class prefix. | string | |
|switch-wrapper-class| Container element class(es). | string | |
|switch-label-width| Define the width of the label. | number or string 'auto' | |
|switch-label-text| Define the text of the label| string ||
|switch-on-text | Define the text when the ngModel is true |string| |
|switch-off-text| Define the text when the ngModel is false | string ||
|switch-on-color| Define the class to give style to the ngModel equals to ON or true | string | primary,info,success,warning,danger,default|
|switch-off-color| Define the class to give style to the ngModel equals to OFF or false | string | primary,info,success,warning,danger,default|
|switch-size | Define the size of the switch | string | mini,small,normal,large|
|switch-disabled | Define if the switch is disabled | boolean ||
|switch-readonly | Define if the switch is readonly | boolean ||
|switch-animate | Define if the switch is going to have animation | boolean ||
|switch-inverse | Define the position of the ON and OFF section | boolean ||
|switch-handle-width | Define the width of the ON and OFF section |number or string 'auto'||
|ngModel | Variable to get the switch's value |definition| -|
Events
| Attribute | Description | Return |
|-----------|:-----------|:-------|
|changeState | Event fired when change ngModel attribute | Object with the previous and current value: {previousValue: false, currentValue: true} |
Notes
For Issues, please make a example with jsfiddle` or something like that.