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