Angular PrimeNG Terminal Component

Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will know how to use the Terminal component in Angular PrimeNG. We will also learn about the properties, styling along with their syntaxes that will be used in the code. 

Terminal component: It is used to make a text-based user interface.

Properties:

• welcomeMessage: It is the initial text to display on the terminal. It is of string data type, the default value is null.
• prompt: It is the prompt text for each command. It is of string data type, the default value is null.
• style: It is an inline style of the component, It is of string data type, the default value is null.
• styleClass: It specifies the style class of the component, It is of string data type, the default value is null.

Styling:

• p-terminal: It is a container element.
• p-terminal-content: It is the content of the terminal.
• p-terminal-prompt: It is a prompt text.
• p-terminal-response: It is a command response.
• p-terminal-input: It is the Input element to enter commands.

Creating Angular application & module installation:

Step 1: Create an Angular application using the following command.

ng new appname

Step 2: After creating your project folder i.e. appname, move to it using the following command.

cd appname

Step 3: Install PrimeNG in your given directory.

npm install primeng --save
npm install primeicons --save

Project Structure: After complete installation, it will look like the following:

Example: This is the basic example that shows how to use the Terminal component.

app.component.html

<p-terminal welcomeMessage="Welcome to Custom Command prompt"
            prompt="Enter Command =>"></p-terminal>

app.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  providers: [TerminalService]
})
export class AppComponent {
  subscription: Subscription;

  constructor(private terminalService: TerminalService) {
    this.terminalService.commandHandler.subscribe(command => {
      let response =
        command === 'cd abc'
          ? 'changed Current Directory to abc'
          : 'Please Enter a Valid Command: ';
      this.terminalService.sendResponse(response);
    });
  }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';
import { TerminalModule } from 'primeng/terminal';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    TerminalModule,
    FormsModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

Output:

Reference: https://primefaces.org/primeng/showcase/#/terminal