Welcome to Telerik Reporting
Knowledge Base
API Reference
Embedding Reports / Displaying Reports / Web Application / Native Angular Report Viewer / API Reference / reportViewer / Options
New to Telerik Reporting? Start a free 30-day trial

Options of the Native Angular Report Viewer

authenticationToken

A bearer token to be added in the Authorization header of each request. Used for authentication with the reporting service.

Type

string

Example

HTML
<reporting-angular-viewer
 [authenticationToken]="authenticationToken">
</reporting-angular-viewer>
TypeScript
authenticationToken: string = "Bearer your-authentication-token";

contentTabIndex

Sets the tab index for the report viewer content.

Type

number

Default Value

1000

Example

HTML
<reporting-angular-viewer
 [contentTabIndex]="contentTabIndex">
</reporting-angular-viewer>
TypeScript
contentTabIndex: number = 1500;

documentMapVisible

Controls the visibility of the document map panel if a document map is available.

Type

boolean

Default Value

true

Example

HTML
<reporting-angular-viewer
 [documentMapVisible]="documentMapVisible">
</reporting-angular-viewer>
TypeScript
documentMapVisible: boolean = false;

enableSendEmail

Enables or disables the send email functionality.

Type

boolean

Default Value

false

Example

HTML
<reporting-angular-viewer
 [enableSendEmail]="enableSendEmail">
</reporting-angular-viewer>
TypeScript
enableSendEmail: boolean = true;

height

Sets the height of the report viewer container.

Type

string

Default Value

'700px'

Example

HTML
<reporting-angular-viewer #viewerId
 [height]="height">
</reporting-angular-viewer>
TypeScript
height: string = '600px';

keepClientAlive

Determines whether to keep the client session alive. When true, prevents the session from timing out during long periods of inactivity.

Type

boolean

Default Value

false

Example

HTML
<reporting-angular-viewer
 [keepClientAlive]="keepClientAlive">
</reporting-angular-viewer>
TypeScript
keepClientAlive: boolean = true;

pageMode

Sets the page display mode of the viewer.

Type

PageMode

Default Value

'continuousScroll'

Example

HTML
<reporting-angular-viewer
  [pageMode]="pageMode">
</reporting-angular-viewer>
TypeScript
pageMode: PageMode = 'singlePage';

parametersAreaVisible

Controls the visibility of the parameters area if the report has parameters.

Type

boolean

Default Value

true

Example

HTML
<reporting-angular-viewer
  [parametersAreaVisible]="parametersAreaVisible">
</reporting-angular-viewer>
TypeScript
parametersAreaVisible: boolean = false;

persistSession

Determines whether to persist the viewer session across browser sessions.

Type

boolean

Default Value

false

Example

HTML
<reporting-angular-viewer
  [persistSession]="persistSession">
</reporting-angular-viewer>
TypeScript
persistSession: boolean = true;

printMode

Sets the print mode for the report viewer.

Type

PrintMode

Default Value

'autoSelect'

Example

HTML
<reporting-angular-viewer
  [printMode]="printMode">
</reporting-angular-viewer>
TypeScript
printMode: PrintMode = 'forcePDFFile';

reportServer

Configuration for Telerik Report Server connection. The authentication method depends on the Report Server version:

  • Report Server for .NET: Supports Token authentication (ReportServerTokenSettings) or username/password authentication (ReportServerSettings). The token can be from any user, including the Guest user.
  • Report Server for .NET Framework 4.6.2: Supports username/password authentication (ReportServerSettings) or Guest account (url only with ReportServerSettings, if Guest is enabled on the server).

Required when serviceType is set to 'reportServer'. The ReportServerSettings or ReportServerTokenSettings types should be imported from '@progress/telerik-common-report-viewer'.

ReportServerTokenSettings properties:

  • url (string, required) - The URL to the Telerik Report Server instance.
  • getPersonalAccessToken (function, required) - A callback function that returns the Token for authentication against the Telerik Report Server for .NET instance wrapped in a Promise. This is the recommended authentication method for Report Server for .NET. The token can be from any user account, including the Guest user. Only supported by Report Server for .NET.

ReportServerSettings properties:

  • url (string, required) - The URL to the Telerik Report Server instance.
  • username (string, required) - A registered username in the Report Server that will be used to get access to the reports. Supported by both Report Server for .NET and Report Server for .NET Framework 4.6.2.
  • password (string, required) - The password for the provided username. Supported by both Report Server for .NET and Report Server for .NET Framework 4.6.2.

Type

any

Example

HTML
<!-- Report Server for .NET - Token authentication (recommended) -->
<reporting-angular-viewer
  [reportServer]="{
    url: 'https://my-report-server-net/',
    getPersonalAccessToken: getPersonalAccessToken
  }"
  [reportSource]="{
    report: 'Samples/Dashboard'
  }">
</reporting-angular-viewer>
TypeScript
// Report Server for .NET - Token authentication (recommended)
getPersonalAccessToken() {
  return Promise.resolve('<personal-access-token>');
}
HTML
<!-- Report Server for .NET - Token authentication with secure endpoint -->
<reporting-angular-viewer
  [reportServer]="{
    url: 'https://my-report-server-net/',
    getPersonalAccessToken: getPersonalAccessToken
  }"
  [reportSource]="{
    report: 'Samples/Dashboard'
  }">
</reporting-angular-viewer>
TypeScript
// Report Server for .NET - Token authentication with secure endpoint
getPersonalAccessToken() {
  return fetch('/rs-token')
    .then(response => response.text());
}
HTML
<!-- Report Server for .NET - Token authentication with Guest user token -->
<reporting-angular-viewer
  [reportServer]="{
    url: 'https://my-report-server-net/',
    getPersonalAccessToken: getPersonalAccessToken
  }"
  [reportSource]="{
    report: 'Samples/Dashboard'
  }">
