npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ngx-toggle-switch

v2.0.5

Published

switch button for angular4

Downloads

10,540

Readme

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