Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

ngx-ui-switch

Package Overview
Dependencies
Maintainers
2
Versions
73
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ngx-ui-switch

switch button for angular4

  • 15.0.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
19K
decreased by-34.21%
Maintainers
2
Weekly downloads
 
Created
Source

Angular UI Switch Component

Gitter Build Status license npm version npm GitHub Pages

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:

  • 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>

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):

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!

Keywords

FAQs

Package last updated on 01 Nov 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc