Rating | Neural Native

Importación

component.ts

import { NeuRatingComponent } from '@neural-ui/native/rating';

Ejemplos

Importa ExampleComponent en su padre y coloca <app-example /> dentro del neu-theme raíz de tu aplicación. El preview aporta el marco y las zonas seguras; utiliza la estructura raíz de Instalación en tu app.

¿Repetimos otra mañana?

Valora un paseo compartido con el control real de cinco estrellas y lee la reflexión correspondiente. Borrar reinicia el borrador; guardar conserva una puntuación local independiente hasta que decidas guardar otra. No se envía ninguna valoración.

Ver y copiar el ejemplo completo

basic.component.ts

import { Component, signal } from '@angular/core';
import { NeuButtonComponent } from '@neural-ui/native/button';
import { NeuRatingComponent } from '@neural-ui/native/rating';
import { View, Text, Image, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuButtonComponent, NeuRatingComponent, View, Text, Image, ScrollView],
  template: `
    <scroll-view class="product-scroll" keyboardShouldPersistTaps="handled" [showsVerticalScrollIndicator]="false"><view class="product-stack"><view class="product-section"><text class="product-title" accessibilityRole="header">¿Repetimos otra mañana?</text><text class="product-caption">Una pequeña reflexión sobre un buen momento</text></view>
    <view class="walk-summary"><image class="walk-cover" [source]="{ uri: cover }" resizeMode="cover" accessibilityLabel="Ilustración original de un sendero de bosque iluminado" /><view class="walk-heading"><text class="walk-kicker">PASEOS NEURAL / 01</text><text class="walk-title">Una mañana sin prisa</text><text class="walk-description">Ruta del bosque · 45 minutos en compañía</text></view></view>
    <view class="product-surface"><view class="product-section"><text class="product-heading">¿Qué sensación te dejó?</text><text class="product-caption">Tu opinión ayuda a preparar el próximo paseo del estudio.</text></view><neu-rating label="Valora tu experiencia" clearLabel="Borrar valoración" [(value)]="rating" [max]="5" [clearable]="true" />
    <view class="rating-reflection"><text class="reflection-kicker">TU IMPRESIÓN</text><text class="reflection-copy" accessibilityLiveRegion="polite">{{ rating() ? feedback()[rating() - 1] : 'Una página nueva. Elige tus estrellas.' }}</text></view>
    <neu-button label="Guardar mi opinión" [disabled]="rating() === 0 || rating() === submitted()" (pressed)="submitted.set(rating())" />
    @if (submitted()) { <text class="product-caption" accessibilityLiveRegion="polite">Guardado en esta pantalla: {{ submitted() }} / 5. Gracias por dedicarle un momento.</text> }</view></view></scroll-view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }

:host { flex: 1; flex-shrink: 1; min-height: 0; }
.product-scroll { flex: 1; flex-shrink: 1; height: 0px; min-height: 0; }
.product-stack { gap: 24px; padding-bottom: 20px; }
.product-section { gap: 12px; }
.product-row { flex-direction: row; align-items: center; gap: 12px; }
.product-copy { flex: 1; min-width: 0; gap: 4px; }
.product-title { color: var(--neu-text, #172033); font-size: 24px; line-height: 30px; font-weight: 600; }
.product-heading { color: var(--neu-text, #172033); font-size: 17px; line-height: 23px; font-weight: 600; }
.product-caption { color: var(--neu-muted, #596477); font-size: 14px; line-height: 20px; }
.product-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.product-surface { gap: 16px; padding: 16px; border-radius: 16px; background-color: var(--neu-surface, #ffffff); border-width: 1px; border-color: var(--neu-border, #a5afbf); }
.walk-summary { overflow: hidden; border-radius: 18px; background-color: #e6efe7; }
.walk-cover { width: 100%; aspect-ratio: 2.8; }
.walk-heading { gap: 7px; padding: 18px; }
.walk-kicker { color: #3f5c45; font-size: 10px; line-height: 16px; font-weight: 600; letter-spacing: 1px; }
.walk-title { color: #274531; font-size: 23px; line-height: 29px; font-weight: 600; }
.walk-description { color: #3f5c45; font-size: 12px; line-height: 18px; }
.rating-reflection { min-height: 78px; gap: 8px; padding: 14px; border-radius: 12px; background-color: var(--neu-surface-secondary, #eef1f5); }
.reflection-kicker { color: var(--neu-muted, #596477); font-size: 9px; line-height: 14px; font-weight: 600; letter-spacing: 1px; }
.reflection-copy { color: var(--neu-text, #172033); font-size: 15px; line-height: 22px; font-weight: 500; }
  `,
})
export class ExampleComponent {
  readonly cover = '/assets/media/v2/forest.png';
  readonly rating = signal(4);
  readonly submitted = signal(0);
  readonly feedback = signal(['No fue mi tipo de mañana.', 'Algunos buenos momentos, con margen para mejorar.', 'Un cambio de aires que se agradece.', 'Una pequeña pausa que marcó la diferencia.', 'Más mañanas así, por favor.']);
}

