Update angular-report-viewer-in-multiple-tabs.md (#1363)

* Update angular-report-viewer-in-multiple-tabs.md

* Update angular-report-viewer-in-multiple-tabs.md

---------

Co-authored-by: Todor Arabadzhiev <todor.arabadzhiev@progress.com>

knowledge-base/angular-report-viewer-in-multiple-tabs.md

@@ -28,30 +28,105 @@ How can I display the Angular ReportViewer reports in multiple tabs and not only
 
 To solve the issue, use [lazy loading](https://material.angular.io/components/tabs/overview#lazy-loading) for the content of the tab:
 
-````JavaScript
+````HTML
-<mat-tab-group [(selectedIndex)]="selectedTab">
+<div class="container">
-	<mat-tab label="Tab Rpt Works">
+  <form>
-		<ng-template matTabContent>
+    <div class="form-group">
-			<button type="button" (click)="onLoad1Click($event)">Load</button>
+      <div class="input-group-prepend" style="display: flex; justify-content: center;">
-			<tr-viewer #reportViewer
+          <mat-tab-group [(selectedIndex)]="selectedTab" style="width: 75vw;">
-				[containerStyle]="viewerContainerStyle"
+              <mat-tab label="Tab 1">
-				[serviceUrl]="reportServerUrl"
+                <ng-template matTabContent>
-				[viewMode]="'INTERACTIVE'"
+                  <button mat-button type="button" (click)="onLoad1Click()">Load</button>
-				[scaleMode]="'SPECIFIC'"
+                  <tr-viewer #rptViewer1
-				[scale]="1.0">
+                    [containerStyle]="viewerContainerStyle"
-			</tr-viewer>
+                    [serviceUrl]="reportServerUrl"
-		</ng-template>
+                    [viewMode]="'INTERACTIVE'"
-	</mat-tab>
+                    [scaleMode]="'SPECIFIC'"
-</mat-tab-group>
+                    [scale]="1.0">
+                  </tr-viewer>
+                </ng-template>
+              </mat-tab>
+
+              <mat-tab label="Tab 2">
+                <ng-template matTabContent>
+                  <button mat-button type="button" (click)="onLoad2Click()">Load</button>
+                  <tr-viewer #rptViewer2
+                    [containerStyle]="viewerContainerStyle"
+                    [serviceUrl]="reportServerUrl"
+                    [viewMode]="'INTERACTIVE'"
+                    [scaleMode]="'SPECIFIC'"
+                    [scale]="1.0">
+                  </tr-viewer>
+                </ng-template>
+              </mat-tab>
+          </mat-tab-group>
+       </div>
+    </div>
+  </form>
+</div>
+````
+````TypeScript
+import { Component, ViewChild } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatButtonModule } from '@angular/material/button';
+import { TelerikReportViewerComponent, TelerikReportingModule } from '@progress/telerik-angular-report-viewer';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [RouterOutlet, MatTabsModule, MatButtonModule, TelerikReportingModule],
+  templateUrl: './app.component.html',
+  styleUrl: './app.component.css'
+})
+
+export class AppComponent {
+  //@ts-ignore
+  @ViewChild('rptViewer1', { static: false }) rptViewer1: TelerikReportViewerComponent;
+  //@ts-ignore
+  @ViewChild('rptViewer2', { static: false }) rptViewer2: TelerikReportViewerComponent;
+
+  title = 'my-app';
+  selectedTab: number = 0;
+  reportServerUrl: string;
+  viewerContainerStyle: any;
+
+  constructor() {
+    this.reportServerUrl = 'https://demos.telerik.com/reporting/api/reports';
+    this.viewerContainerStyle = {
+      "position": 'relative',
+      "width": '75vw',
+      "height": '90vh',
+      ['font-family']: 'ms sans serif'
+    };
+  }
+
+  onLoad1Click() {
+
+    var reportSource = {
+      report: "Report Catalog.trdx",
+    };
+
+    if (this.rptViewer1) {
+      this.rptViewer1.setReportSource(reportSource);
+    }
+  }
+
+  onLoad2Click() {
+
+    var reportSource = {
+      report: "Dashboard.trdx",
+    };
+
+    if (this.rptViewer2) {
+      this.rptViewer2.setReportSource(reportSource);
+    }
+  }
+}
 ````
 
 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](https://github.com/telerik/reporting-samples/tree/master/AngularReportViewerInMultipleTabs):
+To download the demo application, go to our [GitHub Reporting Samples repository](https://github.com/telerik/reporting-samples/tree/master/AngularReportViewerInMultipleTabs).
-
-1. Open the **MyRestService** project and run the [Upgrade Wizard]({%slug telerikreporting/designing-reports/report-designer-tools/desktop-designers/visual-studio-report-designer/upgrade-wizard%}).
-1. Rebuild the project to recover the required references and packages.
-1. Start the application.
-1. Open the Angular project and run `npm install`. Then, execute `ng serve`.