Angular UI Switch Component
Description
This is a simple iOS 7 style switch component for Angular.
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)
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
yarn build
yarn release
Contributors
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!