Angular 2+ component for rendering SSRS reports
npm install ngx-ssrs-reportviewer-angular6Angular 2+ SQL Server Report Viewer (ngx-ssrs-reportviewer)
===================


This library was created to give users the ability to display SQL Server Reporting Services (SSRS) reports within Angular applications. The report viewer simplifies the process of sending commands to your report server through URL requests. For example, you can pass parameter values and modify the controls that the user has access to inside the report viewer through your own Angular components. You can read more about using URL access of the report server here.
npm install ngx-ssrs-reportviewer --save `
2. Add SSRSReportViewerModule into your AppModule class. An example app.module.ts would look like this:
`javascript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { SSRSReportViewerModule } from 'ngx-ssrs-reportviewer';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
SSRSReportViewerModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
`
3. Add the report viewer to your components html template. An example app.component.html with all the report viewer attributes would look like this:
`html
[reportserver]="reportServer"
[reporturl]="reportUrl"
[showparameters]="showParameters"
[parameters]="parameters"
[language]="language"
[width] ="width"
[height]="height"
[toolbar]="toolbar" >
`
NOTE: Many of these attributes are optional. I will cover which attributes are required below and what each one does.
4. Now inside your component you can initialize the report viewers attributes. Initialization of all the attributes inside app.component.ts would look like this:
`typescript
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
reportServer: string = 'http://myreportserver/reportserver';
reportUrl: string = 'MyReports/SampleReport';
showParameters: string = "true";
parameters: any = {
"SampleStringParameter": null,
"SampleBooleanParameter" : false,
"SampleDateTimeParameter" : "9/1/2017",
"SampleIntParameter" : 1,
"SampleFloatParameter" : "123.1234",
"SampleMultipleStringParameter": ["Parameter1", "Parameter2"]
};
language: string = "en-us";
width: number = 100;
height: number = 100;
toolbar: string = "true";
}
``