InlineEditor

Edit a displayed value in place with explicit save and cancel actions.

Category: Actions
Import: @neural-ui/core/inline-editor
Selector: neu-inline-editor

import { NeuInlineEditorControl } from '@neural-ui/core/inline-editor';

Usage

The pencil starts a draft. Saving applies the draft to value and emits valueCommitted with previousValue and value; cancelling retains the accepted value. type selects the editor and options supplies select entries. Keep the model type consistent with the selected editor. saveOnBlur is optional; explicit actions are the default.

Examples

Try this application-owned interaction. Its event handling and initial data are included in Code.

Current value: "Atlas"

Events: 0

Try and configure

Change the public options, try the result and inspect the updated template. Code contains the complete executable implementation.

Current value: "Atlas"

Events: 0

disabled

readonly

invalid

saveOnBlur

Advanced options · 12

<neu-inline-editor
  [value]="value()"
  (valueChange)="value.set($event)"
  [type]="'text'"
  [options]="selectOptions"
  [size]="'md'"
  [saveOnBlur]="false"
  [disabled]="false"
  [readonly]="false"
  [invalid]="false"
  [editLabel]="'Edit value'"
  [saveLabel]="'Save value'"
  [cancelLabel]="'Cancel edit'"
  [emptyLabel]="'Empty'"
  (valueCommitted)="record('valueCommitted', $event)"
  (editCancel)="record('editCancel', $event)"
/>

State and data for this configuration

These values match the current preview. Complete handlers, Core imports and templates are in Source.

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

export const value = signal("Atlas");

export const selectOptions = [
  "Atlas",
  "Birch",
  "Cedar"
];

Data, callback and structured configuration inputs

These inputs require a model or function, not a checkbox. Edit the same-named field in the Source component and bind it in the template; data already used by this preview appears in the state above.

errors · readonly ValidationError.WithOptionalFieldTree[]

In Source: define errors with this type and use [errors]="errors" (or errors() for a signal).

options · readonly unknown[]

In Source: define options with this type and use [options]="options" (or options() for a signal).

State and events

Accessibility and keyboard

Activate the pencil with Enter/Space. Enter saves a single-line edit; Escape cancels. Tab reaches save and cancel actions.

Key	Action
`Tab`	Reach the pencil, the editor and the enabled save/cancel buttons.
`Enter`	On the pencil, start editing. In text or number mode, save the draft. In a Textarea, insert a new line; Select and DateInput keep their own keyboard behavior.
`Ctrl / Cmd + Enter`	Save the multiline Textarea draft.
`Space`	Activate the focused pencil, save or cancel button.
`Escape`	Cancel editing and discard the draft.

API

Inputs, models and Outputs are extracted from the installed Core package. Named public types link to their definitions. Templates below include executable examples.

Inputs

Configure the component with [property]="value". Your application supplies these values; the component does not replace the state you pass in.

Name	Type	Default	Template binding	Description
`ariaDescribedBy`	`string`	`''`	`[ariaDescribedBy]`	IDs of elements describing the control, separated by spaces.
`cancelLabel`	`string`	`'Cancel edit'`	`[cancelLabel]`	Accessible name of the corresponding edit, save or cancel action.
`dirty`	`boolean`	`false`	`[dirty]`	Form state indicating that the user has changed the value.
`disabled`	`boolean`	`false`	`[disabled]`	Prevents interaction with this control.
`editLabel`	`string`	`'Edit value'`	`[editLabel]`	Accessible name of the corresponding edit, save or cancel action.
`emptyLabel`	`string`	`'Empty'`	`[emptyLabel]`	Text displayed when the editable value is empty.
`errors`	`readonly ValidationError.WithOptionalFieldTree[]`	`[]`	`[errors]`	Validation errors supplied by the form or the application.
`hidden`	`boolean`	`false`	`[hidden]`	Hides the control according to the form state.
`invalid`	`boolean`	`false`	`[invalid]`	Displays the invalid state; it does not add a validation rule.
`options`	`readonly unknown[]`	`[]`	`[options]`	Loaded option records. Accessors allow using your own domain objects.
`pending`	`boolean`	`false`	`[pending]`	Form state indicating that asynchronous validation is pending.
`placeholder`	`string`	`''`	`[placeholder]`	Text shown when the field has no selected value.
`readonly`	`boolean`	`false`	`[readonly]`	Keeps the applied value visible but prevents user edits.
`required`	`boolean`	`false`	`[required]`	Marks the field as required; use a form validator to enforce it.
`saveLabel`	`string`	`'Save value'`	`[saveLabel]`	Accessible name of the corresponding edit, save or cancel action.
`saveOnBlur`	`boolean`	`false`	`[saveOnBlur]`	Commit a valid draft when focus leaves the editor. False retains explicit save/cancel actions.
`size`	`NeuInlineEditorSize`	`'sm'`	`[size]`	Control size. The accepted scale or numeric unit is specified by its type.
`startInEdit`	`boolean`	`false`	`[startInEdit]`	Start the instance in editing mode.
`touched`	`boolean`	`false`	`[touched]`	Form state indicating that the control has been visited.
`type`	`NeuInlineEditorType`	`'text'`	`[type]`	Editor kind: text, textarea, number, select or date. Keep value compatible with it.

