How To Add Custom Terminal In Angular

Hello Friends, In this article We will learn how to add the custom terminal in an angular project using primeNG.

–In this terminal, we can configure our own commands which can run in the terminal, and without configured command is not working in the terminal.

–First of all, create a new angular app. Now open your terminal and execute the following command on it to install the angular app.

ng new custom-terminal

–Then install the following package in your app

npm install primeng --save

The CSS dependencies are as follows the structural CSS of components.

–Now we need to add the CSS files of primeNG into the application at angular.json.

In the angular.json file find the styles array and add the following:

"styles": [
     "node_modules/primeicons/primeicons.css",
     "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
     "node_modules/primeng/resources/primeng.min.css" 
]

Add the below code in App.Module.ts File

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {TerminalModule} from 'primeng/terminal';
import { TerminalService } from 'primeng/terminal';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    TerminalModule,
    AppRoutingModule,
    BrowserAnimationsModule
  ],
  providers: [ TerminalService ],
  bootstrap: [AppComponent]
})
export class AppModule { }

–Now add the below HTML code in the App.Component.html file to add toast notification.

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

–Add the below typescript code to the App.Component.ts file.

import { Component, OnInit } from '@angular/core';
import { TerminalService } from 'primeng/terminal';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class TerminalComponent implements OnInit {

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

Output:-