Embedding Reports / Displaying Reports / Web Application / Native Angular Report Viewer / API Reference

New to Telerik Reporting? Download free 30-day trial

Events Overview

In this article, we will go over each of the currently available events, showcasing how to attach an event listener to each one as well as what information will be sent through the event.

Events List

updateUI

The updateUI event will be emitted when the state of the viewer changes.

<reporting-angular-viewer
    #viewer
    [reportSource]="{
        report: 'Dashboard.trdx', 
        parameters: { ReportYear: 2004 }
    }"
    [serviceUrl]="'https://demos.telerik.com/reporting/api/reports'"
    viewMode="interactive"
    [keepClientAlive]="true"
    (updateUI)="updateUI()">
</reporting-angular-viewer>

import { Component, ViewChild } from '@angular/core';
import { ReportingAngularViewerComponent } from '@progress/telerik-angular-native-report-viewer'

    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.scss']
    })

    export class AppComponent {
        title = 'Native Angular Report Viewer Demo';

        @ViewChild('viewer') public viewer!: ReportingAngularViewerComponent;

        updateUI() {
            console.log("This event handler will be called when the state of the viewer changes.");
        };
    }

printStarted

The printStarted event will be emitted when the printing starts.

<reporting-angular-viewer
    #viewer
    [reportSource]="{
        report: 'Dashboard.trdx', 
        parameters: { ReportYear: 2004 }
    }"
    [serviceUrl]="'https://demos.telerik.com/reporting/api/reports'"
    viewMode="interactive"
    [keepClientAlive]="true"
    (printStarted)="printStarted()">
</reporting-angular-viewer>

import { Component, ViewChild } from '@angular/core';
import { ReportingAngularViewerComponent } from '@progress/telerik-angular-native-report-viewer'

    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.scss']
    })

    export class AppComponent {
        title = 'Native Angular Report Viewer Demo';

        @ViewChild('viewer') public viewer!: ReportingAngularViewerComponent;

        printStarted() {
            console.log("This event will be emitted when the printing starts.");
        };
    }

printDocumentReady

The printDocumentReady event will be emitted after the viewer finishes printing the report.

<reporting-angular-viewer
    #viewer
    [reportSource]="{
        report: 'Dashboard.trdx', 
        parameters: { ReportYear: 2004 }
    }"
    [serviceUrl]="'https://demos.telerik.com/reporting/api/reports'"
    viewMode="interactive"
    [keepClientAlive]="true"
    (printDocumentReady)="printDocumentReady()">
</reporting-angular-viewer>

import { Component, ViewChild } from '@angular/core';
import { ReportingAngularViewerComponent } from '@progress/telerik-angular-native-report-viewer'

    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.scss']
    })

    export class AppComponent {
        title = 'Native Angular Report Viewer Demo';

        @ViewChild('viewer') public viewer!: ReportingAngularViewerComponent;

        printDocumentReady() {
            console.log("This event will be emitted after the viewer finishes printing the report.");
        };
    }

exportStarted

The exportStarted event will be emitted when an export operation is triggered.

<reporting-angular-viewer
    #viewer
    [reportSource]="{
        report: 'Dashboard.trdx', 
        parameters: { ReportYear: 2004 }
    }"
    [serviceUrl]="'https://demos.telerik.com/reporting/api/reports'"
    viewMode="interactive"
    [keepClientAlive]="true"
    (exportStarted)="exportStarted()">
</reporting-angular-viewer>

import { Component, ViewChild } from '@angular/core';
import { ReportingAngularViewerComponent } from '@progress/telerik-angular-native-report-viewer'

    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.scss']
    })

    export class AppComponent {
        title = 'Native Angular Report Viewer Demo';

        @ViewChild('viewer') public viewer!: ReportingAngularViewerComponent;

        exportStarted() {
            console.log("This event will be emitted when an export operation is triggered.");
        };
    }

exportDocumentReady

The exportDocumentReady event will be emitted after the viewer finishes exporting the report.

<reporting-angular-viewer
    #viewer
    [reportSource]="{
        report: 'Dashboard.trdx', 
        parameters: { ReportYear: 2004 }
    }"
    [serviceUrl]="'https://demos.telerik.com/reporting/api/reports'"
    viewMode="interactive"
    [keepClientAlive]="true"
    (exportDocumentReady)="exportDocumentReady()">
</reporting-angular-viewer>

