How to load file on scroll using javascript on element<ngx-monaco-diff-editor>?

Question

I have been trying this for more than a week but have not been able to achieve it in angular. Can someone please take a look into it?

onContainerScroll() never gets called, I was wondering how to do it using javascript, on scroll this element and on reaching bottom call API with next range?

<ngx-monaco-diff-editor id="diffeditor" [options]="diffOptions" [originalModel]="originalModel" #elm
[modifiedModel]="modifiedModel" (scroll)="onContainerScroll($event)">
</ngx-monaco-diff-editor>

@ViewChild('elm', { read: ElementRef }) elm: ElementRef;
ngAfterViewInit() {
console.log(this.elm.nativeElement)  //return the ngx element
}

Answer 1

You want to get the reference to the DiffEditorComponent and then

<ngx-monaco-diff-editor
  id="diffeditor"
  [options]="diffOptions"
  [originalModel]="originalModel"
  [modifiedModel]="modifiedModel">
</ngx-monaco-diff-editor>

@ViewChild(DiffEditorComponent) diffEditor: DiffEditorComponent;
ngAfterViewInit() {
  console.log(diffEditor._editorContainer); // HTMLElement that might be scrolled
}

You will have to dig deeper, but this is a reasonable start to go forth.