ngx-yes-no-select

Un componente de selección binaria (Sí/No) para Angular Material, altamente personalizable, con soporte para formularios reactivos y tematización.

Características

• ✅ Integración con Angular Material.
• ✅ Soporte para Reactive Forms (formControlName).
• ✅ Botón de Reset integrado.
• ✅ Posicionamiento de etiquetas configurable (top, bottom, left, right).
• ✅ Textos totalmente personalizables (i18n ready).
• ✅ Tematización mediante CSS Variables.

Instalación

Primero, asegúrate de tener Angular Material instalado:

npm install @angular/material @angular/cdk

Luego instala la librería:

npm install ngx-yes-no-select

Uso Básico

Importa el componente en tu archivo (standalone o módulo):

import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { NgxYesNoSelectComponent } from 'ngx-yes-no-select';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    ReactiveFormsModule, 
    NgxYesNoSelectComponent // <--- Importar aquí
  ],
  template: `
    <ngx-yes-no-select 
      [formControl]="myControl"
      label="¿Aceptas los términos?"
    ></ngx-yes-no-select>
  `
})
export class AppComponent {
  myControl = new FormControl(null);
}

API Reference

Inputs

| Input | Tipo | Default | Descripción | |-------|------|---------|-------------| | label | string | '' | Texto de la etiqueta descriptiva. | | labelPosition | 'top' \| 'bottom' \| 'left' \| 'right' | 'left' | Posición de la etiqueta respecto a los botones. | | yesLabel | string | 'Yes' | Texto para el botón afirmativo. | | noLabel | string | 'No' | Texto para el botón negativo. | | resetLabel | string | 'Reset' | Texto para el botón de reinicio. | | disabled | boolean | false | Deshabilita todos los controles. |

Outputs / Forms

Implementa ControlValueAccessor, por lo que soporta:

• [formControl]="..."
• formControlName="..."
• [(ngModel)]="..."

El valor retornado será true, false o null (si se resetea).

Personalización (Estilos)

Puedes personalizar los colores utilizando variables CSS en el contenedor o globalmente:

/* En tu styles.scss o componente */
ngx-yes-no-select {
  --yns-primary-color: #d32f2f;  /* Color principal (texto seleccionado y reset) */
  --yns-bg-selected: #ffebee;    /* Color de fondo al seleccionar */
  --yns-border-color: #e0e0e0;   /* Color del borde del grupo */
  --yns-text-color: #757575;     /* Color del texto no seleccionado */
  --yns-border-radius: 20px;     /* Radio del borde (cámbialo a 0px para cuadrados) */
}

Ejemplos

Español con Label Arriba

<ngx-yes-no-select 
  label="¿Es mayor de edad?"
  labelPosition="top"
  yesLabel="Sí"
  noLabel="No"
  resetLabel="Limpiar"
  [formControl]="ageControl">
</ngx-yes-no-select>

Estilo Cuadrado y Verde

<ngx-yes-no-select 
  style="--yns-primary-color: green; --yns-border-radius: 4px;"
  label="Aprobar solicitud">
</ngx-yes-no-select>

Autor

[email protected]