Number Input | Neural Native

Importación

component.ts

import { NeuNumberInputComponent } from '@neural-ui/native/number-input';

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.

Haz sitio a una nueva idea

Ajusta las plazas para un taller del estudio y consulta el total antes de guardar una reserva local. Cambiar la cantidad después conserva el resumen guardado. No se envía ninguna reserva ni pago.

Ver y copiar el ejemplo completo

basic.component.ts

import { Component, signal } from '@angular/core';
import { NeuButtonComponent } from '@neural-ui/native/button';
import { NeuDividerComponent } from '@neural-ui/native/divider';
import { NeuAvatarComponent } from '@neural-ui/native/avatar';
import { NeuNumberInputComponent } from '@neural-ui/native/number-input';
import { View, Text, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuButtonComponent, NeuDividerComponent, NeuAvatarComponent, NeuNumberInputComponent, View, Text, 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">Haz sitio a una nueva idea</text><text class="product-caption">Neural Studio · Talleres creativos</text></view>
    <view class="workshop-ticket"><view class="product-row"><view class="workshop-date"><text class="workshop-day">06</text><text class="workshop-month">NOVIEMBRE</text></view><view class="product-copy"><text class="workshop-kicker">SESIÓN DE ESTUDIO / 03</text><text class="workshop-title">Forma y movimiento</text><text class="workshop-caption">Viernes · 10:00–12:00</text></view></view>
    <view class="workshop-host"><neu-avatar label="Alex Morgan" size="sm" /><view class="product-copy"><text class="workshop-caption">Un taller práctico con Alex Morgan</text></view></view></view>
    <view class="product-surface"><neu-number-input label="Plazas para tu equipo" decreaseLabel="Quitar una plaza" increaseLabel="Añadir una plaza" [(value)]="guests" [min]="1" [max]="10" [step]="1" />
    <text class="product-caption">24 € por plaza · Material incluido · Hasta 10</text><neu-divider />
    <view class="product-row"><view class="product-copy"><text class="product-caption">Total del taller</text><text class="product-heading">{{ guests() }} {{ guests() === 1 ? 'plaza' : 'plazas' }}</text></view><text class="workshop-total">{{ guests() * 24 }} €</text></view>
    <neu-button label="Reservar localmente" (pressed)="reserved.set(guests())" />
    @if (reserved()) { <text class="product-caption" accessibilityLiveRegion="polite">Guardado en esta pantalla: {{ reserved() }} {{ reserved() === 1 ? 'plaza' : 'plazas' }} · {{ reserved() * 24 }} €</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); }
.workshop-ticket { gap: 18px; padding: 20px; border-radius: 18px; background-color: #f5eadf; }
.workshop-date { width: 68px; gap: 3px; align-items: center; }
.workshop-day { color: #6b4733; font-size: 36px; line-height: 40px; font-weight: 600; }
.workshop-month { color: #795c47; font-size: 9px; line-height: 14px; font-weight: 600; letter-spacing: 0.5px; }
.workshop-kicker { color: #795c47; font-size: 9px; line-height: 14px; font-weight: 600; letter-spacing: 0.5px; }
.workshop-title { color: #372a23; font-size: 22px; line-height: 28px; font-weight: 600; }
.workshop-caption { color: #6b5548; font-size: 12px; line-height: 18px; }
.workshop-host { flex-direction: row; gap: 10px; align-items: center; padding-top: 14px; border-top-width: 1px; border-color: #dccbbb; }
.workshop-total { color: var(--neu-text, #172033); font-size: 30px; line-height: 36px; font-weight: 600; }
  `,
})
export class ExampleComponent {
  readonly guests = signal(2);
  readonly reserved = signal(0);
}

Incrementos y totales de solo lectura

Ajusta una donación de cinco en cinco; el campo de solo lectura refleja el importe elegido.

Ver y copiar el ejemplo completo

different-increments-and-read-only-totals.component.ts

import { Component, signal } from '@angular/core';
import { NeuNumberInputComponent } from '@neural-ui/native/number-input';
import { View, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuNumberInputComponent, View, ScrollView],
  template: `
    <scroll-view class="usage-scroll" keyboardShouldPersistTaps="handled"><view class="usage-stack">
    <neu-number-input increaseLabel="Aumentar" decreaseLabel="Disminuir" label="Importe de la donación" [(value)]="donation" [min]="0" [max]="100" [step]="5" />
    <neu-number-input increaseLabel="Aumentar" decreaseLabel="Disminuir" label="Vista previa de la donación" [value]="donation()" [readonly]="true" />
    </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 donation = signal(10);
}

Playground interactivo

Ajusta la configuración y prueba el resultado.

Capturas del dispositivo en inglés.

Number Input · android · native capture — **Android**Captura nativa

Number Input · 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.
min	number	0	Input	Valor mínimo admitido al editar. Por defecto es cero: no admite valores negativos salvo que configures expresamente un mínimo negativo.
max	number	100	Input	Límite superior del rango o cantidad máxima de elementos, según el control.
step	number	1	Input	Incremento positivo utilizado por los botones de aumentar y reducir y por la edición numérica. Por defecto es 1; configura un decimal positivo como 0.5 si lo necesitas.
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.
decreaseLabel	string	'Decrease'	Input	Texto o nombre accesible utilizado para disminuir. No ejecuta la acción por sí solo.
increaseLabel	string	'Increase'	Input	Texto o nombre accesible utilizado para aumentar. No ejecuta la acción por sí solo.

Models

Nombre	Tipo	Predeterminado	Enlace	Descripción
value	number	0	Model · bidireccional	Valor numérico; los cambios del usuario aplican min, max y step. Durante la edición, el campo conserva vacíos, signos y separadores decimales temporales sin reponer la cifra anterior. Al perder el foco o usar un botón de ajuste normaliza el texto; un valor externo sustituye el borrador.

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);