How To Display SSRS Report In Angular 2 Application

Question

I have been combing the internet for some clue as to how to display reports in angular 2. So far I haven't been able to find anything I could rely on. I will appreciate it very much if any one can help me out here.

Answer 1

worked for me; I have managed to show my ssrs reports in Angular 7 platform, 

Note: SQL Server and SSRS Server should be active.

the working code is as follows.

STEP1) app.module.ts
###################app.module.ts#################
    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule , CUSTOM_ELEMENTS_SCHEMA  } from '@angular/core';

    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    import { ReportViewerModule } from 'ngx-ssrs-reportviewer';


    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        AppRoutingModule,
        ReportViewerModule
      ],
      providers: [],
      bootstrap: [AppComponent],
      schemas: [CUSTOM_ELEMENTS_SCHEMA]
    })
    export class AppModule { }

###################app.module.ts#################


STEP 2) app.componet.ts
################# App.componet.ts #############

    import { Component } from '@angular/core';

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      title = 'Test2';
      reportServer: string = 'http://localhost/ReportServer';
      reportUrl: string = "ReportTest/rptTest";
      language: string = "en-us";
    //  parameters: any = {
    //    "p1": 1,
    //    "p2" : 2,
    //    };
      showparameters: string="true"
      width: number = 100;
      height: number = 100;
      toolbar: string = "true";
    }

    ################ App.componet.ts   ##################

// Note: 

1) Parameters: is optional; my sample report doesn't have parameter; however you can send single or multiple parameters to your report if needed.

2) ReportServer / ReportURL you have to get from SSRS Service.



STEP 3)
################## app.component.html ############
// add this following tag to your html file

    <div class="container">
      <ssrs-reportviewer
          [reportserver]="reportServer"
          [reporturl]="reportUrl"
          [language]="language" 
          [showparameters]="showparameters" 
          [parameters]="parameters"       
          [width] ="width" 
          [height]="height" 
          [toolbar]="toolbar" >
      </ssrs-reportviewer>
    </div>

################## app.component.html ############

Answer 2

This npm package should be able to help.

https://github.com/tycomo/ngx-ssrs-reportviewer

As per the sample, it is just like adding a custom component to the page

<div class="container">
        <ssrs-reportviewer
            [reportserver]="reportServer"
            [reporturl]="reportUrl"
            [showparameters]="showParameters" 
            [parameters]="parameters" 
            [language]="language" 
            [width] ="width" 
            [height]="height" 
            [toolbar]="toolbar" >
        </ssrs-reportviewer>
    </div>