toggleClass

Paquete: @tiendana/ngx-core/ui

Directiva que alterna clases CSS al hacer clic en el elemento.

Características

✅ Toggle simple con un clic
✅ Signal reactivo para estado
✅ Clase CSS dinámica

API

Inputs

Input	Tipo	Descripción
toggleClass	InputSignal<string>	Clase CSS a alternar

Signals

Signal	Tipo	Default	Descripción
enabled	WritableSignal<boolean>	false	Estado de la clase

Uso

<div [toggleClass]="'active'">
  Click para alternar clase "active"
</div>

<button [toggleClass]="'expanded'">
  Toggle
</button>

Ejemplo Práctico

// Template
<div [toggleClass]="'highlighted'" class="card">
  <h3>Card</h3>
  <p>Haz clic para resaltar</p>
</div>

// CSS
.card {
  border: 1px solid var(--border-color);
  padding: 16px;
  transition: all 0.3s;
}

.card.highlighted {
  background: var(--color-sun);
  border-color: var(--color-sun);
}

Implementación

@Directive({
  selector: '[toggleClass]',
  host: {
    '[class]': 'enabled() ? toggleClass() : ""'
  }
})
export class ToggleClassDirective {
  toggleClass = input.required<string>();
  enabled = signal<boolean>(false);

  @HostListener('click')
  onClick() {
    this.enabled.update(val => !val);
  }
}

Casos de Uso

Acordeón

<div [toggleClass]="'open'" class="accordion">
  <div class="header">Click para expandir</div>
  <div class="content">Contenido colapsable</div>
</div>

Menu Toggle

<button [toggleClass]="'active'">
  ☰ Menu
</button>

Dark Mode Toggle

<button [toggleClass]="'dark-theme'">
  🌓 Toggle Dark Mode
</button>

Control Programático

Accede al signal enabled para controlar el estado:

@ViewChild(ToggleClassDirective) toggleDir!: ToggleClassDirective;

activate() {
  this.toggleDir.enabled.set(true);
}

deactivate() {
  this.toggleDir.enabled.set(false);
}

Notas

• La clase solo se aplica cuando enabled() es true
• No interfiere con otras clases del elemento
• Usa signals para reactividad automática