Search code examples
angularinnerhtml

display XML string on HTML page using innerHTML

I have a xml string and wants to print it on UI using innerHTML.

While printing it using innerHTML it is getting converted to some random string. I want to print the same string on UI with innnerHTML.

https://stackblitz.com/edit/angular-9-xml-to-json-wkokog?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts

How can I get same string using innerHTML"<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<SOAP-ENV:Envelope xmlns:SOAP-ENV=\"http://schemas.xmlsoap.org/soap/envelope/\" xmlns:ns1=\"http://webservice.abc.abc.abc.com/\"><SOAP-ENV:Body><ns1:transactRequest><transactRequestLineItemList><transactRequestLineItem><orderLineItemId>1</orderLineItemId><partNumber>xyz</partNumber><quantity>xyz</quantity><sourceInventoryLocation>xyz</sourceInventoryLocation><region>QTM-FLD-NAM</region><transactionOperation>RESERVE</transactionOperation></transactRequestLineItem></transactRequestLineItemList></ns1:transactRequest></SOAP-ENV:Body></SOAP-ENV:Envelope>"

Solution

  • You simply need to use [innerText] instead of [innerHtml] to display it as text and not parse it in the DOM. So just do that in your components HTML:

    <p [innerText]="xmlString"></p>