I've tried various approaches and even referred to This Possible Dup
Currently utilizing the ng2-codemirror 1.1.3 library with codemirror 5.33.0 interface
Simply attempting to add a DebounceTime operator to the change event of the CodeMirror Editor
Here is the HTML snippet:
<codemirror #cm [(ngModel)]="code" [config]="config" (focus)="onFocus()" (blur)="onBlur()"></codemirror>
And here is the TypeScript code:
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/operator/debounceTime';
@ViewChild('cm') editor;
ngAfterViewInit() {
const watch = Observable.fromEvent(this.editor, 'change'); // <--- Error
watch.subscribe(v => console.log(v));
}
An error message displays stating:
ERROR TypeError: Invalid event target
Additionally attempted attaching the Observable.fromEvent to this.editor.value/ this.editor.input
UPDATE Complete Component: component.HTML:
<codemirror #cm [(ngModel)]="code" [config]="config" (focus)="onFocus()" (blur)="onBlur()"></codemirror>
component.TS:
import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { global } from '../shared/global.constants';
import 'codemirror/mode/javascript/javascript';
import 'codemirror/addon/scroll/simplescrollbars';
import 'codemirror/addon/hint/javascript-hint';
import 'codemirror/addon/hint/show-hint.js';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/operator/debounceTime';
@Component({
selector: 'app-main',
templateUrl: './main.component.html',
styleUrls: ['./main.component.scss']
})
export class MainComponent implements OnInit, AfterViewInit {
@ViewChild('cm') editor;
@ViewChild('output') output;
code = global.code;
config = {
lineNumbers: true,
mode: {name: 'javascript', json: true},
tabSize: 2,
scrollbarStyle: 'simple',
extraKeys: {'Tab': 'autocomplete', 'Ctrl-Space': 'autocomplete'}
};
constructor() {
}
ngOnInit() {
}
ngAfterViewInit() {
console.log(this.editor); // <--- CodemirrorComponent {change: EventEmitter, focus: EventEmitter, blur: EventEmitter, cursorActivity: EventEmitter, instance: CodeMirror$1, …}
console.log(this.editor.nativeElement); // <--- undefined
const watch = Observable.fromEvent(this.editor.host.nativeElement, 'input');
console.log(watch);
watch.subscribe(w => console.log(w)); // <-- invalid target
}
}