Home

Awesome

Angular UI Switch Component

Gitter Build Status GitHub Pages license npm version npm

All Contributors

Open in StackBlitz

Description

This is a simple iOS 7 style switch component for Angular.

alt

Inspired by switchery in Angular.

Installation

npm: npm install ngx-ui-switch --save

yarn: yarn add ngx-ui-switch

Some features are not available in previous versions:

Usage

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

@NgModule({
  imports: [BrowserModule, UiSwitchModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}
"styles": [
  "src/styles.css",
  "./node_modules/ngx-ui-switch/ui-switch.component.css"
]

Alternatively, the scss version can be imported into a scss file:

@import '~ngx-ui-switch/ui-switch.component.scss';

Global config

Use when you want to change default values globally.

These settings will override anything passed in via property bindings.

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',
      checkedLabel: 'on',
      uncheckedLabel: 'off'
    })
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}
<ui-switch></ui-switch>

Note that if you are using the switch in a child NgModule, such as a lazy loaded module, then you must also import the module in the module itself or within a shared module. 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>

loading

Show a loading state for the toggle button when true. Often utilized with beforeChange.

type: boolean

default: false

<ui-switch [loading]="isLoading">
  <i class="fa fa-spinner fa-pulse" *ngIf="isLoading"></i>
</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>

beforeChange

Utilize an observable to check that the toggle event should complete

type: Observable<boolean>

default: noop

<ui-switch [beforeChange]="OnBeforeChange">
</ui-switch>
OnBeforeChange: Observable<boolean> = new Observable((observer) => {
  const timeout = setTimeout(() => {
    observer.next(true);
  }, 2000);
  return () => clearTimeout(timeout);
});

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>

checkedLabel

Checked label (on)

type: string

default: null

<ui-switch checkedLabel="on"></ui-switch>

uncheckedLabel

Unchecked label (off)

type: string

default: null

<ui-switch uncheckedLabel="off"></ui-switch>

checkedTextColor

checked text color of the label (on)

type: string

default: black

<ui-switch checkedTextColor="#7CFC00"></ui-switch>

uncheckedTextColor

Unchecked text color of the label (off)

type: string

default: black

<ui-switch uncheckedTextColor="red"></ui-switch>

Switch Content

<ui-switch uncheckedLabel="off">
  <img src=""/>
</ui-switch>

Aria Label

<ui-switch [ariaLabel]="'labelName'"></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):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --> <!-- prettier-ignore -->
<img src="https://avatars3.githubusercontent.com/u/19761422?v=4" width="100px;" alt="webcat_black"/><br /><sub><b>webcat_black</b></sub><br />πŸ’» 🎨 πŸ’‘ πŸ€” πŸ‘€<img src="https://avatars0.githubusercontent.com/u/735717?v=4" width="100px;" alt="Chris McKnight"/><br /><sub><b>Chris McKnight</b></sub><br />πŸ’¬ πŸ’» πŸ“– πŸ€” πŸš‡ πŸ”Œ πŸ‘€ πŸ”§<img src="https://avatars0.githubusercontent.com/u/302721?v=4" width="100px;" alt="Jakub"/><br /><sub><b>Jakub</b></sub><br />πŸ’» πŸ“–<img src="https://avatars2.githubusercontent.com/u/915077?v=4" width="100px;" alt="Serhii Kovalenko"/><br /><sub><b>Serhii Kovalenko</b></sub><br />πŸ’» πŸ’‘ πŸ“¦<img src="https://avatars1.githubusercontent.com/u/1156100?v=4" width="100px;" alt="Richard McSharry"/><br /><sub><b>Richard McSharry</b></sub><br />πŸ“–<img src="https://avatars1.githubusercontent.com/u/507874?v=4" width="100px;" alt="bitsprint"/><br /><sub><b>bitsprint</b></sub><br />πŸš‡ πŸ“¦ πŸ”§<img src="https://avatars0.githubusercontent.com/u/11628507?v=4" width="100px;" alt="Gianluca Paronitti"/><br /><sub><b>Gianluca Paronitti</b></sub><br />πŸ’»
<img src="https://avatars1.githubusercontent.com/u/5429780?v=4" width="100px;" alt="Milos Bejda"/><br /><sub><b>Milos Bejda</b></sub><br />πŸ’» πŸ“– πŸ’‘<img src="https://avatars1.githubusercontent.com/u/590274?v=4" width="100px;" alt="kameelyan"/><br /><sub><b>kameelyan</b></sub><br />πŸ’» πŸ“– πŸ’‘<img src="https://avatars0.githubusercontent.com/u/20248805?v=4" width="100px;" alt="GrΓ©gory Alary"/><br /><sub><b>GrΓ©gory Alary</b></sub><br />πŸ’¬ πŸ› πŸ’» 🎨<img src="https://avatars2.githubusercontent.com/u/2574403?v=4" width="100px;" alt="zehtravassos"/><br /><sub><b>zehtravassos</b></sub><br />πŸ’» 🎨<img src="https://avatars0.githubusercontent.com/u/18656830?v=4" width="100px;" alt="H. RΓΌger"/><br /><sub><b>H. RΓΌger</b></sub><br />πŸ› πŸ’» 🚧
<!-- ALL-CONTRIBUTORS-LIST:END -->

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