Angular Sample Code for Firepad and Codemirror

Question

I am using angular 6 and firebase for the project. The goal is to use firepad code editor as it has live collaboration, open source also I am using firebase backend which helps.

The example in the https://firepad.io/docs/#headless does not have specific info on how to import firepad and codemirror. If anyone had any experience integrating firepad, codemirror with angular 5 + please comment.

The example from the firepad codemirror editor https://github.com/FirebaseExtended/firepad/blob/master/examples/code.html

Also added stackblitz link https://stackblitz.com/edit/angular-qt6v3c

Converting into Angular

import * as Firepad from 'firepad';
import { CodeMirror } from 'codemirror';
import * as firebase from 'firebase/app';

@Component({
  selector: 'app-web-project-editor-editor',
  templateUrl: './web-project-editor-editor.component.html',
  styleUrls: ['./web-project-editor-editor.component.css']
})
export class WebProjectEditorEditorComponent implements OnInit {
  constructor() { }

  ngOnInit() {

    //// Get Firebase Database reference.
    const firepadRef = firebase.database().ref();

    //// Create CodeMirror (with line numbers and the JavaScript mode).
    const codeMirror = CodeMirror(document.getElementById('firepad- 
     container'), {
      lineNumbers: true,
      mode: 'javascript'
    });

    //// Create Firepad.
    const firepad = Firepad.fromCodeMirror(firepadRef, codeMirror, {
      defaultText: '// JavaScript Editing with Firepad!\nfunction go() 
    {\n  var message = "Hello, world.";\n  console.log(message);\n}'
    });

  }
}

Component web-project-editor-editor.component.html Code

Need help on how to import codemirror, firepad.