Terminal

Collect commands and display application-owned terminal output.

Category: Layout and content
Import: @neural-ui/core/terminal
Selector: neu-terminal

import { NeuTerminalComponent } from '@neural-ui/core/terminal';

Usage

Terminal is an interactive command surface, not an operating-system shell. Set welcomeMessage and prompt, handle commandSubmit and append response lines to output. Each line supports output, info or error. response can append a single changed response string; output is the clearer choice for repeated replies and application-owned logs. readonly keeps the input visible but prevents command editing; disabled keeps it visible but unavailable.

Examples

Try the interaction and open Code for the complete implementation.

Type help or status, then press Enter. Use ↑ / ↓ to recall commands. Commands are handled locally; no shell code runs.

Local session

Welcome. Type help to begin.

commandSubmit: —

Try and configure

Change the options, try the result and see the template update. Code contains the full executable example.

Type help or status, then press Enter. Use ↑ / ↓ to recall commands. Commands are handled locally; no shell code runs.

Local session

Welcome. Type help to begin.

commandSubmit: —

prompt

response

readonly

disabled

Template generated from your current options. Open Code for the complete example.

Advanced options · 3

<neu-terminal
  prompt="$"
  [output]="output()"
  [response]="undefined"
  [readonly]="false"
  [disabled]="false"
  (commandSubmit)="handleCommand($event)"
  [ariaLabel]="'Example terminal'"
  [welcomeMessage]="'Welcome. Type help to begin.'"
/>

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 output = signal([]);

Data, callback and structured configuration inputs

Data and content

commandSubmit reports the submitted command. The application decides what it means and supplies output; Core never evaluates or executes it. The example handles help and status synchronously. Previous commands are recalled with up/down. The reset action creates a fresh example session. No Templates are available.

Accessibility and keyboard

Give the terminal and its input distinct accessible names. Tab reaches the command input, Enter submits, and up/down move through command history. Output is announced as a polite log. Do not use this example handler to execute untrusted input.

Key	Action
`Tab`	Reach the command input and available actions.
`Enter`	Submit the command from the input.
`ArrowUp`	Recall the previous command in history.
`ArrowDown`	Recall the next command in history.

API

Inputs and Outputs match the installed package. Named types link to definitions. Every available Template has a Demo and Code example.

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
`ariaLabel`	`string`	`'Terminal'`	`[ariaLabel]`	Label for component region. Translate it for your application.
`disabled`	`boolean`	`false`	`[disabled]`	Disable the visible command input.
`inputAriaLabel`	`string`	`'Terminal command'`	`[inputAriaLabel]`	Label for command input. Translate it for your application.
`output`	`readonly NeuTerminalLine[]`	`[]`	`[output]`	Application-owned lines with text and optional output/info/error kind.
`prompt`	`string`	`'$'`	`[prompt]`	Visible prefix beside the command input.
`readonly`	`boolean`	`false`	`[readonly]`	Keep the command field visible and read-only; submissions are ignored.
`response`	`string \| undefined`	`undefined`	`[response]`	Append a response when this string changes.
`welcomeMessage`	`string`	`''`	`[welcomeMessage]`	Initial informational message.

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
`commandSubmit`	`NeuTerminalCommand`	`(commandSubmit)="onCommandSubmit($event)"`	Reports a submitted command string; Core does not execute it.

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.

NeuTerminalCommandTypeScript

import type { NeuTerminalCommand } from '@neural-ui/core/terminal';

// Public declaration (reference only)
export interface NeuTerminalCommand {
  command: string;
}

NeuTerminalLineTypeScript

import type { NeuTerminalLine } from '@neural-ui/core/terminal';

// Public declaration (reference only)
export interface NeuTerminalLine {
  kind?: 'output' | 'error' | 'info';
  text: string;
}

Styles and tokens

Customize supported public tokens and check both themes. Example illustrations and application state are not Core inputs.

Specific tokens

Token	Purpose	State / variant	Default / source	Fallback
`--neu-terminal-bg`	Inherited theme value used by this component	Field surface	`#0f172a`Root declaration	`No token alias`
`--neu-terminal-border`	Inherited theme value used by this component	Field surface	`#334155`Root declaration	`No token alias`
`--neu-terminal-error`	Inherited theme value used by this component	Field surface	`#fca5a5`Root declaration	`No token alias`
`--neu-terminal-font`	Text typography	Field surface	`ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace`Root declaration	`No token alias`
`--neu-terminal-muted`	Inherited theme value used by this component	Field surface	`#94a3b8`Root declaration	`No token alias`
`--neu-terminal-prompt`	Inherited theme value used by this component	Field surface	`#38bdf8`Root declaration	`No token alias`
`--neu-terminal-text`	Inherited theme value used by this component	Field surface	`#e2e8f0`Root declaration	`No token alias`

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-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-radius-lg`	Corner radius	Shared by other Core consumers; scope the override.	`12px`