Terminal is a text based user interface. Enter "date" to display the current date.
import { TerminalModule } from 'primeng/terminal';
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.
<p>Enter "<strong>date</strong>" to display the current date, "<strong>greet {0}</strong>" for a message and "<strong>random</strong>" to get a random number.</p>
<p-terminal welcomeMessage="Welcome to PrimeNG" prompt="primeng $"></p-terminal>
Following is the list of structural style classes, for theming classes visit theming page.
| Name | Element |
|---|---|
| p-terminal | Container element. |
| p-terminal-content | Content of terminal. |
| p-terminal-prompt | Prompt text. |
| p-terminal-response | Command response. |
| p-terminal-input | Input element to enter commands. |
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.
| Key | Function |
|---|---|
| tab | Moves focus through the input element. |
| enter | Executes the command when focus in on the input element. |
API defines helper props, events and others for the PrimeNG Terminal module.
| Name | Type | Default | Description |
|---|---|---|---|
| welcomeMessage | string | null | Initial text to display on terminal. |
| prompt | string | null | Prompt text for each command. |
| style | string | null | Inline style of the component. |
| styleClass | string | null | Style class of the component. |