AngularToggleButton

This is a toggle switch button component, you can see the demo here and test it in StackBlitz.

Instalation

npm i ngx-toggle-button

Import the module

import { NgToggleModule } from 'ngx-toggle-button';
@NgModule({
  ...
  imports: [
    ...,
    NgToggleModule
  ],
})

Use

<ng-toggle
  [value]="true"
  [color]="{
    unchecked: '#939da2',
    checked: '#f62d51'
  }"
></ng-toggle>

Name	Type	Default	Description
value	`boolean`	`false`	Initial state of the toggle button
speed	`number`	`300`	Transition time for the animation
disabled	`boolean`	`false`	Button does not react on mouse events
color	`string`	`#0099CC`	If `String` - color of the button when checked If `Object` - colors for the button when checked/unchecked or disabled Example: `{checked: '#00FF00', unchecked: '#FF0000', disabled: '#CCCCCC'}`
labels	`boolean Object`	`false`	If `boolean` - shows/hides default labels If `Object` - sets custom labels for both states. Example: `{checked: 'Foo', unchecked: 'Bar'}`
switchColor	`string Object`	`#fff`	If `string` - color or background property of the switch when checked If `Object` - colors or background property for the switch when checked/uncheked Example: `{checked: '#25EF02', unchecked: 'silver'}`
width	`number`	`50`	Width of the button
height	`number`	`22`	Height of the button
margin	`number`	`3`	Space between the switch and background border
name	`string`	`undefined`	Name to attach to the generated input field
fontSize	`number`	`10`	Font size in pixels
fontColor	`string Object`	`undefined`	If `string` - color when checked If `Object` - colors for labels when checked/uncheked Example: `{checked: '#25EF02', unchecked: '#35DB15'}` by default the text color is white.

Name	Payload	Description
change	value	Triggered when state of the component changes. Contains: `value` - state of the button

Clone this repo and download the dependencies. Run ng serve for a dev server. Navigate to http://localhost:4200/.