I created a component in Angular to show the parsed json content of two selected files, I rertive the differences from both files using a library called deepDiff, and while using it I created a method called, highlightPath to ensure I print a text where the difference is found, so far so good, just that the text should have a yellow background and there is just no way to show it as the information above aappears.

Here the component json-viewer:

  @Input() jsonObject: any;
  @Input() highlightedContent: string | any;
  
  
  constructor(private sanitizer: DomSanitizer) {}

  get sanitizedContent(): SafeHtml {
    return this.sanitizer.bypassSecurityTrustHtml(this.highlightedContent);
  }

html jsnon-viewe:

<pre [innerHTML]="sanitizedContent"></pre>

here the father component zip.component:

highlightPath(obj: any, path: string) {
  const keys = path.split('.');
  let current = obj;
  for (let i = 0; i < keys.length - 1; i++) {
    current = current[keys[i]];
  }
  current[keys[keys.length - 1]] = `<span class="highlight">Difference Found!</span> ${current[keys[keys.length - 1]]}`;
}

compareFiles() {
  if (this.file1Content && this.file2Content) {
    const differences = deepDiff.diff(this.file1Content, this.file2Content);
    if (differences) {
      const [file1Highlighted, file2Highlighted] = this.getHighlightedTexts(differences);
      this.highlightedFile1Content = file1Highlighted;
      this.highlightedFile2Content = file2Highlighted;
      this.sanitizeAndConvertHighlightedContent();
    }
  }
}


 sanitizeAndConvertHighlightedContent() {
    this.sanitizedHighlightedFile1Content = this.sanitizeHtml(this.highlightedFile1Content);
    this.sanitizedHighlightedFile2Content = this.sanitizeHtml(this.highlightedFile2Content);
  }

  sanitizeHtml(html: string): SafeHtml {
    return this.sanitizer.bypassSecurityTrustHtml(html);
  }

zip.component. html:

  <div class="comparison-container" *ngIf="file1Content && file2Content">
    <app-json-viewer [jsonObject]="file1Content" [highlightedContent]="sanitizedHighlightedFile1Content"></app-json-viewer>
    <app-json-viewer [jsonObject]="file2Content" [highlightedContent]="sanitizedHighlightedFile2Content"></app-json-viewer>
  </div>

I tried the methods above.