There is a [great example](https://stackoverflow.com/questions/56770919/monaco-deltadecorations-not-working-with-angular-7) of how to use the [ngx monaco editor](https://github.com/atularen/ngx-monaco-editor) with [deltaDecorations](https://microsoft.github.io/monaco-editor/playground.html#interacting-with-the-editor-rendering-glyphs-in-the-margin) (ranges):

**app.component.html**

```
<ngx-monaco-editor [options]="editorOptions" [(ngModel)]="code" (onInit)="onInit($event)"></ngx-monaco-editor>

```

**app.component.ts**

```
editorOptions = {
    theme: 'vs',
    language: 'javascript',
    glyphMargin: true
  };
code = [
    '"use strict";',
    'function Person(age) {',
    '   if (age) {',
    '       this.age = age;',
    '   }',
    '}',
    'Person.prototype.getAge = function () {',
    '   return this.age;',
    '};'
  ].join('\n');

onInit(editor: any) {
  const t = editor.deltaDecorations([], [
    {
      range: new monaco.Range(3, 1, 3, 1),
      options: {
        isWholeLine: true,
        className: 'myContentClass',
        glyphMarginClassName: 'myGlyphMarginClass'
      }
    }
  ]);
  console.log(t);
}

```

On ngOnInit everything works as expected. But when I change the ngModel, the highlighting of the code disappears:

```
onFileClicked() {
    this.code = "this is some other code'\n'
    that needs to be'\n'
    highlighted just like'\n'
    the first one."
}

```

When I change the ngModel once again now, the code of the old model gets highlighted for a very brief time, but disappears together with the old model as soon as the new one is initiated. The code of the new model should be highlighted as well, but is not. 

What am I missing here?