frontend-tutorial-framework/src/app/terminado.service.ts

import { Injectable } from '@angular/core';
import { Terminal } from 'xterm';
import * as fit from 'xterm/lib/addons/fit/fit';
import * as terminado from 'xterm/lib/addons/terminado/terminado';

@Injectable()
export class TerminadoService {
  xterm: Terminal;
  ws: WebSocket;

  constructor() {
    Terminal.applyAddon(fit);
    Terminal.applyAddon(terminado);
    this.xterm = new Terminal();
    const wsproto = (location.protocol === 'https:') ? 'wss://' : 'ws://';
    this.ws = new WebSocket(wsproto + window.location.host + '/terminal');
  }

  attach(element: HTMLElement) {
    this.ws.onopen = () => {
      (<any>this.xterm).terminadoAttach(this.ws);
      this.xterm.open(element);
      this.fit();
      this.xterm.blur();
    };
  }

  detach() {
    (<any>this.xterm).terminadoDetach(this.ws);
    this.xterm.destroy();
    this.ws.close();
  }

  fit() {
    (<any>this.xterm).fit();
  }
}