Open and close the bookmark pane programmatically

11 Feb 20261 minute to read

The PDF Viewer exposes APIs to open and close the bookmark pane programmatically. Use openBookmarkPane() and closeBookmarkPane() to control the bookmark pane from application code.

Follow these steps to call the bookmark APIs from the application.

Step 1: Create a basic PDF Viewer sample using the getting started guide.

Step 2: Insert the following code snippet to implement opening the bookmark pane:

<button (click)="openBookmark()">Open Thumbnail Pane</button>

openBookmark() {
  var viewer = (<any>document.getElementById('pdfViewer')).ej2_instances[0];
  // Open Bookmark pane.
  viewer.bookmarkViewModule.openBookmarkPane();
}

Similarly, to close the Bookmark pane programmatically, employ the following code snippet:

<button (click)="closeBookmark()">Close Bookmark Pane</button>

closeBookmark() {
  var viewer = (<any>document.getElementById('pdfViewer')).ej2_instances[0];
  // Close Bookmark pane.
  viewer.bookmarkViewModule.closeBookmarkPane();
}

View sample in GitHub