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

!alt

Inspired by switchery - in angular4.

Installation

$3

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.

``sh
npm install ngx-ui-switch@^1.6.0 --save


yarn add ngx-ui-switch@^1.6.0


`

$3

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.

`sh
npm install ngx-toggle-switch --save


yarn add ngx-toggle-switch


`

Usage

`javascript
import { UiSwitchModule } from 'ngx-toggle-switch';
import { AppComponent } from './app.component';

@NgModule({
imports: [BrowserModule, UiSwitchModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {
}
`

`html

`

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

`html

`

Params

$3

> type: boolean

> default: false

`html


`

$3

> type: boolean

> default: false

`html


`

$3

> type: event

> default: noop

`html

`

$3

> type: string

> default: medium

`html


`

$3

> type: boolean

> default: false

`html

`

$3

> type: string

> default: rgb(100, 189, 99)

`html

`

$3

> type: string

> default: #fff


`html

`

$3

Default background color

> type: string

> default: #fff


`html

`

$3

Default border color

> type: string

> default: #dfdfdf


`html

`

Development

$3

`sh
yarn install
`

$3

Edit files in src/app to add to the demo or try changes to the library.

$3

First, edit version in package.json and src/lib/package.json to publish a new version to npmjs.org

`sh


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

$3

`html

``

License

MIT