</reporting-angular-viewer>
TypeScript
// Report Server for .NET - Token authentication with Guest user token
getPersonalAccessToken() {
  return Promise.resolve('<guest-user-token>');
}
TypeScript
// Report Server for .NET - Token authentication using ReportServerTokenSettings
import { ReportServerTokenSettings } from '@progress/telerik-common-report-viewer';

reportServer: ReportServerTokenSettings = new ReportServerTokenSettings(
  'https://my-report-server-net/',
  () => Promise.resolve('<personal-access-token>')
);
HTML
<!-- Report Server for .NET - Username/password authentication -->
<reporting-angular-viewer
  [reportServer]="{
    url: 'https://my-report-server-net/',
    username: 'myUser',
    password: 'myPassword'
  }"
  [reportSource]="{
    report: 'Samples/Dashboard'
  }">
</reporting-angular-viewer>
TypeScript
// Report Server for .NET - Username/password authentication using ReportServerSettings
import { ReportServerSettings } from '@progress/telerik-common-report-viewer';

reportServer: ReportServerSettings = new ReportServerSettings(
  'https://my-report-server-net/',
  'myUser',
  'myPassword'
);
HTML
<!-- Report Server for .NET Framework 4.6.2 - Username/password authentication -->
<reporting-angular-viewer
  [reportServer]="{
    url: 'https://my-report-server-framework/',
    username: 'myUser',
    password: 'myPassword'
  }"
  [reportSource]="{
    report: 'Samples/Dashboard'
  }">
</reporting-angular-viewer>
TypeScript
// Report Server for .NET Framework 4.6.2 - Username/password authentication using ReportServerSettings
import { ReportServerSettings } from '@progress/telerik-common-report-viewer';

reportServer: ReportServerSettings = new ReportServerSettings(
  'https://my-report-server-framework/',
  'myUser',
  'myPassword'
);
HTML
<!-- Report Server for .NET Framework 4.6.2 - Guest account (requires Guest enabled on server) -->
<reporting-angular-viewer
  [reportServer]="{
    url: 'https://my-report-server-framework/'
  }"
  [reportSource]="{
    report: 'Samples/Dashboard'
  }">
</reporting-angular-viewer>
TypeScript
// Complete example with Report Server for .NET using Token authentication
import { Component } from '@angular/core';
import { ReportServerTokenSettings, ReportSource } from '@progress/telerik-common-report-viewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  reportServer: ReportServerTokenSettings = {
    url: 'https://my-report-server-net/',
    getPersonalAccessToken: this.getPersonalAccessToken
  };

  reportSource: ReportSource = {
    report: 'Samples/Dashboard',
    parameters: {
      ReportYear: 2004
    }
  };

  getPersonalAccessToken() {
    return Promise.resolve('<personal-access-token>');
  }
}

reportSource

Specifies the report and initial report parameter values to be displayed. The report property can be a relative path to a physical file (TRDP/TRDX/TRBP) or an assembly qualified name for type definitions. The ReportSourceOptions type should be imported from '@progress/telerik-common-report-viewer'.

Type

any

Example

HTML
<reporting-angular-viewer
  [reportSource]="reportSource">
</reporting-angular-viewer>
TypeScript
reportSource: ReportSourceOptions = {
 report: 'Dashboard.trdx', // or '{Category}/{ReportName}' when connected to a Report Server
 parameters: { ReportYear: 2004 }
};

scale

Sets the scale factor for the report pages. The scale takes effect when the scaleMode is set to 'specific'.

Type

number

Default Value

1.0

Example

HTML
<reporting-angular-viewer
 [scale]="scale">
</reporting-angular-viewer>
TypeScript
scale: number = 1.5 // 150% scale

scaleMode

Sets how the report pages are scaled.

Type

ScaleMode

Default Value

'specific'

Example

HTML
<reporting-angular-viewer
 [scaleMode]="scaleMode">
</reporting-angular-viewer>
TypeScript
scaleMode: ScaleMode = 'fitPageWidth';

serviceType

Specifies the type of service that the report viewer will connect to.

Type

ServiceType

Default Value

'REST'

Example

HTML
<reporting-angular-viewer
 [serviceType]="serviceType">
</reporting-angular-viewer>
TypeScript
serviceType: ServiceType = 'reportServer';

serviceUrl

Sets the address of the Reporting REST Service. Required when serviceType is 'REST'.

Type

string

Example

HTML
<reporting-angular-viewer
 [serviceUrl]="serviceUrl">
</reporting-angular-viewer>
TypeScript
serviceUrl: string = 'https://demos.telerik.com/reporting/api/reports';

viewMode

Sets the view mode of the report viewer.

Type

ViewMode

Default Value

'interactive'

Example

HTML
<reporting-angular-viewer
 [viewMode]="viewMode">
</reporting-angular-viewer>
TypeScript
viewMode: ViewMode = 'printPreview';

width

Sets the width of the report viewer container.

Type

string

Default Value

'100%'

Example

HTML
<reporting-angular-viewer
 [width]="width">
</reporting-angular-viewer>
TypeScript
width: string = '800px';
In this article
authenticationTokencontentTabIndexdocumentMapVisibleenableSendEmailheightkeepClientAlivepageModeparametersAreaVisiblepersistSessionprintModereportServerreportSourcescalescaleModeserviceTypeserviceUrlviewModewidth
Not finding the help you need?
Contact Support