Displaying Well-Formatted XML in Angular2 Using Typescript

Question

Displaying Well-Formatted XML in Angular2 Using Typescript

After receiving this XML string from the server:

<find-item-command xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" find-method="Criteria" item-class="com" only-id="false" xsi:schemaLocation=""> <criteria> <criterion> <descriptors> <descriptor>DPSystemEventItem</descriptor> </descriptors> <value>cluster.manager.active</value> </criterion> </criteria> </find-item-command>

I want to format it nicely in my module like this:

<find-item-command
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" find-method="Criteria" item-class="com" only-id="false" xsi:schemaLocation="">
    <criteria>
        <criterion>
            <descriptors>
                <descriptor>DPSystemEventItem</descriptor>
            </descriptors>
            <value>cluster.manager.active</value>
        </criterion>
    </criteria>
</find-item-command>

What is the most efficient way to pretty print it?

javascript xml angular typescript pretty-print

Answer 1

Answer №1

If you want to beautify your XML output, consider creating a custom pipe using the vkbeautify library.

npm install -S vkbeautify

Here's an example of a custom xml pipe:

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);
    }
}

To use this custom pipe in your Angular application, declare it in your app.module like this:

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

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

You can then apply the custom pipe in your templates as shown below:

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

Answer 2

If you want to beautify your XML output, consider creating a custom pipe using the vkbeautify library.

npm install -S vkbeautify

Here's an example of a custom xml pipe:

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);
    }
}

To use this custom pipe in your Angular application, declare it in your app.module like this:

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

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

You can then apply the custom pipe in your templates as shown below:

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

Answer 3

Answer №2

After following the advice of @Saeb Amini, I encountered the error message "Could not find a declaration file for module". To resolve this issue, I executed the following command:

npm install -D @types/vkbeautify

Subsequently, the problem was fixed and everything ran smoothly.

Answer 4

After following the advice of @Saeb Amini, I encountered the error message "Could not find a declaration file for module". To resolve this issue, I executed the following command:

npm install -D @types/vkbeautify

Subsequently, the problem was fixed and everything ran smoothly.

Displaying Well-Formatted XML in Angular2 Using Typescript

Answer №1

Answer №2

Similar questions

Issue with datepicker functionality not operational for newly added entries in the table

Does Angular have an OnActivate function in its methods?

Adjust the height of a div based on the font size and number of lines

Can you choose to declare a type in TypeScript, or is it required for every variable

Deactivate JQuery star rating plugin after user has voted

Add some texture to one side of the quadrilateral

Tips for resizing mesh along the global axis

What is the best way to extract all ID, Name values, and locations from my JSON object and store them in an

The issue with the error handler middleware is that it is failing to effectively manage and resolve

Activating the microphone device on the MediaStream results in an echo of one's own voice

Using jQuery and Perl to create a dynamic progress bar that is based on the current state of a "pipeline file" and utilizes AJAX

an all-encompassing loading animation designed specifically for updates to location.href

What is the best way to compare two fields in react?

Vanilla JS causing event to fire repeatedly

Exploring the use of the "++" operator in Regular

Monitoring the flow of data between Angular JS resources and the promise responses

Encountered an issue following deployment to Heroku (Application error)

Mapbox is capable of managing several GEOJSON files by utilizing the loadURL function

Is it possible to achieve this using an alternate method such as CSS?

The JSON array retrieved from the $http.GET request is coming back as undefined, which is not expected