https://github.com/vicmans/ng-toggle-button
Angular toggle button switch
https://github.com/vicmans/ng-toggle-button
angular button component-library toggle-button toggle-switch toogleswitch
Last synced: 21 days ago
JSON representation
Angular toggle button switch
- Host: GitHub
- URL: https://github.com/vicmans/ng-toggle-button
- Owner: vicmans
- License: mit
- Created: 2020-04-09T16:53:27.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2025-07-14T20:09:32.000Z (8 months ago)
- Last Synced: 2025-10-20T22:36:56.617Z (5 months ago)
- Topics: angular, button, component-library, toggle-button, toggle-switch, toogleswitch
- Language: HTML
- Homepage: https://ng-toggle-button.netlify.app/
- Size: 2.2 MB
- Stars: 9
- Watchers: 0
- Forks: 5
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# AngularToggleButton
[][npm-url]
[][npm-url]
[][demo-url]
[npm-url]: https://www.npmjs.com/package/ng-toggle-button
[demo-url]: https://ng-toggle-button.netlify.app
This is a toggle switch button component, you can see the demo [here][demo-url] and test it in [StackBlitz](https://stackblitz.com/edit/ng-toggle-button).
## 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.
```typescript
import { NgToggleComponent } from 'ng-toggle-button';
@Component({
selector: 'your-component',
standalone: true,
imports: [
...,
NgToggleComponent,
],
...
})
```
### NgModule: Import the module
```typescript
import { NgToggleModule } from 'ng-toggle-button';
@NgModule({
...
imports: [
...,
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)
],
})
```
You can edit the configuration globally by injecting `NgToggleConfig` service usually in the root component.
```ts
constructor(private config: NgToggleConfig) {
this.config.labels: {
unchecked: 'off',
checked: 'on',
};
this.config.color = 'crimson';
}
```
Usage in template
```html
```
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` | If `boolean` - shows/hides default labels
If `Object` - sets custom labels for both states.
Example: `{checked: 'Foo', unchecked: 'Bar'}` |
| switchColor | `string | toggleConfig` | `#fff` | If `string` - color or background property of the switch when checked
If `toggleConfig` - colors or background property for the switch when checked/uncheked or disabled
Example: `{checked: '#25EF02', unchecked: 'silver', disabled: '#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` | If `string` - color when checked
If `toggleConfig` - colors for labels when checked/uncheked
Example: `{checked: '#25EF02', unchecked: '#35DB15'}` by default the text color is white.|
| 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:
```ts
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/`.