NgTerminal

NgTerminal is a web terminal that leverages xterm.js on Angular 7+. You can easily add it into your application by adding <ng-terminal></ng-terminal> into your component.

NgTerminal provides some features including xtermjs. You can adjust dimensions of a terminal by dragging and to fix the number of rows and cols. New usuful features should be added continuously.

Install

npm install ng-terminal --save

Example

You can run an example in your local environment.

1. git clone https://github.com/qwefgh90/ng-terminal.git
2. npm install
3. npm run lib-build
4. npm run start

Getting started

NgTerminalModule should be imported within your app module.

import { NgTerminalModule } from 'ng-terminal';
//...
@NgModule({
    imports: [
        NgTerminalModule
    //...

Just add <ng-terminal> to your app.component.html. And when the application starts, you can see the web terminal to do nothing.

  <ng-terminal #term></ng-terminal>

Now you can print or do something on the terminal with NgTerminal object which has APIs for developers. You can get a object by using @ViewChild in your component. It is very important that an object of NgTerminalComponent is populated after ngAfterViewInit() is called.

//...
export class YourComponent implements AfterViewInit{
  @ViewChild('term', { static: true }) child: NgTerminal;
  
  ngAfterViewInit(){
    this.child.keyEventInput.subscribe(e => {
      console.log('keyboard event:' + e.domEvent.keyCode + ', ' + e.key);

      const ev = e.domEvent;
      const printable = !ev.altKey && !ev.ctrlKey && !ev.metaKey;

      if (ev.keyCode === 13) {
        this.child.write('\r\n$ ');
      } else if (ev.keyCode === 8) {
        // Do not delete the prompt
        if (this.child.underlying.buffer.cursorX > 2) {
          this.child.write('\b \b');
        }
      } else if (printable) {
        this.child.write(e.key);
      }
    })
  }

  //...

API

There are two ways to control the terminal. Calling API which is a interface of NgTerminal provides is a direct way to control the terminal. You can bind a instance by using @ViewChild. Another way is to use input/output properties.

NgTerminal (API)

NgTerminal is a interface to provide public APIs you can call directly. You can get a object by using @ViewChild with a type of NgTerminal.

  import { NgTerminal } from 'ng-terminal';
  ...
  @ViewChild('term') child: NgTerminal; // for Angular 7
  @ViewChild('term', { static: true }) child: NgTerminal; // for Angular 8

NgTerminalComponent (input/output properties)

NgTerminalComponent is a component to implement NgTerminal and draw the terminal.

<ng-terminal #term [dataSource]="writeSubject" (keyEvent)="onKeyEvent($event)" [displayOption]="displayOptionBounded"></ng-terminal>

Underlying object

You can control a instance of the xtermjs directly by getting a property of underlying. Check out API of the Terminal from the API document

Control sequences

Control sequences is a programing interface to control terminal emulators. There are functions to return control sequences in a class of FunctionUsingCSI.

    import { FunctionsUsingCSI } from 'ng-terminal';
    ...
    const sequences = "data..1" + FunctionsUsingCSI.cursorBackward(1) + '2';
    component.write(sequences);

You can also find a full set of sequences here. For example, you can break lines by passing \x1b[1E to write(). Try in the sample page

Contribution

NgTerminal is developed with Angular CLI. You can always write issue and contribute through PR to master branch.