@reportwright/angular

@reportwright/angular

<reportwright-viewer> and <reportwright-designer> custom elements for Angular. Custom elements need no Angular compiler step, so they work with any Angular version.

// main.ts
import { defineReportWrightElements } from '@reportwright/angular';
defineReportWrightElements();

// a standalone component
@Component({
  selector: 'app-report',
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <reportwright-viewer [options]="{ definition: def, data: { orders: orders }, fontsUrl: '/pw/fonts/' }"></reportwright-viewer>
    <reportwright-viewer [options]="{ server: 'https://reports.example.com', report: 'invoice', params: { id: id } }"></reportwright-viewer>
    <reportwright-designer [options]="{ server: server, definition: def }" (pw-save)="save($event.detail)"></reportwright-designer>`,
})
export class ReportComponent { /* … */ }

options are those of mountViewer / mountDesigner (see @reportwright/viewer); server, report, height and lang also work as attributes. Events: pw-ready (detail: the handle) and, on the designer without an onSave, pw-save (detail: the definition). MIT.

No server needed: pass definition, data (JSON by data source name) and fontsUrl (a copy of @reportwright/fonts/public/fonts). server (the self-hosted ReportWright server) is optional: see what works standalone.