How do I implement multiple cursors in quill through Angular 8?

I am trying to implement collaborative editing in Quill , for which I am using Angular as frontend and Node at the backend. I have already setup the sharedb with mongo adapters and also ngx-quill module in the frontend. However I am confused how to implement quill cursors module in Angular 8 ?

My socket service

import { Injectable } from '@angular/core';

@Injectable({
 providedIn: 'root'
})
export class SocketsService {
 connection: any;
 sharedb: any;
 socket:any;
 doc: any;

 constructor() {
   this.sharedb = require('sharedb/lib/client');
   this.sharedb.types.register(require('rich-text').type);
   // Open WebSocket connection to ShareDB server
   this.socket = new WebSocket('ws://localhost:8080/sharedb');
   this.connection = new this.sharedb.Connection(this.socket);
   this.doc = this.connection.get('examples', 'richtext');
 }
}

My Editor Component

import {ViewChild, Component, OnInit} from '@angular/core';
import { QuillEditorComponent } from 'ngx-quill';
import QuillCursors from 'quill-cursors';
import {SocketsService} from '../sockets.service';
import {HttpClient} from '@angular/common/http';
import Quill from 'quill';
import 'quill-mention';
import jsondecoder from 'jsonwebtoken/decode.js'
Quill.register('modules/cursors', QuillCursors);
const Tooltip = Quill.import('ui/tooltip'); 

@Component({
  selector: 'app-editor',
  templateUrl: './editor.component.html',
  styleUrls: ['./editor.component.css']
})

export class EditorComponent implements OnInit{
  @ViewChild(QuillEditorComponent, { static: true })
  editor: QuillEditorComponent;
  content = '';
  myTooltip:any;
  public modules: any;
  private socket: any;
  private http: HttpClient;
  ngOnInit(){
  }

  constructor()
  {
    this.socket = new SocketsService();

    this.modules = {
      cursors: {
        transformOnTextChange: true
      },
      mention: {
        allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
        onSelect: (item, insertItem) => {
          const editor = this.editor.quillEditor as Quill
          insertItem(item) // necessary because quill-mention triggers changes as 'api' instead of 'user'
          editor.insertText(editor.getLength() - 1, '', 'user')
        },
        source: (searchTerm, renderList) => {
          const values = [
            { id: 1, value: 'Alec'},
            { id: 2, value: 'Irshad'},
            { id: 3, value: 'Anmol'},
            { id: 4, value: 'MunMun'},
            { id: 5, value:'Zoya'}
          ]
          if (searchTerm.length === 0) {
            renderList(values, searchTerm)
          } else {
            const matches = []
            values.forEach((entry) => {
              if (entry.value.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1) {
                matches.push(entry)
              }
            })
            renderList(matches, searchTerm)
          }
        }
      }
    }
  }

  editorCreated($event){
    this.socket.doc.subscribe((err)=>{ // Get initial value of document and subscribe to changes
      if(err) throw err;
       $event.setContents(this.socket.doc.data);
      this.socket.doc.on('op', (op, source)=>{
        if (source === 'quill') return;
        $event.updateContents(op);
      });
    });
  }

  logChanged($event)
  { 
    if ($event.source !== 'user') return;
    this.socket.doc.submitOp($event.delta, {source: 'quill'});
  }
}

My Node backend code

var ShareDB = require('@teamwork/sharedb');
var richText = require('rich-text');
ShareDB.types.register(richText.type);
const mongodb = require('mongodb');
const db = require('@teamwork/sharedb-mongo')({mongo: function(callback) {
  mongodb.connect('mongodb://localhost:27017/test',{useUnifiedTopology: true},callback);
}});
const shareDBServer= new ShareDB({db, disableDocAction: true, disableSpaceDelimitedActions: true});
var connection = shareDBServer.connect();
var doc = connection.get('examples', 'richtext');
doc.fetch(function(err) {
  if (err) throw err;
  if (doc.type === null) {
    doc.create([{insert: 'Document Ready'}], 'rich-text', callback);
    return;
  }
});
 var wss = new WebSocket.Server({
    noServer: true
  });

  wss.on('connection', function(ws, req) {
    ws.isAlive = true;

    var stream = new WebSocketJSONStream(ws);
    shareDBServer.listen(stream);

    ws.on('pong', function(data, flags) {
      ws.isAlive = true;
    });

    ws.on('error', function(error) {
        console.log('Error');
    });
 });

My question is after importing the quill-cursors module in my Editor component, how do I implement it ?

First you have to install quill to your angular project

npm install ngx-quill

for projects using Angular < v5.0.0 install npm install ngx-quill@1.6.0

in Your app.module.ts import QuillModule from ngx-quill:

import { QuillModule } from 'ngx-quill';

add QuillModule to the imports of your NgModule:

@NgModule({
  imports: [
    ...,

    QuillModule.forRoot()
  ],
  ...
})
class YourModule { ... }

use <quill-editor></quill-editor> in your templates to add a default quill editor

reference ngx-quill