Report Viewer Component - Setting Parameter Values

import { Component, ViewChild } from "@angular/core";

import {
  ViewerComponent,
  AR_EXPORTS,
  PdfExportService,
  HtmlExportService,
  TabularDataExportService,
} from "@mescius/activereportsjs-angular";

import "@mescius/activereportsjs-i18n";

@Component({
  selector: "app-root",
  templateUrl: "src/app.component.html",
  styleUrls: ["src/app.component.css"],
  providers: [
    {
      provide: AR_EXPORTS,
      useClass: PdfExportService,
      multi: true,
    },
    {
      provide: AR_EXPORTS,
      useClass: HtmlExportService,
      multi: true,
    },
    {
      provide: AR_EXPORTS,
      useClass: TabularDataExportService,
      multi: true,
    },
  ],
})
export class AppComponent {
  @ViewChild(ViewerComponent, { static: false }) reportViewer: ViewerComponent;
  categories = [
    {
      categoryId: 1,
      categoryName: "Beverages",
      checked: true,
    },
    {
      categoryId: 2,
      categoryName: "Condiments",
      checked: false,
    },
    {
      categoryId: 3,
      categoryName: "Confections",
      checked: false,
    },
    {
      categoryId: 4,
      categoryName: "Dairy Products",
      checked: false,
    },
    {
      categoryId: 5,
      categoryName: "Grains/Cereals",
      checked: false,
    },
    {
      categoryId: 6,
      categoryName: "Meat/Poultry",
      checked: false,
    },
    {
      categoryId: 7,
      categoryName: "Produce",
      checked: false,
    },
    {
      categoryId: 8,
      categoryName: "Seafood",
      checked: false,
    },
  ];
  previewEnabled = true;

  onDocumentLoaded() {
    this.previewEnabled = true;
  }

  onReportLoaded() {
    this.previewEnabled = false;
  }
  onCategoriesChange(category: any, target: any) {
    category.checked = target.checked;
  }
  previewReport() {
    const categoryIds = this.categories
      .filter((c) => c.checked)
      .map((c) => c.categoryId);
    this.reportViewer.open("reports/multi-value-param.rdlx-json", {
      ReportParams: [
        {
          Name: "CategoryId",
          Value: categoryIds,
        },
      ],
    });
  }
}