NgxXmlMessage

A lightweight Angular component that renders any XML / ISO 20022 (MX) message as a readonly, collapsible form — dynamically, with no schema required.

Features

• 🔥 Automatic, recursive form generation from raw XML
• 🪶 Zero UI dependencies — no Angular Material, no CDK, plain native HTML/CSS
• ⚡️ Standalone component (also ships an NgModule for backward compatibility)
• 📋 Optional per-field copy-to-clipboard and namespace display

Live Demo

How to consume

Install

npm i ngx-xml-message

The only peer dependencies are @angular/core and @angular/common (v21+).

Use the standalone component (recommended)

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

@Component({
  // ...
  imports: [NgxXmlMessageComponent],
})
export class AppComponent {}

Or import the module (e.g. from an existing NgModule):

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

@NgModule({
  imports: [NgxXmlMessageModule],
})
export class AppModule {}

The component is fully self-styled. Importing node_modules/ngx-xml-message/lib/styles/index.scss is optional and only provides global field-width helpers you can override.

View

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

Component

export class AppComponent implements OnInit {
  xmlMessage: string;
  config: XmlMessageConfig = {
    showCopy: true,
    showNamespace: true,
  };

  constructor(private httpClient: HttpClient) {}

  ngOnInit(): void {
    this.httpClient
      .get('./assets/xml/camt.053.xml', { responseType: 'text' })
      .subscribe((data) => (this.xmlMessage = data));
  }
}

Interface

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

Theming

The component now exposes CSS custom properties, so consumers can add theme support without changing library code.

Available CSS variables

• --ngx-xml-panel-border
• --ngx-xml-panel-bg
• --ngx-xml-panel-header-bg
• --ngx-xml-text-muted
• --ngx-xml-input-bg
• --ngx-xml-input-border
• --ngx-xml-accent
• --ngx-xml-accent-soft
• --ngx-xml-radius

Example: app-level override

/* styles.scss */
ngx-xml-message {
  --ngx-xml-panel-bg: #f8fafc;
  --ngx-xml-panel-header-bg: #e2e8f0;
  --ngx-xml-input-bg: #ffffff;
  --ngx-xml-accent: #0f766e;
  --ngx-xml-accent-soft: rgba(15, 118, 110, 0.14);
}

Example: dark theme class

body.theme-dark ngx-xml-message {
  --ngx-xml-panel-border: rgba(255, 255, 255, 0.2);
  --ngx-xml-panel-bg: #0f172a;
  --ngx-xml-panel-header-bg: #1e293b;
  --ngx-xml-text-muted: rgba(226, 232, 240, 0.78);
  --ngx-xml-input-bg: #111827;
  --ngx-xml-input-border: rgba(148, 163, 184, 0.45);
  --ngx-xml-accent: #38bdf8;
  --ngx-xml-accent-soft: rgba(56, 189, 248, 0.16);
}

Workspace development notes

If you are developing this library inside this monorepo (ngx-form), keep these settings aligned:

• Angular v21 workspace builds should use "moduleResolution": "bundler" in the root TypeScript config.
• App test styles in this workspace should reference the library source path: projects/ngx-xml-message/src/lib/index.scss instead of node_modules/ngx-xml-message/lib/styles/index.scss.
• Karma-based tests require these dev dependencies in the workspace: karma, karma-jasmine, karma-jasmine-html-reporter, karma-coverage, karma-chrome-launcher, jasmine-core, @types/jasmine.
• Local Karma runs also need a Chrome binary (or CHROME_BIN set).