AngularToggleButton

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

Versions

Angular	ng-toggle-button
>=19.0.0	v1.9.x
>=18.0.0	v1.8.x
>=17.0.0	v1.7.x
>=16.0.0	v1.6.x
>=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

Standalone: Import the component.

import { NgToggleComponent } from 'ng-toggle-button';
@Component({
  selector: 'your-component',
  standalone: true,
  imports: [
    ...,
    NgToggleComponent,
  ],
  ...
})

NgModule: Import the module

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

Also, you can pass a global configuration for all ng-toggle component in your app

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

You can edit the configuration globally by injecting NgToggleConfig service usually in the root component.

constructor(private config: NgToggleConfig) {
  this.config.labels: {
    unchecked: 'off',
    checked: 'on',
  };
  this.config.color = 'crimson';
}

Usage in template

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

The config object is described in the table bellow

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 toggleConfig - colors for the button when checked/unchecked or disabled Example: {checked: '#00FF00', unchecked: '#FF0000', disabled: '#CCCCCC'}
labels	`boolean	Object`	false
switchColor	`string	toggleConfig`	#fff
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	toggleConfig`	undefined
textAlign	string | toggleConfig	{checked: 'left', unchecked: 'right'}	If string: text-align is applied both checked and unchecked labels If toggleConfig: Text align of checked/unchecked labels Example: {checked: 'center', unchecked: 'center'}
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}.

toggleConfig type is described below:

toggleConfig = {
  checked: string;
  unchecked: string;
  disabled?: string;
};

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/.