Terminal

Terminal is a text based user interface. Enter "date" to display the current date.

Import #


import { Terminal } from 'primeng/terminal';

Basic #

Commands are processed using observables via the TerminalService. Import this service into your component and subscribe to commandHandler to process commands by sending replies with sendResponse function.

Enter "date" to display the current date, "greet {0}" for a message and "random" to get a random number.

Welcome to PrimeNG

primeng $


<p>Enter "<strong>date</strong>" to display the current date,
"<strong>greet &#123;0&#125;</strong>" for a message and "<strong>random</strong>"
to get a random number.</p>
<p-terminal welcomeMessage="Welcome to PrimeNG" prompt="primeng $" />

Accessibility #

Screen Reader

Terminal component has an input element that can be described with aria-label or aria-labelledby props. The element that lists the previous commands has aria-live so that changes are received by the screen reader.

Keyboard Support

Key	Function
tab	Moves focus through the input element.
enter	Executes the command when focus in on the input element.

name	type	default	description
welcomeMessage	string	null	Initial text to display on terminal.
prompt	string	null	Prompt text for each command.
style	Object	null	Inline style of the component.
styleClass	string	null	Style class of the component.

name	type	description
sendCommand	Function	Emits command value.
sendResponse	Function	Emits response value.

class	description
p-terminal	Class name of the root element
p-terminal-welcome-message	Class name of the welcome message element
p-terminal-command-list	Class name of the command list element
p-terminal-command	Class name of the command element
p-terminal-command-value	Class name of the command value element
p-terminal-command-response	Class name of the command response element
p-terminal-prompt	Class name of the prompt element
p-terminal-prompt-label	Class name of the prompt label element
p-terminal-prompt-value	Class name of the prompt value element

token	variable	description
root.background	--p-terminal-background	Background of root
root.borderColor	--p-terminal-border-color	Border color of root
root.color	--p-terminal-color	Color of root
root.height	--p-terminal-height	Height of root
root.padding	--p-terminal-padding	Padding of root
root.borderRadius	--p-terminal-border-radius	Border radius of root
prompt.gap	--p-terminal-prompt-gap	Gap of prompt
commandResponse.margin	--p-terminal-command-response-margin	Margin of command response

Terminal

Import #

Basic #

Accessibility #

Screen Reader

Keyboard Support

Terminal API

Terminal #

Properties #

Interfaces #

TerminalService #

Terminal Theming

CSS Classes #

Terminal Design Tokens #