I would like to display a complex html “string” in codemirror with line breaks at the respective tags. However, the formatting of the code does not work when it is initially created (HTML is displayed as a long string without line breaks). The text is an BehaviorSubject

codemirrorOptions are following:

codemirrorOptions = { theme: 'material-darker', lineNumbers: true, lineWrapping: 'true', fullScreen: true, mode: 'htmlmixed', autoCloseBrackets: true, matchBrackets: true, gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'], foldGutter: true, };

Text is implemented like:

@Input() text: BehaviorSubject<string>;

Codemirror in html:
<ngx-codemirror (ngModelChange)="text.next($event)" [ngModel]="(text | async)" [options]="codemirrorOptions" ></ngx-codemirror>

Text example: <h3><strong>Vorteile/Nutzen</strong></h3><ul><li>4-fach Spreizung garantiert höchste Haltewerte.</li></ul>