ngx-xml-message - Angular Component for XML & ISO 20022 Forms

'ngx-xml-message' is an Angular component designed to dynamically generate read-only forms using any XML or ISO 20022 message. This versatile UI library is ideal for creating ISO 20022- or MX-compliant forms without manual coding, making it easy to present complex financial messages in a clear, user-friendly format. Perfect for applications that require displaying structured data as part of ISO 20022 or MX workflows, ngx-xml-message ensures efficient and dynamic form rendering.

Features

Automatic forms generation from the given XML
Supports ISO 20022 messages

LIVE DEMO

How to consume

ng add @angular/material

npm i ngx-xml-message

Import Module & SCSS

                        
                            import { NgxIsoFormModule } from 'ngx-iso-form';
import { HttpClient, provideHttpClient } from '@angular/common/http';

@NgModule({
  ...  
  imports: [
    ...
    NgxXmlMessageModule
  ],
  provider:[provideHttpClient()]
  TranslateModule.forRoot({
      defaultLanguage: 'en',
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
    ...
})

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, '/i18n/', '.json');
}

Add style file to angular.json file

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

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

Add component to view

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

Translation Support

It support name and id properties of the SchemaElement Please declare all your translation rules under 'iso' object.

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

XmlMessageConfig Interface

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