Inline Editor | Neural Native

Import

component.ts

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

Examples

Import ExampleComponent into its parent and place <app-example /> inside your application’s root neu-theme. The preview supplies the device frame and safe areas; use the root setup from Installation in your app.

Name the next milestone

Edit a project title within its planning card. Save confirms the value locally; Cancel leaves the previously confirmed title in place.

View and copy the complete example

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">Name the next milestone</text><text class="product-caption">Small edits, right where you need them</text></view>
    <neu-card title="Release planning" description="Product workspace" variant="outlined"><view class="product-section">
    <neu-inline-editor label="Project title" [(value)]="title" (saved)="saved.set($event)" />
    <neu-badge label="In progress" tone="info" /><text class="product-caption">Tap the title to edit. Save confirms it; Cancel restores it.</text></view></neu-card>
    <text class="product-caption" accessibilityLiveRegion="polite">Confirmed title: {{ 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('Mobile launch');
  readonly saved = signal('Mobile launch');
}

Required field

Edit the workspace name; this field cannot be saved empty.

View and copy the complete example

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 label="Workspace name" [(value)]="workspaceName" [required]="true" hint="This name cannot be empty." />
    </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('Product studio');
}

Interactive playground

Change the settings and try the result.

Device captures shown in English.

Inline Editor · android · native capture — **Android**Native screenshot

Inline Editor · ios · native capture — **iOS**Native screenshot

API reference

Inputs

Name	Type	Default	Binding	Description
placeholder	string	'Tap to edit'	Input	Example or prompt displayed while the value is empty; keep a separate label.
saveLabel	string	'Save'	Input	Text or accessible name used for save. It does not perform the action by itself.
cancelLabel	string	'Cancel'	Input	Text or accessible name used for cancel. It does not perform the action by itself.
label	string	Required	Input	Human-readable name for the control, action or group.
disabled	boolean	false	Input	Disables user interaction. Values can still be supplied by the application.
readonly	boolean	false	Input	Prevents user editing or selection while retaining the current value.
invalid	boolean	false	Input	Marks the control invalid. Your form or application supplies the validation rule.
touched	boolean	false	Input	Field interaction state, supplied manually or through Signal Forms.
hint	string	''	Input	Field guidance shown when no error message is being displayed.
required	boolean	false	Input	Prevents saving an empty inline-edit value. Define any additional validation in your app.
requiredLabel	string	'Required'	Input	Localized requirement announced with the field hint when required is true. Defaults to Required; it does not validate the value.
error	string	''	Input	Application-provided error message; combine it with the control’s invalid state.

Models

Name	Type	Default	Binding	Description
editing	boolean	false	Model · two-way	Whether InlineEditor is showing its editable state. Bind a writable signal with [(editing)].
value	string	''	Model · two-way	Current edited value or selected ID(s), using the declared type. Bind a writable signal with [(value)].

Outputs

Name	Payload	When it emits
editingChange	boolean	Emits the updated editing value. [(editing)] binds this output together with its model input.
saved	string	Emits the confirmed inline-edit value.
cancelled	void	Reports cancellation of the current editing or confirmation task.
valueChange	string	Emits the updated value value. [(value)] binds this output together with its model input.
touch	void	Reports user interaction to the surrounding form or application.

Model state

Bind the signal with [(modelName)] without calling it. Use modelName() to read its value.

model-fields.ts

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

// Fields inside your component class
readonly editing = signal<boolean>(false);
readonly value = signal<string>('');