Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/webcat12345/ngx-ui-switch

Angular UI Switch component
https://github.com/webcat12345/ngx-ui-switch

angular angular-cli angular-ui-switch ng ngx ngx-ui-switch switch ui-switch

Last synced: 28 days ago
JSON representation

Angular UI Switch component

Host: GitHub
URL: https://github.com/webcat12345/ngx-ui-switch
Owner: webcat12345
License: mit
Created: 2017-04-12T09:10:11.000Z (over 7 years ago)
Default Branch: master
Last Pushed: 2024-04-05T22:54:19.000Z (7 months ago)
Last Synced: 2024-04-14T00:45:18.115Z (7 months ago)
Topics: angular, angular-cli, angular-ui-switch, ng, ngx, ngx-ui-switch, switch, ui-switch
Language: TypeScript
Homepage: https://webcat12345.github.io/ngx-ui-switch/demo/
Size: 4.69 MB
Stars: 110
Watchers: 3
Forks: 67
Open Issues: 23
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

trackawesomelist - ngx-ui-switch (⭐110) - A simple iOS 7 style switch component for Angular. (Recently Updated / [Sep 16, 2024](/content/2024/09/16/README.md))
awesome-angular - ngx-ui-switch - A simple iOS 7 style switch component for Angular. (Table of contents / Third Party Components)
fucking-awesome-angular - ngx-ui-switch - A simple iOS 7 style switch component for Angular. (Table of contents / Third Party Components)
fucking-awesome-angular - ngx-ui-switch - A simple iOS 7 style switch component for Angular. (Table of contents / Third Party Components)

README

        # Angular UI Switch Component

[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/ngx-discuss/Lobby)

