Angular UI Switch Component




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)

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

Two way binding

`html

`

Params

$3

> type: boolean

> default: false

`html


`

$3

> type: boolean

> default: false

`html


`

$3

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

> type: boolean

> default: false

`html



`

$3

> type: boolean

> default: noop

`html

`

$3

> type: MouseEvent

> default: noop

`html


`

$3

> type: boolean

> default: noop

`html

`

$3

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);
});
`

$3

> type: string

> default: medium

`html


`

$3

> type: boolean

> default: false

`html

`

$3

> type: string

> default: rgb(100, 189, 99)

`html

`

$3

> type: string

> default: #fff


`html

`

$3

Default background color

> type: string

> default: #fff


`html

`

$3

Default border color

> type: string

> default: #dfdfdf


`html

`

$3

Checked label (on)

> type: string

> default: null


`html

`

$3

Unchecked label (off)

> type: string

> default: null

`html

`

$3

checked text color of the label (on)

> type: string

> default: black

`html

`

$3

Unchecked text color of the label (off)

> type: string

> default: black

`html

`

Switch Content

`html



`

Aria Label

`html

`

Development

$3

`sh
yarn install
`

$3

Edit files in src/app to add to the demo or try changes to the library.

$3

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

|
_{webcat_black}
💻 🎨 💡 🤔 👀 |
_{Chris McKnight}
💬 💻 📖 🤔 🚇") 🔌 👀 🔧 |
_Jakub
💻 📖 |
_{Serhii Kovalenko}
💻 💡 📦 |
_{Richard McSharry}
📖 |
_bitsprint
🚇") 📦 🔧 |
_{Gianluca Paronitti}
💻 |
| :---: | :---: | :---: | :---: | :---: | :---: | :---: |
|
_{Milos Bejda}
💻 📖 💡 |
_kameelyan
💻 📖 💡 |
_{Grégory Alary}
💬 🐛 💻 🎨 |
_zehtravassos
💻 🎨 |
_{H. Rüger}
🐛 💻 🚧 |

This project follows the all-contributors specification. Contributions of any kind welcome!