import { Component, ViewChild } from '@angular/core';
import { ReportingAngularViewerComponent } from '@progress/telerik-angular-native-report-viewer'

    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.scss']
    })

    export class AppComponent {
        title = 'Native Angular Report Viewer Demo';

        @ViewChild('viewer') public viewer!: ReportingAngularViewerComponent;

        exportDocumentReady() {
            console.log("This event will be emitted after the viewer finishes exporting the report.");
        };
    }

beforeLoadReport

The beforeLoadReport event will be emitted before the rendering of a report begins.

<reporting-angular-viewer
    #viewer
    [reportSource]="{
        report: 'Dashboard.trdx', 
        parameters: { ReportYear: 2004 }
    }"
    [serviceUrl]="'https://demos.telerik.com/reporting/api/reports'"
    viewMode="interactive"
    [keepClientAlive]="true"
    (beforeLoadReport)="beforeLoadReport()">
</reporting-angular-viewer>

import { Component, ViewChild } from '@angular/core';
import { ReportingAngularViewerComponent } from '@progress/telerik-angular-native-report-viewer'

    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.scss']
    })

    export class AppComponent {
        title = 'Native Angular Report Viewer Demo';

        @ViewChild('viewer') public viewer!: ReportingAngularViewerComponent;

        beforeLoadReport() {
            console.log("This event will be emitted before the rendering of a report begins.");
        };
    }

beginLoadReport

The beginLoadReport event will be emitted after the rendering of a report begins.

<reporting-angular-viewer
    #viewer
    [reportSource]="{
        report: 'Dashboard.trdx', 
        parameters: { ReportYear: 2004 }
    }"
    [serviceUrl]="'https://demos.telerik.com/reporting/api/reports'"
    viewMode="interactive"
    [keepClientAlive]="true"
    (beginLoadReport)="beginLoadReport()">
</reporting-angular-viewer>

import { Component, ViewChild } from '@angular/core';
import { ReportingAngularViewerComponent } from '@progress/telerik-angular-native-report-viewer'

    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.scss']
    })

    export class AppComponent {
        title = 'Native Angular Report Viewer Demo';

        @ViewChild('viewer') public viewer!: ReportingAngularViewerComponent;

        beginLoadReport() {
            console.log("This event will be emitted after the rendering of a report begins.");
        };
    }

reportLoadProgress

The reportLoadProgress event will be emitted after each successful Get Document Info request until the report rendering is complete.

<reporting-angular-viewer
    #viewer
    [reportSource]="{
        report: 'Dashboard.trdx', 
        parameters: { ReportYear: 2004 }
    }"
    [serviceUrl]="'https://demos.telerik.com/reporting/api/reports'"
    viewMode="interactive"
    [keepClientAlive]="true"
    (reportLoadProgress)="reportLoadProgress($event)">
</reporting-angular-viewer>

import { Component, ViewChild } from '@angular/core';
import { ReportingAngularViewerComponent } from '@progress/telerik-angular-native-report-viewer'
import { DocumentInfo } from '@progress/telerik-common-report-viewer'

    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.scss']
    })

    export class AppComponent {
        title = 'Native Angular Report Viewer Demo';

        @ViewChild('viewer') public viewer!: ReportingAngularViewerComponent;

        reportLoadProgress(e: DocumentInfo) {
            console.log("The e parameter will contain the current information for the report rendering progress.", e);
            console.log("This event will be emitted after each successful Get Document Info request until the report rendering is complete.");
        };
    }

reportLoadComplete

The reportLoadComplete event will be emitted after the rendering of a report ends.

<reporting-angular-viewer
    #viewer
    [reportSource]="{
        report: 'Dashboard.trdx', 
        parameters: { ReportYear: 2004 }
    }"
    [serviceUrl]="'https://demos.telerik.com/reporting/api/reports'"
    viewMode="interactive"
    [keepClientAlive]="true"
    (reportLoadComplete)="reportLoadComplete($event)">
</reporting-angular-viewer>

import { Component, ViewChild } from '@angular/core';
import { ReportingAngularViewerComponent } from '@progress/telerik-angular-native-report-viewer'
import { DocumentInfo } from '@progress/telerik-common-report-viewer'

    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.scss']
    })

    export class AppComponent {
        title = 'Native Angular Report Viewer Demo';

        @ViewChild('viewer') public viewer!: ReportingAngularViewerComponent;

        reportLoadComplete(e: DocumentInfo) {
            console.log("The document information such as the page count, where it has document map, etc. will ve sent via the e object.", e);
            console.log("This event will be emitted after the rendering of a report ends.");
        };
    }

renderingStopped

The renderingStopped event will be emitted when report rendering is cancelled.

