import {TerminalModule} from 'primeng/primeng';
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>
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. |
Name | Parameters | Description |
---|---|---|
handler | event.originalEvent: browser event event.command: command to process |
Callback to invoke when user enters a command |
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. |
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;
}
}