Models

A model supports [(property)]="signal" or the [property] and (propertyChange) pair. Choose one form, not both.

Name	Type	Default	Template binding	Description
`value`	`V`	`'' as V`Derived default	`[(value)]`	Application-owned editable model value.

Outputs

Listen to an event with (event)="handler($event)". The table explains the data your handler receives and how to use it.

Name	Payload	Template binding	Description
`editCancel`	`V`	`(editCancel)="onEditCancel($event)"`	Reports cancellation of the edit without applying its draft.
`editStart`	`V`	`(editStart)="onEditStart($event)"`	Emits the accepted value when an editing session begins.
`touch`	`void`	`(touch)="onTouch($event)"`	Notifies the form that the control has been touched; not a value change.
`valueCommitted`	`NeuInlineEditorValueCommitEvent<V>`	`(valueCommitted)="onValueCommitted($event)"`	Reports a completed edit. Inspect its payload type: some controls emit the value, while InlineEditor emits previousValue and value.

Templates

ng-content projects content into the component. TemplateRef inputs receive a template; ng-template directives identify templates with a typed context. A directive shared by an entrypoint is not necessarily a slot of this component.

This component does not expose content projection or public customization templates.

Public Types

Open a type to inspect its definition and interface fields.

NeuInlineEditorCommitEventTypeScript

import type { NeuInlineMode } from '@neural-ui/core/inline-editor';
import type { NeuInlineValue } from '@neural-ui/core/inline-editor';

import type { NeuInlineEditorCommitEvent } from '@neural-ui/core/inline-editor';

// Public declaration (reference only)
export interface NeuInlineEditorCommitEvent<M extends NeuInlineMode = NeuInlineMode> {
  readonly previousValue: NeuInlineValue<M>;
  readonly value: NeuInlineValue<M>;
}

NeuInlineEditorComponentTypeScript

import type { NeuInlineMode } from '@neural-ui/core/inline-editor';
import type { NeuInlineValue } from '@neural-ui/core/inline-editor';

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

// Public declaration (reference only)
export type NeuInlineEditorComponent<M extends NeuInlineMode = 'text'> = NeuInlineEditorControl<NeuInlineValue<M>>;
const NeuInlineEditorComponent: typeof NeuInlineEditorControl;

NeuInlineEditorSizeTypeScript

import type { NeuInlineEditorSize } from '@neural-ui/core/inline-editor';

// Public declaration (reference only)
export type NeuInlineEditorSize = 'sm' | 'md' | 'lg';

NeuInlineEditorTypeTypeScript

import type { NeuInlineMode } from '@neural-ui/core/inline-editor';

import type { NeuInlineEditorType } from '@neural-ui/core/inline-editor';

// Public declaration (reference only)
export type NeuInlineEditorType = NeuInlineMode | 'select' | 'textarea' | 'date';

NeuInlineModeTypeScript

NeuInlineValueTypeScript

import type { NeuInlineMode } from '@neural-ui/core/inline-editor';

import type { NeuInlineValue } from '@neural-ui/core/inline-editor';

// Public declaration (reference only)
export type NeuInlineValue<M extends NeuInlineMode> = M extends 'number' ? number | null : string;

Styles and tokens

Use the supported public tokens listed below. Surrounding layout belongs to your application; validate the result in light and dark modes and narrow containers.

Specific tokens

This component uses shared theme tokens rather than dedicated component hooks.

Shared tokens used

Override these on a local wrapper to affect this example. An override on :root affects other components that use the same token.

Token	Purpose here	Other impact	Default / fallback
`--neu-border`	Normal control and cell borders	Shared by other Core consumers; scope the override.	`rgba(15, 23, 42, 0.08)`
`--neu-focus-ring`	Normal keyboard-focus ring	Shared by other Core consumers; scope the override.	`0 0 0 var(--neu-focus-ring-width) rgba(0, 122, 255, 0.15)`
`--neu-surface`	Main field, header or control surface	Shared by other Core consumers; scope the override.	`#ffffff`
`--neu-text-muted`	Secondary labels and supporting content	Shared by other Core consumers; scope the override.	`#475569`
`--neu-radius-sm`	Corner radius	Shared by other Core consumers; scope the override.	`6px`
`--neu-space-1`	Spacing between content and controls	Shared by other Core consumers; scope the override.	`0.25rem`
`--neu-space-2`	Spacing between content and controls	Shared by other Core consumers; scope the override.	`0.5rem`
`--neu-space-3`	Spacing between content and controls	Shared by other Core consumers; scope the override.	`0.75rem`