Angular ReportViewer Renders Reports Only in the First Tab
Environment
Report Viewer | Angular |
Description
How can I display the Angular ReportViewer reports in multiple tabs and not only in the first tab?
Solution
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
[containerStyle]="viewerContainerStyle"
[serviceUrl]="reportServerUrl"
[viewMode]="'INTERACTIVE'"
[scaleMode]="'SPECIFIC'"
[scale]="1.0">
</tr-viewer>
</ng-template>
</mat-tab>
</mat-tab-group>
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.
To download the demo application, go to the GitHub repository:
- Open the MyRestService project and run the Upgrade Wizard.
- Rebuild the project to recover the required references and packages.
- Start the application.
- Open the Angular project and run
npm install
. Then, executeng serve
.