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();
  }