Inline Text Edit

Inline Text Edit lets users edit already visible text directly in place. It uses a contenteditable host, emits the new trimmed text through contentChanged, saves on Enter or blur, and cancels the current edit on Escape.

Use it for quick rename and edit-in-place flows such as project names, task names, card titles, table labels, short descriptions, headings, and other small pieces of text where opening a separate form would be too heavy.

Do not use Inline Text Edit for normal labeled forms, validation-heavy fields, textarea workflows, rich text, comments, replies, large documents, value selection, or complex save/cancel flows with explicit buttons. Use FormField with Input, Textarea, TextEditor, ContentEditor, CommentEditor, Select, or a custom form for those cases.

Key features:

Edits the text directly where it is displayed.
Supports placeholder text for empty content.
Can delay contentChanged emissions with the delay input.
Saves on Enter or blur and cancels on Escape.

The NgStarter Angular Inline Text Edit component lets you let users edit already visible plain text directly in place with a contenteditable host. Use for quick rename and edit-in-place flows such as project names, task names, card titles, table labels, short descriptions, headings, and other small text values where opening a separate form would be too heavy. It includes examples for Basic inline text edit.

Basic inline text edit

Use Inline Text Edit for small text values that should be edited directly in place without opening a form.

Hover and edit, then press Enter or click outside to save. Press Esc to cancel.

My Awesome Project

This is a description inside a tag. You can edit me too!

Project Name: My Awesome Project

Project Description: This is a description inside a tag. You can edit me too!