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-ui-switch --save
# yarn add ngx-ui-switch

Usage

import { UiSwitchModule } from 'ngx-ui-switch';
import { AppComponent } from './app.component';

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

Global config

Use when you want to change default values globaly.

import { UiSwitchModule } from 'ngx-ui-switch';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    UiSwitchModule.forRoot({
      size: 'small',
      color: 'rgb(0, 189, 99)',
      switchColor: '#80FFA2',
      defaultBgColor: '#00ACFF',
      defaultBoColor : '#476EFF',
    })
  ],
  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: boolean

default: noop

<ui-switch (change)="onChange($event)"></ui-switch>

changeEvent

type: MouseEvent

default: noop

<ui-switch (changeEvent)="onChangeEvent($event)"></ui-switch>
<ui-switch (changeEvent)="$event.stopPropagation()"></ui-switch>

valueChange

type: boolean

default: noop

<ui-switch (valueChange)="onValueChange($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 💬 💻 📖 🤔 🚇 🔌 👀 🔧	Jakub 💻 📖

This project follows the all-contributors specification. Contributions of any kind welcome!

FAQ

License

MIT