ngx-xml-message

'ngx-xml-message' is an Angular component designed to dynamically generate readonly forms using any XML or ISO 20022 messages. This versatile UI library is perfect for creating ISO 20022 or MX compliant forms without the need for manual coding, making it easy to present complex financial messages in a clear, user-friendly format. Ideal 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

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