NgxTogglers - Angular Togglers Bundle

ngx-togglers is a bundle of standalone, reusable and customizable components for Angular 18, 19 and 20.

All components are designed to work with signals and Angular zoneless, providing a lightweight, flexible, and accessible UI togglers.

Components included:

• ngx-menu-toggler
• ngx-theme-toggler
• ngx-toggler

Installation

If you want to install the latest version of the bundle (currently 20):

npm install ngx-togglers

Angular 19:

npm install ngx-togglers@angular19

Angular 18:

npm install ngx-togglers@angular18

Basic Usage

Using ngx-togglers is very simple. Here you can find some basic explanations. If you want advance information see the oficial documentation of each componente (link bellow).

1. Menu Toggler

import { Component, signal } from '@angular/core';
import { NgxMenuToggler } from 'ngx-togglers';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [NgxMenuToggler],
  template: `
    <ngx-menu-toggler
      [isOpen]="menuOpen()"
      (setIsOpen)="menuOpen.set($event)"
    />
  `
})
export class App {
  menuOpen = signal(false);
}

👉 Full documentation: ngx-menu-toggler

2. Theme Toggler

import { Component, signal } from '@angular/core';
import { NgxThemeToggler } from 'ngx-togglers';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [NgxThemeToggler],
  template: `
    <ngx-theme-toggler
      [isDark]="darkMode()"
      (setIsDark)="darkMode.set($event)"
   />
  `
})
export class App {
  darkMode = signal(false);
}`

👉 Full documentation: ngx-theme-toggler

2. Generic Toggler

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

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

👉 Full documentation: ngx-toggler

📌 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