Rendering XML in Angular 2+

Question

I've been reading other posts similar to this issue but im still unable to render my xml properly in my app.

I've used the following to get my xml ready:

  const parser = new DOMParser();
  const xml = parser.parseFromString(response, 'application/xml');
  this.questionSet = xml.documentElement;

  console.log(this.questionSet);

This is what is in the console:

How can i now render this in the HTML?

Im currently trying this:

<div class="application-xml" innerHtml="{{questionSet}}"></div>

But its just printing: [object Element]

Any help would be great, thanks

Answer 1

Angular security Blocks dynamic rendering of HTML and other scripts. You need to bypass them using DOM Sanitizer.

Read more here : Angular Security

DO below changes in your code :

// in your component.ts file

//import this 
import { DomSanitizer } from '@angular/platform-browser';


// in constructor create object 

constructor( 
...
private sanitizer: DomSanitizer

...
){

}

someMethod(){

  const parser = new DOMParser();
  const xml = parser.parseFromString(response, 'application/xml');
  this.questionSet = xml.documentElement;
  console.log(this.questionSet);
  
 this.htmlData = this.sanitizer.bypassSecurityTrustHtml( this.questionSet); // this line bypasses angular scurity
 
 

}

 

<!-- In Your html file-->

<div [innerHtml]="htmlData">
   
</div>

Here is the StackBlitz working Demo

Answer 2

Try to put innerHtml property between brackets: <div class="application-xml" [innerHtml]="questionSet"></div>.