Integrate xterm.js to Angular

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

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