Resumen de solo lectura

Muestra una valoración media de clientes que no se puede editar.

Ver y copiar el ejemplo completo

read-only-summary.component.ts

import { Component, signal } from '@angular/core';
import { NeuRatingComponent } from '@neural-ui/native/rating';
import { View, Text, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuRatingComponent, View, Text, ScrollView],
  template: `
    <scroll-view class="usage-scroll" keyboardShouldPersistTaps="handled"><view class="usage-stack">
    <neu-rating clearLabel="Borrar valoración" label="Valoración media" [value]="4" [max]="5" [readonly]="true" [clearable]="false" /><text class="usage-caption">4 de 5 · 128 opiniones</text>
    </view></scroll-view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }

.usage-scroll { flex: 1; }
.usage-stack { gap: 20px; padding-bottom: 20px; }
.usage-section { gap: 12px; }
.usage-heading { color: var(--neu-text, #172033); font-size: 16px; font-weight: 600; }
.usage-caption { color: var(--neu-muted, #64748b); font-size: 14px; }
.usage-row { flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: center; }
.usage-actions { flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; }


  `,
})
export class ExampleComponent {
  readonly rating = signal(3);
}

Playground interactivo

Ajusta la configuración y prueba el resultado.

Capturas del dispositivo en inglés.

Rating · android · native capture — **Android**Captura nativa

Rating · ios · native capture — **iOS**Captura nativa

Referencia API

Inputs

Nombre	Tipo	Predeterminado	Enlace	Descripción
label	string	Obligatorio	Input	Nombre legible del control, acción o grupo.
max	number	5	Input	Cantidad de posiciones de la escala de puntuación.
disabled	boolean	false	Input	Desactiva la interacción del usuario. La aplicación puede seguir proporcionando valores.
readonly	boolean	false	Input	Impide editar o seleccionar desde el control y conserva el valor actual.
clearable	boolean	true	Input	Permite borrar el valor seleccionado mediante la acción de limpiar del control.
clearLabel	string	'Clear rating'	Input	Texto o nombre accesible utilizado para limpiar. No ejecuta la acción por sí solo.

Models

Nombre	Tipo	Predeterminado	Enlace	Descripción
value	number	0	Model · bidireccional	Valor editado o ID(s) seleccionado(s), según el tipo declarado. Enlaza una signal escribible mediante [(value)].

Outputs

Nombre	Payload	Cuándo se emite
valueChange	number	Emite el valor actualizado de value. [(value)] enlaza este output junto con su input model.
touch	void	Comunica la interacción del usuario al formulario o aplicación que lo contiene.

Estado de los models

Enlaza la signal con [(nombreModel)] sin llamarla. Utiliza nombreModel() para leer su valor.

model-fields.ts

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

// Fields inside your component class
readonly value = signal<number>(0);