ng-toggle-button

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

Versions

| Angular | ng-toggle-button| | -------- |:------:| | >=15.0.0 | v1.5.x | | >=14.0.0 | v1.4.x | | >=13.0.0 | v1.3.x | | >=12.0.0 | v1.2.x | | >=11.0.0 | v1.1.x | | >=10.0.0 | v1.0.x | | >=9.0.0 | v0.2.x | | v8.x.x | v0.1.x |

Instalation

``` npm i ng-toggle-button ``` or ``` yarn add ng-toggle-button ```

Usage

Import the module ```typescript import { NgToggleModule } from 'ng-toggle-button'; @NgModule({ ... imports:

...,

NgToggleModule.forRoot() //or NgToggleModule

, }) ``` Also, you can pass a global configuration for all ng-toggle component in your app ```typescript import { NgToggleModule } from 'ng-toggle-button'; @NgModule({ ... imports:

...,

NgToggleModule.forRoot(config)

, }) ``` The config object is described in the table bellow Use ```html value="true" color="{

unchecked: '#939da2',

checked: '#f62d51'

}" > ```

Properties

| 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.| | values | {checked: any, unchecked: any} | {checked: true, unchecked: false} | Values for checked and unchecked states, by default checked value is true and unchecked value is false
Example: {checked: 1, unchecked: 0}.|

Outputs events

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

Keyboard Accessibility (WCAG)

The toggle is tabbable, and can be triggered using the spacebar - WCAG 2.4.3(A)

Development server

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