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

Import


import {TerminalModule} from 'primeng/terminal';

Getting Started

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.


import {Component} from '@angular/core';
import {TerminalService} from 'primeng/components/terminal/terminalservice';

@Component({
    template: '<p-terminal welcomeMessage="Welcome to PrimeNG" prompt="primeng $"></p-terminal>',
    providers: [TerminalService]
})
export class TerminalDemo {
    
    constructor(private terminalService: TerminalService) {
        this.terminalService.commandHandler.subscribe(command => {
            let response = (command === 'date') ? new Date().toDateString() : 'Unknown command: ' + command;
            this.terminalService.sendResponse(response);
        });
    }
}

Properties

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.

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

None.

View on GitHub

<p-terminal welcomeMessage="Welcome to PrimeNG" prompt="primeng $"></p-terminal>


import {Component} from '@angular/core';
import {TerminalService} from 'primeng/components/terminal/terminalservice';
import {Subscription} from 'rxjs/Subscription';

@Component({
    templateUrl: './terminaldemo.html',
    providers: [TerminalService]
})
export class TerminalDemo {

    subscription: Subscription;
    
    constructor(private terminalService: TerminalService) {
        this.terminalService.commandHandler.subscribe(command => {
            let response = (command === 'date') ? new Date().toDateString() : 'Unknown command: ' + command;
            this.terminalService.sendResponse(response);
        });
    }
    
    ngOnDestroy() {
        if(this.subscription) {
            this.subscription.unsubscribe();
        }
    }
}