Skip to content

Api Guide

Jump to bottom
chang edited this page Sep 25, 2022 · 1 revision

NgTerminalComponent

NgTerminalComponent is an Angular Component that you can put inside an your component. There are two ways to use NgTerminalComponent. A first way is to access an instance of NgTerminalComponent and a second way is to bind properties of NgTerminalComponent.

Interface

NgTerminal is an interface that NgTerminalComponent is implementing. You can check out ng-terminal.ts to find out available methods.

APIs is available through a template variable that you can access after ngAfterViewInit() is called.

  import { NgTerminal } from 'ng-terminal';
  //...
  @ViewChild('term', { static: false }) child: NgTerminal;

  ngAfterViewInit() {
    this.underlying = this.child.underlying;
    this.underlying.loadAddon(new WebLinksAddon());
    this.child.setXtermOptions({
      fontFamily: '"Cascadia Code", Menlo, monospace',
      theme: this.baseTheme,
      cursorBlink: true
    });
    this.child.setMinWidth(200);
    this.child.setMinHeight(200);
    this.child.write('$ NgTerminal Live Example');
  }

Property binding

Input properties

There are some input properties provided such as xtermOptions, dataSource, rows, cols, minWidth, minHeight and draggable. Check out ng-terminal.component.ts if you want to see more details.

<ng-terminal #term [dataSource]="writeSubject"
[rows]="10" 
[cols]="20" 
[minWidth]="100"
[minHeight]="100"
[draggable]="true"></ng-terminal>

Output properties

There are some output properties provided such as keyInput and keyEvent. Check out ng-terminal.component.ts if you want to see more details.

<ng-terminal #term (keyInput)="onKeyInput($event)"
(keyEvent)="onKeyEvent($event)"></ng-terminal>

Control Sequence

Control sequences is a programing interface to control terminal emulators. There are defined 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);

For example, you can move a cursor down by passing \x1b[1E to write(). Try to type them in a demo app.

Xterm.js APIs

Most of your codes would be to call APIs of Xterm.js. You can get a Terminal instance of Xterm.js with a property called underlying. Check out Terminal class document in Xterm.js if you want to use more various APIs.

  @ViewChild('term', { static: false }) child: NgTerminal;
  ngAfterViewInit() {
    this.underlying = this.child.underlying;
  }

Xterm.js addons

ng-terminal uses only one addon which is fit to support the resize feature. If you want to use other addons, you can apply them to a underlying object. If you want to use them, you can apply them without any problem.

Clone this wiki locally