ngx-togglers/README.md

An Angular bundle of components for toggling in a simple and customizable way

<p align="center">
  <a href="https://alday.dev" target="_blank" rel="noreferrer noopener">
    <img src="https://github.com/aldaydev/ngx-components-issues/blob/main/assets/covers/ngx-togglers-cover.gif?raw=true" alt="NgxTogglers cover">
  </a>
</p>

# 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`](https://www.npmjs.com/package/ngx-menu-toggler)  
- [`ngx-theme-toggler`](https://www.npmjs.com/package/ngx-theme-toggler)  
- [`ngx-toggler`](https://www.npmjs.com/package/ngx-toggler)  


## Installation

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

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

Angular 18:  
```bash
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

```ts
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](https://www.npmjs.com/package/ngx-menu-toggler)

------------

2. Theme Toggler

```ts
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](https://www.npmjs.com/package/ngx-theme-toggler)


------------

2. Generic Toggler

```ts
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](https://www.npmjs.com/package/ngx-toggler)


------------

## 📌 Report or suggest something

Choose the form that best fits your case:

- 🐞 [Report a bug](https://github.com/aldaydev/ngx-components-issues/issues/new?template=bug_report.yml)  
- ✨ [Request an improvement for an existing component](https://github.com/aldaydev/ngx-components-issues/issues/new?template=feature_request.yml)  
- 🧩 [Suggest a new component](https://github.com/aldaydev/ngx-components-issues/issues/new?template=new_component_request.yml)  

👉 Or go to the [form selector](https://github.com/aldaydev/ngx-components-issues/issues/new/choose).


## License
MIT