Angular2 Typescript - Print Pretty Xml

I have this following XML string I got from the server:

Solution 1:

You can create a custom pipe for this that uses vkbeautify under the hoods.

npm install -S vkbeautify

Custom xml pipe example:

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

@Pipe({
    name: 'xml'
})
exportclassXmlPipeimplementsPipeTransform {
    transform(value: string): string {
        return vkbeautify.xml(value);
    }
}

Declare the custom pipe in your app.module, e.g.:

import { AppComponent } from'./app.component';
import { XmlPipe } from'...';

@NgModule({
    declarations: [
        AppComponent,
        ...,
        ...,
        XmlPipe
    ],
    ...

And then you can use the custom pipe in your templates like so:

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

Share