This is a simple iOS 7 style switch component for Angular.
Inspired by switchery in Angular.
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
- Import into a module (
AppModuleexample 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';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.
<ui-switch [(ngModel)]="enable"></ui-switch>type: boolean
default: false
<ui-switch checked></ui-switch>
<ui-switch [checked]="false"></ui-switch>type: boolean
default: false
<ui-switch disabled></ui-switch>
<ui-switch checked [disabled]="true"></ui-switch>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>type: boolean
default: noop
<ui-switch (change)="onChange($event)"></ui-switch>type: MouseEvent
default: noop
<ui-switch (changeEvent)="onChangeEvent($event)"></ui-switch>
<ui-switch (changeEvent)="$event.stopPropagation()"></ui-switch>type: boolean
default: noop
<ui-switch (valueChange)="onValueChange($event)"></ui-switch>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);
});type: string
default: medium
<ui-switch size="small"></ui-switch>
<ui-switch size="large"></ui-switch>type: boolean
default: false
<ui-switch reverse></ui-switch>type: string
default: rgb(100, 189, 99)
<ui-switch color="red"></ui-switch>type: string
default: #fff
<ui-switch switchColor="#fcfcfc"></ui-switch>Default background color
type: string
default: #fff
<ui-switch defaultBgColor="red"></ui-switch>Default border color
type: string
default: #dfdfdf
<ui-switch defaultBoColor="black"></ui-switch>Checked label (on)
type: string
default: null
<ui-switch checkedLabel="on"></ui-switch>Unchecked label (off)
type: string
default: null
<ui-switch uncheckedLabel="off"></ui-switch>checked text color of the label (on)
type: string
default: black
<ui-switch checkedTextColor="#7CFC00"></ui-switch>Unchecked text color of the label (off)
type: string
default: black
<ui-switch uncheckedTextColor="red"></ui-switch><ui-switch uncheckedLabel="off">
<img src=""/>
</ui-switch><ui-switch [ariaLabel]="'labelName'"></ui-switch>yarn installEdit files in src/app to add to the demo or try changes to the 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 releaseThanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!
![greenkeeper[bot] avatar](https://avatars.githubusercontent.com/in/505?v=4 "greenkeeper[bot]")
![renovate[bot] avatar](https://avatars.githubusercontent.com/in/2740?v=4 "renovate[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent