Integrate xterm.js to Angular

Question

I'm new to Angular. I'm trying to use xterm.js (https://xtermjs.org/) but it display badly. Here is the render : Render

I created a xterm component. The xterm.component.ts file code is :

import { Component, OnInit } from '@angular/core';
import { Terminal } from "xterm";

@Component({
  selector: 'app-xterm',
  templateUrl: './xterm.component.html',
  styleUrls: ['./xterm.component.css'],
})
export class XtermComponent implements OnInit {
  public term: Terminal;
  container: HTMLElement;

  constructor() { }

  ngOnInit() {
    this.term = new Terminal();
    this.container = document.getElementById('terminal');
    this.term.open(this.container);
    this.term.writeln('Welcome to xterm.js');
  }
}

My xterm.component.html only contains this :

<div id="terminal"></div>

I don't really know what to do more ... Thanks in advance guys

score 6 · Answer 1 · answered Dec 29 '18 at 19:18

6

You must set the component encapsulation

@Component({
  encapsulation: ViewEncapsulation.None,
  ...
})

answered Dec 29 '18 at 19:18

Victor96

9,102
1
13
13

score 4 · Answer 2 · answered Mar 06 '19 at 09:35

4

Encountered the same problem and found this page. Maybe this is too late for the OP, but could be useful for others.

The styles are wrong because 1) the xterm.css is not loaded, and 2) the encapsulation.

My solution to 1) was to add @import 'xterm/dist/xterm.css'; in the scss file for this component.

And 2) can be solved by setting encapsulation: ViewEncapsulation.None as Victor96's answer, or better setting encapsulation: ViewEncapsulation.ShadowDom.

Hope this helps.

answered Mar 06 '19 at 09:35

Hongzhi WANG

921
8
12

`@import 'xterm/dist/xterm.css';` works great. I tested with `ViewEncapsulation.ShadowDom` but it didn't work. But `ViewEncapsulation.None` works ok with that import. Tested with Angular 7 (Firefox and Chrome). – gorlok Mar 11 '19 at 14:47

score 3 · Accepted Answer · answered Nov 16 '18 at 12:37

3

Try to use in template reference variable by using the hash symbol

<div #myTerminal></div>

and in component

@ViewChild('myTerminal') terminalDiv: ElementRef;

In ngOnInit

ngOnInit() {
    this.term = new Terminal();
    this.term.open(this.terminalDiv.nativeElement);
    this.term.writeln('Welcome to xterm.js');
  }

answered Nov 16 '18 at 12:37

Yury Polubinsky

375
1
10

Thanks for your reply. Same display with this code... I don't really get it, i think it's a CSS problem. My goal is to use xtermjs to execute git command in a terminal, but idk how to do so. – Clément Drouin Nov 16 '18 at 16:52
This is a better way of initialization, but it doesn't solve the problem. You will need to use _encapsulation: ViewEncapsulation.None_ anyways, like @Victor96 says. – gorlok Mar 11 '19 at 14:44

score 3 · Answer 4 · answered Dec 17 '20 at 15:48

3

I know this is old, but I had to put terminal initialation in ngAfterViewInit. Otherwise the DOM elements are undefined.

answered Dec 17 '20 at 15:48

WannabeCoder

71
1
3

Integrate xterm.js to Angular

4 Answers4