Inline Editor | Neural Native

Importación

component.ts

import { NeuInlineEditorComponent } from '@neural-ui/native/inline-editor';

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.

Pon nombre al próximo hito

Edita el título dentro de su tarjeta de planificación. Guardar confirma el valor localmente; Cancelar conserva el título anterior.

Ver y copiar el ejemplo completo

basic.component.ts

import { Component, signal } from '@angular/core';
import { NeuCardComponent } from '@neural-ui/native/card';
import { NeuBadgeComponent } from '@neural-ui/native/badge';
import { NeuInlineEditorComponent } from '@neural-ui/native/inline-editor';
import { View, Text, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuCardComponent, NeuBadgeComponent, NeuInlineEditorComponent, View, Text, ScrollView],
  template: `
    <scroll-view class="product-scroll" keyboardShouldPersistTaps="handled" [showsVerticalScrollIndicator]="true"><view class="product-stack"><view class="product-section"><text class="product-title" accessibilityRole="header">Pon nombre al próximo hito</text><text class="product-caption">Pequeños cambios, justo donde los necesitas</text></view>
    <neu-card title="Planificación del lanzamiento" description="Espacio del producto" variant="outlined"><view class="product-section">
    <neu-inline-editor cancelLabel="Cancelar" saveLabel="Guardar" label="Título del proyecto" [(value)]="title" (saved)="saved.set($event)" />
    <neu-badge label="En curso" tone="info" /><text class="product-caption">Pulsa el título para editar. Guardar confirma; Cancelar lo restaura.</text></view></neu-card>
    <text class="product-caption" accessibilityLiveRegion="polite">Título confirmado: {{ saved() }}</text></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); }

  `,
})
export class ExampleComponent {
  readonly title = signal('Lanzamiento móvil');
  readonly saved = signal('Lanzamiento móvil');
}

Campo obligatorio

Edita el nombre del espacio; este campo no se puede guardar vacío.

Ver y copiar el ejemplo completo

required-field.component.ts

import { Component, signal } from '@angular/core';
import { NeuInlineEditorComponent } from '@neural-ui/native/inline-editor';
import { View, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuInlineEditorComponent, View, ScrollView],
  template: `
    <scroll-view class="usage-scroll" keyboardShouldPersistTaps="handled"><view class="usage-stack">
    <neu-inline-editor cancelLabel="Cancelar" saveLabel="Guardar" label="Nombre del espacio" [(value)]="workspaceName" [required]="true" hint="El nombre no puede estar vacío." />
    </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 workspaceName = signal('Estudio de producto');
}

Playground interactivo

Ajusta la configuración y prueba el resultado.

Capturas del dispositivo en inglés.

Inline Editor · android · native capture — **Android**Captura nativa

Inline Editor · ios · native capture — **iOS**Captura nativa

Referencia API

Inputs

Nombre	Tipo	Predeterminado	Enlace	Descripción
placeholder	string	'Tap to edit'	Input	Ejemplo o indicación mientras el valor está vacío; conserva una etiqueta independiente.
saveLabel	string	'Save'	Input	Texto o nombre accesible utilizado para guardar. No ejecuta la acción por sí solo.
cancelLabel	string	'Cancel'	Input	Texto o nombre accesible utilizado para cancelar. No ejecuta la acción por sí solo.
label	string	Obligatorio	Input	Nombre legible del control, acción o grupo.
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.
invalid	boolean	false	Input	Marca el control como inválido. El formulario o la aplicación aporta la regla de validación.
touched	boolean	false	Input	Estado de interacción con el campo, aportado manualmente o mediante Signal Forms.
hint	string	''	Input	Ayuda del campo que aparece cuando no se muestra un mensaje de error.
required	boolean	false	Input	Impide guardar un valor vacío en la edición inline. Define las demás reglas de validación en la app.
requiredLabel	string	'Required'	Input	Requisito traducido que se anuncia con la ayuda cuando required es true. Required por defecto; no valida el valor.
error	string	''	Input	Mensaje de error aportado por la aplicación; combínalo con el estado invalid del control.

Models

Nombre	Tipo	Predeterminado	Enlace	Descripción
editing	boolean	false	Model · bidireccional	Indica si InlineEditor muestra el estado de edición. Enlaza una signal escribible mediante [(editing)].
value	string	''	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
editingChange	boolean	Emite el valor actualizado de editing. [(editing)] enlaza este output junto con su input model.
saved	string	Emite el valor confirmado de la edición en línea.
cancelled	void	Comunica la cancelación de la edición o confirmación actual.
valueChange	string	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 editing = signal<boolean>(false);
readonly value = signal<string>('');