-
Notifications
You must be signed in to change notification settings - Fork 27
Api Guide
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.
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');
}
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>
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 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.
- You can find official supported terminal sequences in Supported Terminal Sequences.
- An article and what-are-terminal-sequences are also helpful.
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;
}
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.