Beautify Xml with Angular

Issue

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.

Solution

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.

Answered By - Sergio