New to Telerik Reporting? Download free 30-day trial

Angular ReportViewer Renders Reports Only in the First Tab


Report Viewer Angular


How can I display the Angular ReportViewer reports in multiple tabs and not only in the first tab?


To solve the issue, use lazy loading for the content of the tab:

<mat-tab-group [(selectedIndex)]="selectedTab">
    <mat-tab label="Tab Rpt Works">
        <ng-template matTabContent>
            <button type="button" (click)="onLoad1Click($event)">Load</button>
            <tr-viewer #reportViewer

By default, the tab content is eagerly loaded. Eagerly loaded tabs will initialize the child components but not inject them into the DOM until the tab is activated.

Demo Project

To download the demo application, go to our GitHub Reporting Samples repository:

  1. Open the MyRestService project and run the Upgrade Wizard.
  2. Rebuild the project to recover the required references and packages.
  3. Start the application.
  4. Open the Angular project and run npm install. Then, execute ng serve.
In this article