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

1. Install npm package ngx-xml-message.

    npm i ngx-xml-message

2. 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"
    ]
}

3. View

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

4. Component

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

3. Translation Support It support name and id properties of the SchemaElement

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

Release

version 1.0.2

With verions_1.0.2 user will able to see content copy button. User can use XmlMessageConfig to control the display of content copy button as well as namespace.

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