Beautify Xml with Angular

Question

I'm trying to beautify a xml throught the package avaible in npm repositories (vkbeautify and xml-beautifier) to display into the html but is not working (I tried that in the same component and throught pipe component):

Built with xml-beautifier:

In .ts:

this.soapResponsePayload = beautify(response.responsePayload);

In .html:

{{soapResponsePayload}}

Built with vkbeautify:

The pipe component:

import { Pipe, PipeTransform } from '@angular/core';
import * as vkbeautify from 'vkbeautify';

@Pipe({
  name: 'xml'
})
export class XmlPipe implements PipeTransform {

  transform(value: string, ...args: any[]): string {
    return vkbeautify.xml(value);
  }

}

In .html:

{{soapResponsePayload | xml}}

But is not working throught any way.

Answer 1

The problem was the try to bind the typescript string into the view directly since the string was be formatted correctly but when you try to set any string from typescript into HTML the format will not saved.

The solution is the use of typecript string interpolation with the use of ``, to save the format and use the angular directive [innerHTML] to bind your xml value, you'll find another error since the HTML takes into account the "<" & ">" as HTML component thus you'll need parse your xml value to change these with the HTML hexadecimal code.

Answer 2

for vkbeautify to work you need to

1. wrap it in a pre tag

<pre>{{soapResponsePayload | xml}}</pre>

2. and also add the pipe in the declarations array in the corresponding module where you are using it

---

credits: Angular2 typescript - print pretty XML