NgxToggler - Angular Toggler

ngx-toggler is an standalone, reusable and customizable component for Angular 18, 19 and 20.

It is designed to work with signals and Angular zoneless, providing a lightweight, flexible, and accessible simple toggler.

Installation

If you want to install the latest version (currently 20):
``bash
npm install ngx-toggler
`

Angular 19:
`bash
npm install ngx-toggler@angular19
`

Angular 18:
`bash
npm install ngx-toggler@angular18
`

Basic Usage

Using ngx-toggler is very simple. Only two inputs/outputs are required: [isActive] and (setIsActive).
All other assignable attributes are explained below and are for you to customize to your liking.

| Prop | Description | Type | Default |
| -------------- | -------------------------- | -------------------------- | ------- |
| isActive | Current isActive state | boolean | false |
| setIsActive | Toggle the isActive value | (value: boolean) => void | X |

Here is a simple example of use:

`ts
import { Component, signal } from '@angular/core';
import { NgxToggler } from 'ngx-toggler';

@Component({
selector: 'app-root',
standalone: true,
imports: [NgxToggler],
template:
[isActive]="state()"
(setIsActive)="state.set($event)"
/>

})
export class App {
state = signal(false);
}
``

Advanced Usage / Optional Attributes

In addition to [isActive] and (setIsActive), ngx-toggler provides several optional attributes to customize its appearance and behavior.

`html
[isActive]="status()"
(setIsActive)="status.set($event)"

[rounded]="false"
mainColor="black"
colorOn="blue"
colorOff="orange"
[gradient]="true"
[togglerBorder]="togglerBorder()"
[innerIndicator]="innerIndicator()"

[tabIndex]="1"
ariaLabelActive="Is active"
ariaLabelInactive="Is inactive"
/>
`

$3

| Input | Description | Type | Default |
| ---------------- | -------------------------------------------------- | ------- | -------------- |
| rounded | Select if toggler is rounded or squeare | boolean | true |
| mainColor | Choose a custom color for lines and circle | string | 'white' |
| colorOn | Choose a custom color for active background | string | '#0ACD47' |
| colorOff | Choose a custom color for inactive background | string | 'red' |
| gradient | Gradient effect for state background | string | false |
| togglerBorder | Type of border: 'border', 'outline', 'none' | string | 'none' |
| innerIndicator | Show: 'text', 'icon' or 'none' | string | 'none' |

$3

| Input | Description | Type | Default |
| ------------------- | ----------------------------------------- | ------ | ----------- |
| [tabIndex] | Controls the button tabindex attribute | number | 0 |
| ariaLabelActive | Custom aria-label when is active | string | 'Switch' |
| ariaLabelInactive | Custom aria-label when is inactive | string | 'Switch' |

The component is already optimized for accessibility by default.
Notice that the component have aria-pressed attribute, which already indicates the "state" of the toggler. You can use the aria-label attribute to describe what is the toggler use.

Advance custom styles

$3

This component comes with an initial size of 40px (height). You can easily change its size by setting the --toggler-size CSS variable. For example:

`css
ngx-toggler{
--toggler-size: 40px;
}
`

$3

You can customize styles by using ::gn-deep in css. For example:

`css
:ng-deep .ngxToggler__button{
background color: red
}
`

$3

- .ngxToggler__button → The main button element
- .ngxToggler__circle → The circle inside.
- .ngxToggler__onBg → Background when isActive
- .ngxToggler__offBg → Background when is inactive
- .ngxToggler__onText → isActive Text styles when innerIndicator input is set to 'text'
- .ngxToggler__offText → is inactive Text styles when innerIndicator input is set to 'text'
- .ngxToggler__onText--icon → isActive Text styles when innerIndicator input is set to 'icon'
- .ngxToggler__offText--icon → isActive Text styles when innerIndicator input is set to 'icon'

You can target different states by combining classes. For example:

`css
:ng-deep .ngxToggler__button.isActive {
border: 4px solid blue;
}

:ng-deep .ngxToggler__offBg.gradient {
box-shadow: 0 0 5px black;
}

``

📌 Report or suggest something

Choose the form that best fits your case:

- 🐞 Report a bug
- ✨ Request an improvement for an existing component
- 🧩 Suggest a new component

👉 Or go to the form selector.

License

MIT