<reporting-angular-viewer
    #viewer
    [reportSource]="{
        report: 'Dashboard.trdx', 
        parameters: { ReportYear: 2004 }
    }"
    [serviceUrl]="'https://demos.telerik.com/reporting/api/reports'"
    viewMode="interactive"
    [keepClientAlive]="true"
    (renderingStopped)="renderingStopped()">
</reporting-angular-viewer>

import { Component, ViewChild } from '@angular/core';
import { ReportingAngularViewerComponent } from '@progress/telerik-angular-native-report-viewer'

    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.scss']
    })

    export class AppComponent {
        title = 'Native Angular Report Viewer Demo';

        @ViewChild('viewer') public viewer!: ReportingAngularViewerComponent;

        renderingStopped() {
            console.log("This event will be emitted when report rendering is cancelled.");
        };
    }

error

The error event will be emitted when viewer encounters an error.

<reporting-angular-viewer
    #viewer
    [reportSource]="{
        report: 'Dashboard.trdx', 
        parameters: { ReportYear: 2004 }
    }"
    [serviceUrl]="'https://demos.telerik.com/reporting/api/reports'"
    viewMode="interactive"
    [keepClientAlive]="true"
    (error)="error($event)">
</reporting-angular-viewer>

import { Component, ViewChild } from '@angular/core';
import { ReportingAngularViewerComponent } from '@progress/telerik-angular-native-report-viewer'

    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.scss']
    })

    export class AppComponent {
        title = 'Native Angular Report Viewer Demo';

        @ViewChild('viewer') public viewer!: ReportingAngularViewerComponent;

        error(e: string) {
            console.log("This event will be emitted when viewer encounters an error.");
            console.log("The error message", e);
        };
    }

loadedReportChange

The loadedReportChange event will be emitted when the previewed report is changed or refreshed.

<reporting-angular-viewer
    #viewer
    [reportSource]="{
        report: 'Dashboard.trdx', 
        parameters: { ReportYear: 2004 }
    }"
    [serviceUrl]="'https://demos.telerik.com/reporting/api/reports'"
    viewMode="interactive"
    [keepClientAlive]="true"
    (loadedReportChange)="loadedReportChange()">
</reporting-angular-viewer>

import { Component, ViewChild } from '@angular/core';
import { ReportingAngularViewerComponent } from '@progress/telerik-angular-native-report-viewer'

    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.scss']
    })

    export class AppComponent {
        title = 'Native Angular Report Viewer Demo';

        @ViewChild('viewer') public viewer!: ReportingAngularViewerComponent;

        loadedReportChange() {
            console.log("This event will be emitted when the loaded report is changed.");
        };
    }

pageReady

The pageReady event will be emitted when the viewer content has been loaded from the template and is ready to display reports or perform any other operations on it.

<reporting-angular-viewer
    #viewer
    [reportSource]="{
        report: 'Dashboard.trdx', 
        parameters: { ReportYear: 2004 }
    }"
    [serviceUrl]="'https://demos.telerik.com/reporting/api/reports'"
    viewMode="interactive"
    [keepClientAlive]="true"
    (pageReady)="pageReady($event)">
</reporting-angular-viewer>

import { Component, ViewChild } from '@angular/core';
import { ReportingAngularViewerComponent } from '@progress/telerik-angular-native-report-viewer'
import { PageInfo } from '@progress/telerik-common-report-viewer'

    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.scss']
    })

    export class AppComponent {
        title = 'Native Angular Report Viewer Demo';

        @ViewChild('viewer') public viewer!: ReportingAngularViewerComponent;

        pageReady(e: PageInfo) {
            console.log("The current page information such as the page number, the page content, etc.", e)
            console.log("This event will be emitted when the viewer content has been loaded from the template and is ready to display reports or perform any other operations on it.");
        };
    }

The navigateToReport event will be emitted when the viewer navigates to a new report through the Drillthrough/Navigate To Report Action.

<reporting-angular-viewer
    #viewer
    [reportSource]="{
        report: 'Dashboard.trdx', 
        parameters: { ReportYear: 2004 }
    }"
    [serviceUrl]="'https://demos.telerik.com/reporting/api/reports'"
    viewMode="interactive"
    [keepClientAlive]="true"
    (navigateToReport)="navigateToReport($event)">
</reporting-angular-viewer>

