AoT build issue fix, Will be more collaborative repository. Since no activity of angular2-ui-switch repository.
Clone or download
#10 Compare This branch is 13 commits ahead, 68 commits behind webcat12345:master.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
e2e feat(demo): Add demo and build process Oct 2, 2017
src Make the npm module name match so that AOT works in consuming projects Mar 23, 2018
.all-contributorsrc chore(all-contributors): Turn off autocommit Oct 7, 2017
.angular-cli.json Make the npm module name match so that AOT works in consuming projects Mar 23, 2018
.codecov.yml feat(demo): Add demo and build process Oct 2, 2017
.editorconfig feat(demo): Add demo and build process Oct 2, 2017
.gitignore ci(travis): Remove demo and docs from gitignore Mar 2, 2018
.nojekyll chore(gh-pages): Add .nojekyll Mar 2, 2018
.npmignore Prepare for publishing Mar 23, 2018
.travis.yml ci(travis): Update .travis.yml Mar 2, 2018
LICENSE issue #1 - copy code from angular2-ui-switch Apr 12, 2017
README.md Change local package name Mar 23, 2018
build.ts Make the npm module name match so that AOT works in consuming projects Mar 23, 2018
karma.conf.js feat(demo): Add demo and build process Oct 2, 2017
logo.png issue #1 - copy code from angular2-ui-switch Apr 12, 2017
package.json Make the npm module name match so that AOT works in consuming projects Mar 23, 2018
protractor-ci.conf.js feat(demo): Add demo and build process Oct 2, 2017
protractor.conf.js feat(demo): Add demo and build process Oct 2, 2017
tsconfig.json feat(demo): Add demo and build process Oct 2, 2017
tslint.json chore(tslint): Update tslint config Dec 11, 2017
typedoc.json feat(demo): Add demo and build process Oct 2, 2017
yarn.lock Merge branch 'master' into greenkeeper/bundlesize-0.16.0 Feb 26, 2018

README.md

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