[![Build Status](https://github.com/webcat12345/ngx-ui-switch/actions/workflows/ci.yml/badge.svg?branch=master)](https://github.com/webcat12345/ngx-ui-switch/actions/workflows/ci.yml)

[![GitHub Pages](https://img.shields.io/badge/Demo-blue?logo=angular&label=Pages&color=7952B3)](https://webcat12345.github.io/ngx-ui-switch/demo/)

[![license](https://img.shields.io/github/license/webcat12345/ngx-ui-switch)](https://github.com/webcat12345/ngx-ui-switch/blob/master/LICENSE)

[![npm version](https://img.shields.io/npm/v/ngx-ui-switch)](https://badge.fury.io/js/ngx-ui-switch)

[![npm](https://img.shields.io/npm/dm/ngx-ui-switch)](https://www.npmjs.com/package/ngx-ui-switch)

[![All Contributors](https://img.shields.io/badge/all_contributors-12-orange.svg)](#contributors)

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/edit/ngx-ui-switch)

## Description

This is a simple iOS 7 style switch component for [Angular](https://angular.io).

![alt](logo.png)

Inspired by [switchery](https://github.com/abpetkov/switchery) in [Angular](https://angular.io).

## 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](https://github.com/webcat12345/ngx-ui-switch/issues/309) [#343](https://github.com/webcat12345/ngx-ui-switch/issues/343)

- Global options

- beforeChange event [#314](https://github.com/webcat12345/ngx-ui-switch/issues/314) [#359](https://github.com/webcat12345/ngx-ui-switch/pull/359)

## Usage

- Import into a module (`AppModule` example below)

```javascript

// 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`

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

```scss

@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.

```javascript

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 {}

```

```html

```

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](https://github.com/webcat12345/ngx-ui-switch/issues/227).

# Two way binding

```html

```

# Params

### checked

> type: *boolean*

> default: false

```html

```

### disabled

> type: *boolean*

> default: false

```html

```

### loading

*Show a loading state for the toggle button when true. Often utilized with beforeChange.*

> type: *boolean*

> default: false

```html

  

```

### change

> type: *boolean*

> default: noop

```html

```

### changeEvent

> type: *MouseEvent*

> default: noop

```html

```

### valueChange

> type: *boolean*

> default: noop

```html

```

### beforeChange

Utilize an observable to check that the toggle event should complete

> type: *Observable\*

> default: noop

```html

```

```typescript

OnBeforeChange: Observable = new Observable((observer) => {

  const timeout = setTimeout(() => {

    observer.next(true);

  }, 2000);

  return () => clearTimeout(timeout);

});

```

### size

> type: *string*

> default: medium

```html

```

### reverse

> type: *boolean*

> default: false

```html

```

### color

> type: *string*

> default: rgb(100, 189, 99)

```html

```

### switchColor

> type: *string*

> default: #fff

```html

```

### defaultBgColor

Default background color

> type: *string*

> default: #fff

```html

```

### defaultBoColor

*Default border color*

> type: *string*

> default: #dfdfdf

```html

```

### checkedLabel

*Checked label (on)*

> type: *string*

> default: null

```html

```

### uncheckedLabel

*Unchecked label (off)*

> type: *string*

> default: null

```html

```

### checkedTextColor

checked text color of the label (on)

> type: *string*

> default: black

```html

```

### uncheckedTextColor

Unchecked text color of the label (off)

> type: *string*

> default: black

```html

```

## Switch Content

```html

  

```

## Aria Label

```html

```

## Development

### Setup

```sh

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*

```sh

# Build the library into dist/{es5,es2015}

yarn build

# Publish to npm

yarn release

```

## Contributors

Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):

| [
_{webcat_black}](https://webcat12345.github.io/)
[💻](https://github.com/webcat12345/ngx-ui-switch/commits?author=webcat12345 "Code") [🎨](#design-webcat12345 "Design") [💡](#example-webcat12345 "Examples") [🤔](#ideas-webcat12345 "Ideas, Planning, & Feedback") [👀](#review-webcat12345 "Reviewed Pull Requests") | [
_{Chris McKnight}](https://github.com/cmckni3)
[💬](#question-cmckni3 "Answering Questions") [💻](https://github.com/webcat12345/ngx-ui-switch/commits?author=cmckni3 "Code") [📖](https://github.com/webcat12345/ngx-ui-switch/commits?author=cmckni3 "Documentation") [🤔](#ideas-cmckni3 "Ideas, Planning, & Feedback") [🚇](#infra-cmckni3 "Infrastructure (Hosting, Build-Tools, etc)") [🔌](#plugin-cmckni3 "Plugin/utility libraries") [👀](#review-cmckni3 "Reviewed Pull Requests") [🔧](#tool-cmckni3 "Tools") | [
_Jakub](https://github.com/kubiq)
[💻](https://github.com/webcat12345/ngx-ui-switch/commits?author=kubiq "Code") [📖](https://github.com/webcat12345/ngx-ui-switch/commits?author=kubiq "Documentation") | [
_{Serhii Kovalenko}](https://github.com/cmajsmith)
[💻](https://github.com/webcat12345/ngx-ui-switch/commits?author=cmajsmith "Code") [💡](#example-cmajsmith "Examples") [📦](#platform-cmajsmith "Packaging/porting to new platform") | [
_{Richard McSharry}](https://github.com/rmcsharry)
[📖](https://github.com/webcat12345/ngx-ui-switch/commits?author=rmcsharry "Documentation") | [
_bitsprint](https://github.com/bitsprint)
[🚇](#infra-bitsprint "Infrastructure (Hosting, Build-Tools, etc)") [📦](#platform-bitsprint "Packaging/porting to new platform") [🔧](#tool-bitsprint "Tools") | [
_{Gianluca Paronitti}](http://www.gamepix.com)
[💻](https://github.com/webcat12345/ngx-ui-switch/commits?author=gparonitti "Code") |

| :---: | :---: | :---: | :---: | :---: | :---: | :---: |

| [
_{Milos Bejda}](http://mbejda.com)
[💻](https://github.com/webcat12345/ngx-ui-switch/commits?author=mbejda "Code") [📖](https://github.com/webcat12345/ngx-ui-switch/commits?author=mbejda "Documentation") [💡](#example-mbejda "Examples") | [
_kameelyan](https://github.com/kameelyan)
[💻](https://github.com/webcat12345/ngx-ui-switch/commits?author=kameelyan "Code") [📖](https://github.com/webcat12345/ngx-ui-switch/commits?author=kameelyan "Documentation") [💡](#example-kameelyan "Examples") | [
_{Grégory Alary}](https://gregoryalary.github.io/)
[💬](#question-gregoryalary "Answering Questions") [🐛](https://github.com/webcat12345/ngx-ui-switch/issues?q=author%3Agregoryalary "Bug reports") [💻](https://github.com/webcat12345/ngx-ui-switch/commits?author=gregoryalary "Code") [🎨](#design-gregoryalary "Design") | [
_zehtravassos](https://github.com/zehtravassos)
[💻](https://github.com/webcat12345/ngx-ui-switch/commits?author=zehtravassos "Code") [🎨](#design-zehtravassos "Design") | [
_{H. Rüger}](https://github.com/hrueger)
[🐛](https://github.com/webcat12345/ngx-ui-switch/issues?q=author%3Ahrueger "Bug reports") [💻](https://github.com/webcat12345/ngx-ui-switch/commits?author=hrueger "Code") [🚧](#maintenance-hrueger "Maintenance") |

This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!