Home

NgTerminal is a component to create a terminal emulator in Angular. It completely leverages Xterm.js.

The objective is to provides only Angular developers with both easy installation and some convenient features during the development of an Angular app including an terminal functionality. Currently, it has some features such as NgTerminal Component, Draggable.

• Check out API guide if you are interested in APIs or Control Sequence.
• Check out Contributing if you are interested in contributing.

Demo Application

If you want to find out functionalities, it's really helpful to check out a runnig application and source codes.

Installation Instructions

1. npm install ng-terminal --save in your app project
2. Import NgTerminalModule in your AppModule as follows.

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

3. Put the component <ng-terminal> into your component where you want to open a terminal. The terminal do nothing before you write codes with properties and APIs.

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

4. You should implement AfterViewInit. And you can get an instance of NgTerminalComponent with @ViewChild after ngAfterViewInit() is called as follows.

import { AfterViewInit, Component, ViewChild } from '@angular/core';

import { FunctionsUsingCSI, NgTerminal } from "ng-terminal";

@Component({
  selector: 'app-terminal',
  templateUrl: './terminal.component.html',
  styleUrl: './terminal.component.scss'
})
export class TerminalComponent implements AfterViewInit {
  readonly prompt = '\n' + FunctionsUsingCSI.cursorColumn(1) + '$ ';

  @ViewChild('term', { static: false }) child!: NgTerminal;

  ngAfterViewInit() {
    this.child.onData().subscribe((input) => {
      if (input === '\r') { // Carriage Return (When Enter is pressed)
        this.child.write(this.prompt);
      } else if (input === '\u007f') { // Delete (When Backspace is pressed)
        if (this.child.underlying!.buffer.active.cursorX > 2) {
          this.child.write('\b \b');
        }
      } else if (input === '\u0003') { // End of Text (When Ctrl and C are pressed)
        this.child.write('^C');
        this.child.write(this.prompt);
      } else
        this.child.write(input);
    });
  }
}