Angular2 typescript - print pretty XML

Question

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

Answer 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'
})
export class XmlPipe implements PipeTransform {
    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:

{{xmlString | xml}}