import { Component, ViewChild } from '@angular/core';
import { ReportingAngularViewerComponent } from '@progress/telerik-angular-native-report-viewer'

    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.scss']
    })

    export class AppComponent {
        title = 'Native Angular Report Viewer Demo';

        @ViewChild('viewer') public viewer!: ReportingAngularViewerComponent;

        navigateToReport(e: any) {
            console.log("The report source object of the newly loaded report", e)
            console.log("This event will be emitted when the viewer navigates to a new report through the Drillthrough/Navigate To Report action.");
        };
    }

currentPageChanged

The currentPageChanged event will be emitted when the viewer changes its currently displayed page.

<reporting-angular-viewer
    #viewer
    [reportSource]="{
        report: 'Dashboard.trdx', 
        parameters: { ReportYear: 2004 }
    }"
    [serviceUrl]="'https://demos.telerik.com/reporting/api/reports'"
    viewMode="interactive"
    [keepClientAlive]="true"
    (currentPageChanged)="currentPageChanged($event)">
</reporting-angular-viewer>

import { Component, ViewChild } from '@angular/core';
import { ReportingAngularViewerComponent } from '@progress/telerik-angular-native-report-viewer'

    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.scss']
    })

    export class AppComponent {
        title = 'Native Angular Report Viewer Demo';

        @ViewChild('viewer') public viewer!: ReportingAngularViewerComponent;

        currentPageChanged(e: { page number, reportDocumentId: string }) {
            console.log("The page number and document id", e)
            console.log("This event will be emitted when the viewer changes its currently displayed page.");
        };
    }

interactiveActionExecuting

The interactiveActionExecuting event will be emitted before an interactive action is executed.

<reporting-angular-viewer
    #viewer
    [reportSource]="{
        report: 'Dashboard.trdx', 
        parameters: { ReportYear: 2004 }
    }"
    [serviceUrl]="'https://demos.telerik.com/reporting/api/reports'"
    viewMode="interactive"
    [keepClientAlive]="true"
    (interactiveActionExecuting)="interactiveActionExecuting()">
</reporting-angular-viewer>

import { Component, ViewChild } from '@angular/core';
import { ReportingAngularViewerComponent } from '@progress/telerik-angular-native-report-viewer'

    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.scss']
    })

    export class AppComponent {
        title = 'Native Angular Report Viewer Demo';

        @ViewChild('viewer') public viewer!: ReportingAngularViewerComponent;

        interactiveActionExecuting() {
            console.log("This event will be emitted before an interactive action is executed.");
        };
    }

reportVersionMismatch

The reportVersionMismatch event will be emitted when there is mismatch between the version of the viewer and the reporting service.

<reporting-angular-viewer
    #viewer
    [reportSource]="{
        report: 'Dashboard.trdx', 
        parameters: { ReportYear: 2004 }
    }"
    [serviceUrl]="'https://demos.telerik.com/reporting/api/reports'"
    viewMode="interactive"
    [keepClientAlive]="true"
    (reportVersionMismatch)="reportVersionMismatch()">
</reporting-angular-viewer>

import { Component, ViewChild } from '@angular/core';
import { ReportingAngularViewerComponent } from '@progress/telerik-angular-native-report-viewer'

    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.scss']
    })

    export class AppComponent {
        title = 'Native Angular Report Viewer Demo';

        @ViewChild('viewer') public viewer!: ReportingAngularViewerComponent;

        reportVersionMismatch() {
            console.log("This event will be emitted when there is mismatch between the version of the viewer and the reporting service.");
        };
    }

parametersLoaded

The parametersLoaded event will be emitted after the Get Report Parameters is made.

<reporting-angular-viewer
    #viewer
    [reportSource]="{
        report: 'Dashboard.trdx', 
        parameters: { ReportYear: 2004 }
    }"
    [serviceUrl]="'https://demos.telerik.com/reporting/api/reports'"
    viewMode="interactive"
    [keepClientAlive]="true"
    (parametersLoaded)="parametersLoaded($event)">
</reporting-angular-viewer>

import { Component, ViewChild } from '@angular/core';
import { ReportingAngularViewerComponent } from '@progress/telerik-angular-native-report-viewer'
import { ReportParameterInfo } from '@progress/telerik-common-report-viewer'

    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.scss']
    })

    export class AppComponent {
        title = 'Native Angular Report Viewer Demo';

        @ViewChild('viewer') public viewer!: ReportingAngularViewerComponent;

        parametersLoaded(e: ReportParameterInfo[]) {
            console.log("An array of the parameter values is sent via the event object.", e);
            console.log("This event will be emitted after the Get Report Parameters request is made.");
        };
    }
In this article
Related articles
Not finding the help you need? Improve this article