JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 14717
  • Score
    100M100P100Q128313F
  • License Apache-2.0

This form is used to design Angular Reactive Form using any given XML. The primary use of this Readonly UI library is to design ISO 20022 XML messages in forms dynamically.

Package Exports

  • ngx-xml-message
  • ngx-xml-message/package.json

Readme

Display XML & ISO 20022 messages using Angular v19

npm NPM npm


NgxXmlMessage

This form is used to design Angular Readonly Form using any given XML/ISO 20022 messages. The primary use of this UI library is to design ISO 20022 or MX readonly forms dynamically.

Features

  • 🔥 Automatic forms generation
  • ⚡️ Supports ISO 20022 messages:
    • Support translation labels.
  • 💪 Built on top of Angular Reactive Forms

Live Demo

How to consume

Add angular material v19

ng add @angular/material

Install npm package ngx-xml-message.

    npm i ngx-xml-message

Import Module & SCSS

import { NgxXmlMessageModule } from 'ngx-xml-message';

@NgModule({
    ...
  imports:[NgxXmlMessageModule],
    ...
})

Add style file to angular.json file

{
    styles:[
     "node_modules/ngx-xml-message/lib/styles/index.scss"
    ]
}

View

<ngx-xml-message [xmlMessage]="xmlMessage" [config]="config"></ngx-xml-message>

Component

export class AppComponent implements OnInit {
    message: string;
    config: XmlMessageConfig = {
        showCopy: true,
        showNamespace:true
    }
     const xmlPath = `./assets/xml/${params['xml']}.xml`;
        this.httpClient.get(xmlPath,{ responseType: 'text' }).subscribe((data) => {
          this.message = data as string;
     });
}

Translation Support

It support name and id properties of the SchemaElement

{
    "Hdr": "Header",
    "MsgId": "Message Id"
}

Interface

export interface XmlMessageConfig{
    showNamespace?: boolean;
    showCopy?: boolean;
}