ActiveReports 15 .NET Edition
ActiveReports 15 User Guide / Concepts / ActiveReports Web Designer / Preview Reports
In This Topic
    Preview Reports
    In This Topic

    To preview reports, we need to set the openViewer property of designerOptions as shown

    app.component.ts
    Copy Code
    var viewer = null;
     
    export class AppComponent {​​​​​​​
      title = 'app';
      @ViewChild('viewer', {​​​​​​​ static: false }​​​​​​​) private viewerElement: ElementRef;
     
      constructor(private route: ActivatedRoute) {​​​​​​​
        this.route.params.subscribe(params => {​​​​​​​
          const id = params['id'];
          const designerOptions = GrapeCity.ActiveReports.WebDesigner.createDesignerOptions();  
          designerOptions.openViewer = this.openViewer.bind(this);     
          GrapeCity.ActiveReports.WebDesigner.renderApplication('designer-id', designerOptions);
        }​​​​​​​);
      }​​​​​​​
     
      public openViewer(options) {​​​​​​​
        if (viewer) {​​​​​​​
          viewer.openReport(options.reportInfo.id);
          return;
        }​​​​​​​
        viewer = GrapeCity.ActiveReports.JSViewer.create({​​​​​​​
          locale: options.locale,
          element: '#' + options.element,
          reportService: {​​​​​​​
            url: 'api/reporting',
          }​​​​​​​,
          reportID: options.reportInfo.id,
          settings: {​​​​​​​
            zoomType: 'FitPage'
          }​​​​​​​,
        }​​​​​​​);
      }​​​​​​​
     
      public closeViewer() {​​​​​​​
        this.viewerElement.nativeElement.firstElementChild.remove();
      }