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();
        }
    }
}