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

    2.0.5 • Public • Published

    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

    Greenkeeper badge Gitter Build Status npm version npm All Contributors Throughput Graph

    Description

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

    Live demo

    alt

    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

    Install

    npm i ngx-toggle-switch

    DownloadsWeekly Downloads

    3,971

    Version

    2.0.5

    License

    MIT

    Unpacked Size

    68.1 kB

    Total Files

    15

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar