Rating

Uso

El modelo es number | null. stars define la escala y step admite 1 o 0.5. Activar de nuevo la opción seleccionada limpia la valoración a null; la aplicación también puede limpiarla directamente. Utiliza readonly para mostrar una valoración existente sin permitir su edición.

Ejemplos

Interactúa con el ejemplo y abre Código para ver su implementación completa.

3.5

Prueba y configura

Cambia las opciones y prueba la vista previa. Despliega el valor de la aplicación o el evento para consultar los datos reales; el template generado permanece junto al configurador.

null

<neu-rating
  [(value)]="number"
  [stars]="5"
  [step]="1"
  [label]="'Tu valoración'"
/>

import { signal } from '@angular/core';

export const number = signal(null);

Signal Forms

Enlaza FormField una sola vez al componente; el campo controla el valor y la validación. El esquema exige un valor no vacío. Sal del control para marcarlo como visitado y restablece el campo para limpiar el valor y el estado de interacción.

Guía de Signal Forms

{
  "field": null
}

Valor y eventos

Utiliza [(value)] o [value] junto con (valueChange), no ambas formas. El modelo sincroniza el estado de la aplicación; los demás Outputs comunican los eventos documentados. touch comunica que se ha visitado o abandonado el control, no un valor nuevo.

Accesibilidad y teclado

Nombra el grupo de valoración mediante label o ariaLabel. La opción seleccionada recibe el foco con Tab; las flechas cambian la valoración sin recorrer cada estrella con Tab. Home/End va a la primera o última opción. Espacio/Intro activa una opción y la limpia si ya estaba seleccionada. readonly conserva el valor disponible sin permitir editarlo.

API

Los Inputs, modelos y Outputs proceden del contrato de Core fijado. Pulsa un tipo con nombre para abrir su definición. Este componente no tiene templates públicos.

Inputs

Configura el componente con [propiedad]="valor". Tu aplicación proporciona estos valores; el componente no debe reemplazar el estado que le pasas.

Models

Un modelo admite [(propiedad)]="signal" o la pareja [propiedad] y (propiedadChange). Elige una de las dos formas, no ambas.

Outputs

Escucha un evento con (evento)="handler($event)". La tabla indica qué datos recibe tu función y cómo utilizarlos.

Estilos y tokens

Carga los estilos de Core una sola vez. Utiliza los tokens públicos para personalizaciones locales o un preset para cambios de toda la aplicación. Conserva la legibilidad de etiquetas, foco, opciones seleccionadas y estados deshabilitados en modo claro y oscuro.

Componentes relacionados

Utiliza los controles relacionados para otro tipo de valor o interacción.

• NumberInput
• InputMask
• InputOTP