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

Import


import {TerminalModule} from 'primeng/primeng';

Getting Started

Terminal is defined using p-terminal element with a command handler and a response property. The entered command is passed to the handler by the event parameter and the response is sent back using a binding to the response property.


export class TerminalDemo {
    
    response: string;

    onCommand(event) {
        //event.command = entered command
        //in a real application connect to remote service to process the command and update the response field in return
        this.response = 'Unknown command: ' +event.command;
    }
}


<p-terminal (handler)="onCommand($event)" [(response)]="response" welcomeMessage="Welcome to PrimeNG" prompt="primeng $"></p-terminal>

Attributes

Name Type Default Description
welcomeMessage string null Initial text to display on terminal.
prompt string null Prompt text for each command.
response string null Response to give for a command.
style string null Inline style of the component.
styleClass string null Style class of the component.

Events

Name Parameters Description
handler event.originalEvent: browser event
event.command: command to process
Callback to invoke when user enters a command

Styling

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

Name Element
ui-terminal Container element.
ui-terminal-content Content of terminal.
ui-terminal-content-prompt Prompt text.
ui-terminal-input Input element to enter commands.

Dependencies

Native component that only requires the css of PrimeUI Terminal.


<p-terminal (handler)="onCommand($event)" [(response)]="response" welcomeMessage="Welcome to PrimeNG" prompt="primeng $"></p-terminal>


export class TerminalDemo {
    
    response: string;

    onCommand(event) {
        if(event.command === 'date')
            this.response = new Date().toDateString();
        else
            this.response = 'Unknown command: ' + event.command;
    }
}