ngx-toggle-switch
v2.0.5
Published
switch button for angular4
Downloads
10,313
Readme
Disclaimer
This switch is derived from webcat12345/ngx-ui-switch, which was itself derived from yuyang041060120/angular2-ui-switch, which is a dead repo. This is temporarily published so it can be properly npm installed but I will deprecate and redirect this package once the appropriate fixes & changes have been back PR'd into the common repo. Thanks guys for your amazingly hard work.
Ngx UI Switch Component
Description
This is a simple iOS 7 style switch component for Angular4.
Live demo
Inspired by switchery - in angular4.
Installation
Angular v4
Angular v5 uses a different metadata version for decorators, therefore, the Angular v4 compatible versions of this library are 1.4.4 and below. However, versions < 1.6.0 have been deprecated to avoid the confusion brought up in issue #219
The code in the 1.x-stable branch contains the Angular v4 code.
Note: The Angular v4 branch will only receive bug fixes.
npm install ngx-ui-switch@^1.6.0 --save
# yarn add ngx-ui-switch@^1.6.0
Beyond Angular v4
The master branch will contain the latest code for the latest version of Angular. When upgrading this library to a new version of Angular, a new x.y-stable branch will be created to allow bugfixes. Below is how to install the latest version of the library.
npm install ngx-toggle-switch --save
# yarn add ngx-toggle-switch
Usage
import { UiSwitchModule } from 'ngx-toggle-switch';
import { AppComponent } from './app.component';
@NgModule({
imports: [BrowserModule, UiSwitchModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {
}
<ui-switch></ui-switch>
Note that if you are using the switch in a submodule, such as a lazy loaded module, then you must also import the module in that module itself. Otherwise you will get the error that it is an unknown component as seen in issue #227.
Two way binding
<ui-switch [(ngModel)]="enable"></ui-switch>
Params
checked
type: boolean
default: false
<ui-switch checked></ui-switch>
<ui-switch [checked]="false"></ui-switch>
disabled
type: boolean
default: false
<ui-switch disabled></ui-switch>
<ui-switch checked [disabled]="true"></ui-switch>
change
type: event
default: noop
<ui-switch (change)="onChange($event)"></ui-switch>
size
type: string
default: medium
<ui-switch size="small"></ui-switch>
<ui-switch size="large"></ui-switch>
reverse
type: boolean
default: false
<ui-switch reverse></ui-switch>
color
type: string
default: rgb(100, 189, 99)
<ui-switch color="red"></ui-switch>
switchColor
type: string
default: #fff
<ui-switch switchColor="#fcfcfc"></ui-switch>
defaultBgColor
Default background color
type: string
default: #fff
<ui-switch defaultBgColor="red"></ui-switch>
defaultBoColor
Default border color
type: string
default: #dfdfdf
<ui-switch defaultBoColor="black"></ui-switch>
Development
Setup
yarn install
Demo
Edit files in src/app
to add to the demo or try changes to the library.
Build library
First, edit version in package.json
and src/lib/package.json
to publish a new version to npmjs.org
# Build the library into dist/{es5,es2015}
yarn build
# Publish to npm
yarn release
Contributors
Thanks goes to these wonderful people (emoji key):
| webcat_black💻 🎨 💡 🤔 👀 | Chris McKnight💬 💻 📖 🤔 🚇 🔌 👀 🔧 | | :---: | :---: |
This project follows the all-contributors specification. Contributions of any kind welcome!
FAQ
Toggle text
<ui-switch labelOn="Yes" labelOff="No"></ui-switch>
License
MIT