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'
})
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:

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

Share

You may like these posts

• 
  CdkDropList With Ng-template On Dynamic Component List Do'snt Work
• 
  Loading Random Objects From A Huge (>200MB) Array File Without Loading The Entire Array
• 
  Anchor Href Vs Angular Routerlink
• 
  Angular 2 Array After Subscribe Has Elements But Length Is 0