An Angular bundle of components for toggling a state in a simple and customizable way
ngx-toggler is an standalone, reusable and customizable component for Angular 18, 19 and 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:
})
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;
}
``