Awesome
This library was copied from https://github.com/webcat12345/ngx-ui-switch
We use this library, and it seems that it takes several months for the owners to update after a major version Angular update.
Angular UI Switch Component
Description
This is a simple iOS 7 style switch component for Angular.
Live demo
A stackblitz is also available here
Inspired by switchery in Angular.
Installation
npm: npm install olt-ngx-ui-switch
yarn: yarn add olt-ngx-ui-switch
Usage
- Import into a module (
AppModule
example below)
// app.module.ts
import { OltUiSwitchModule } from "olt-ngx-ui-switch";
import { AppComponent } from "./app.component";
@NgModule({
imports: [BrowserModule, OltUiSwitchModule],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
- Add default css file to appropriate project(s)
angular.json
"styles": [
"src/styles.css",
"./node_modules/olt-ngx-ui-switch/ui-switch.component.css"
]
Alternatively, the scss version can be imported into a scss file:
@import "~olt-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 { OltUiSwitchModule } from "olt-ngx-ui-switch";
import { AppComponent } from "./app.component";
@NgModule({
imports: [
BrowserModule,
OltUiSwitchModule.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 {}
<olt-ui-switch></olt-ui-switch>
Two way binding
<olt-ui-switch [(ngModel)]="enable"></olt-ui-switch>
Params
checked
type: boolean
default: false
<olt-ui-switch checked></olt-ui-switch>
<olt-ui-switch [checked]="false"></olt-ui-switch>
disabled
type: boolean
default: false
<olt-ui-switch disabled></olt-ui-switch>
<olt-ui-switch checked [disabled]="true"></olt-ui-switch>
loading
Show a loading state for the toggle button when true. Often utilized with beforeChange.
type: boolean
default: false
<olt-ui-switch [loading]="isLoading">
<i class="fa fa-spinner fa-pulse" *ngIf="isLoading"></i>
</olt-ui-switch>
change
type: boolean
default: noop
<olt-ui-switch (change)="onChange($event)"></olt-ui-switch>
changeEvent
type: MouseEvent
default: noop
<olt-ui-switch (changeEvent)="onChangeEvent($event)"></olt-ui-switch>
<olt-ui-switch (changeEvent)="$event.stopPropagation()"></olt-ui-switch>
valueChange
type: boolean
default: noop
<olt-ui-switch (valueChange)="onValueChange($event)"></olt-ui-switch>
beforeChange
Utilize an observable to check that the toggle event should complete
type: Observable<boolean>
default: noop
<olt-ui-switch [beforeChange]="OnBeforeChange"> </olt-ui-switch>
OnBeforeChange: Observable<boolean> = new Observable((observer) => {
const timeout = setTimeout(() => {
observer.next(true);
}, 2000);
return () => clearTimeout(timeout);
});
size
type: string
default: medium
<olt-ui-switch size="small"></olt-ui-switch>
<olt-ui-switch size="large"></olt-ui-switch>
reverse
type: boolean
default: false
<olt-ui-switch reverse></olt-ui-switch>
color
type: string
default: rgb(100, 189, 99)
<olt-ui-switch color="red"></olt-ui-switch>
switchColor
type: string
default: #fff
<olt-ui-switch switchColor="#fcfcfc"></olt-ui-switch>
defaultBgColor
Default background color
type: string
default: #fff
<olt-ui-switch defaultBgColor="red"></olt-ui-switch>
defaultBoColor
Default border color
type: string
default: #dfdfdf
<olt-ui-switch defaultBoColor="black"></olt-ui-switch>
checkedLabel
Checked label (on)
type: string
default: null
<olt-ui-switch checkedLabel="on"></olt-ui-switch>
uncheckedLabel
Unchecked label (off)
type: string
default: null
<olt-ui-switch uncheckedLabel="off"></olt-ui-switch>
checkedTextColor
checked text color of the label (on)
type: string
default: black
<olt-ui-switch checkedTextColor="#7CFC00"></olt-ui-switch>
uncheckedTextColor
Unchecked text color of the label (off)
type: string
default: black
<olt-ui-switch uncheckedTextColor="red"></olt-ui-switch>
Switch Content
<olt-ui-switch uncheckedLabel="off">
<img src="" />
</olt-ui-switch>