ng-toggle-button v1.5.3

AngularToggleButton

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

Versions

Instalation

npm i ng-toggle-button

or

yarn add ng-toggle-button

Usage

Import the module

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

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

The config object is described in the table bellow

Use

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

Properties

toggleConfig type is described below:

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

Outputs events

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