Terminal

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

Import #


import { TerminalModule } 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 $" />

Style #

Following is the list of structural style classes, for theming classes visit theming page.

NameElement
p-terminalContainer element.
p-terminal-contentContent of terminal.
p-terminal-promptPrompt text.
p-terminal-responseCommand response.
p-terminal-inputInput element to enter commands.

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

KeyFunction
tabMoves focus through the input element.
enterExecutes the command when focus in on the input element.
PrimeNG 17.18.15 by PrimeTek