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

Answer 1

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');
  }

Answer 2

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

Answer 3

You must set the component encapsulation

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

Answer 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.