report-viewer.ts

import { Component, Inject, ViewEncapsulation, ViewChild } from '@angular/core';
import { DxReportViewerComponent, DxReportViewerModule } from 'devexpress-reporting-angular';
import { PreviewElements } from "devexpress-reporting/dx-webdocumentviewer"

@Component({
  selector: 'report-viewer',
  encapsulation: ViewEncapsulation.None,
  templateUrl: './report-viewer.html',
  styleUrls: [
    "../../../node_modules/devextreme/dist/css/dx.material.blue.light.css",
    "../../../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css",
    "../../../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.material.blue.light.css",
    "../../../node_modules/devexpress-reporting/dist/css/dx-webdocumentviewer.css"
  ],
  imports: [DxReportViewerModule]
})
export class ReportViewer {
  @ViewChild(DxReportViewerComponent, { static: false })
  protected viewer!: DxReportViewerComponent;
  protected reportUrl: string = "TestReport";
  protected readonly invokeAction: string = '/DXXRDV';

  // Pass a parameter value by using a reportUrl on startup
    ngOnInit() {
        const parameterValue = "Hello World";
        this.reportUrl = "TestReport?parameter3=" + parameterValue;
    }

    // Pass a parameter value each time the report is submitted
    // Note: The value entered on the Parameters panel will be ignored
    ParametersSubmitted(event: any) {
        const parameterValue = 12345;
        event.args.Parameters.filter(function (p: any) { return p.Key == "parameter4"; })[0].Value = parameterValue;
    }

    // Pass a parameter value with a reportUrl
    setParameter1() {
        const parameterValue = 40;
        this.viewer.bindingSender.OpenReport(this.reportUrl + "&parameter1=" + parameterValue);
    }

    // Pass a parameter value with the parameters model
    // Note: This approach can be used only for parameters that have the Visible property enabled
    setParameter2() {
        const parameterValue = true;
        (this.viewer.bindingSender.GetParametersModel() as any)["parameter2"] = parameterValue;
        this.viewer.bindingSender.StartBuild();
    }

    // (Optional) Hide the Parameters panel
    CustomizeElements(event: any) {
        const rightPanel = event.args.GetById(PreviewElements.RightPanel);
        const index = event.args.Elements.indexOf(rightPanel);
        event.args.Elements.splice(index, 1);
    }

  constructor(@Inject('BASE_URL') protected readonly hostUrl: string) { }
}