Integrate xterm.js to Angular

You must set the component encapsulation

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

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.

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