innerHTML tag not rendering the string starts with < character

Issue

<div class="actual-messagediv w-p-100" [innerHTML]="referencemsgobj"></div>

when I send some text messages starts with < character (string) it's not render either display, I'm using InnerHTML for binding data in angular 7

Solution

1. You might have to replace the less than symbol with it's equivalent HTML entity. For < symbol you could use <.

const value = '< some value';
const entity = value.replace('<', '&lt;');

2. In Angular, if you know the HTML is safe to be bound, it's also better to sanitize it using the DomSanitizer.

import { Component } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'my-app',
  template: `<div [innerHTML]="referencemsgobj"></div>`,
})
export class AppComponent {
  referencemsgobj: SafeHtml;

  constructor(private _sanitizer: DomSanitizer) {
    this.referencemsgobj = this._sanitizer.bypassSecurityTrustHtml(
      '<some value'.replace('<', '&lt;')
    );
  }
}

Working example: Stackblitz

Answered By - Michael D