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):

npm install ngx-toggler

Angular 19:

npm install ngx-toggler@angular19

Angular 18:

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:

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [NgxToggler],
  template: `
    <ngx-toggler
      [isActive]="state()"
      (setIsActive)="state.set($event)"
   />
  `
})
export class App {
  state = signal<boolean>(false);
}`

Advanced Usage / Optional Attributes

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

<ngx-toggler
  [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"
/>

Style Options

| 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' |

Accessibility Options

| 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

Custom size

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:

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

Custom styles

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

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

Customizable elements

• .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:

: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