ngx-ui-switch
    TypeScript icon, indicating that this package has built-in type declarations

    12.0.1 • Public • Published

    Angular UI Switch Component

    Gitter Build Status license npm version npm All Contributors

    Description

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

    Live demo

    A stackblitz is also available here

    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:

    • CSS styling
    • Switch content (checkedLabel, uncheckedLabel) #309 #343
    • Global options
    • beforeChange event #314 #359

    Usage

    • Import into a module (AppModule example below)
    // 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 {}
    • Add default css file to appropriate project(s) angular.json
    "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>

    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
    webcat_black

    💻 🎨 💡 🤔 👀
    Chris McKnight
    Chris McKnight

    💬 💻 📖 🤔 🚇 🔌 👀 🔧
    Jakub
    Jakub

    💻 📖
    Serhii Kovalenko
    Serhii Kovalenko

    💻 💡 📦
    Richard McSharry
    Richard McSharry

    📖
    bitsprint
    bitsprint

    🚇 📦 🔧
    Gianluca Paronitti
    Gianluca Paronitti

    💻
    Milos Bejda
    Milos Bejda

    💻 📖 💡
    kameelyan
    kameelyan

    💻 📖 💡
    Grégory Alary
    Grégory Alary

    💬 🐛 💻 🎨
    zehtravassos
    zehtravassos

    💻 🎨
    H. Rüger
    H. Rüger

    🐛 💻 🚧

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

    Install

    npm i ngx-ui-switch

    DownloadsWeekly Downloads

    13,570

    Version

    12.0.1

    License

    MIT

    Unpacked Size

    110 kB

    Total Files

    20

    Last publish

    Collaborators

    • avatar
    • avatar