Using API Methods
Our sample projects and report templates can help you learn the basics of working with our products.For finer control you can talk to the viewer directly through its API instead of only reacting to events.
Getting a reference. Use
Calling the API from the template. The
The API used here:
Because Angular's template binding re-reads these values on each change-detection cycle, the displayed zoom and page number stay in sync with what the user does in the viewer.
Getting a reference. Use
@ViewChild to obtain the StimulsoftViewerComponent instance:import { Component, ViewChild } from '@angular/core';
import { StimulsoftViewerComponent } from 'stimulsoft-viewer-angular';
export class AppComponent {
@ViewChild('viewer') viewer: StimulsoftViewerComponent;
}Calling the API from the template. The
viewer.api object exposes the viewer's state and methods, which you can bind to directly:Zoom is {{ viewer.api.zoom }}<br />
Current page {{ viewer.api.currentPage + 1 }}<br />
<input type="button" (click)="viewer.api.zoom = 50" value="Zoom to 50%" />
<input type="button" (click)="viewer.api.export('Pdf', { ImageResolution: 200 })" value="Export to PDF" />
<stimulsoft-viewer-angular #viewer
[requestUrl]="'/Viewer/{action}'" [action]="'InitViewer'" [height]="'100vh'">
</stimulsoft-viewer-angular>The API used here:
viewer.api.zoom— reads or sets the zoom level in percent; assigning50zooms the report to 50%.viewer.api.currentPage— the zero-based index of the current page (shown as+ 1for a human-friendly number).viewer.api.export('Pdf', { ImageResolution: 200 })— exports the report to a format with export settings; here PDF at 200 DPI.
Because Angular's template binding re-reads these values on each change-detection cycle, the displayed zoom and page number stay in sync with what the user does in the viewer.