Rasterex APINPM Package/docs/getting-started/angular-quick-start

Angular Quick Start

Create an Angular viewer host, open a document, and enable a text annotation with the NPM SDK.

1. Create An Angular Project

Create an Angular application, then add the viewer to a component that owns the host element.

bash

npx @angular/cli new rasterex-angular
cd rasterex-angular

1. Create An Angular Project

Folder Structure

Keep viewer initialization, host state, and cleanup together in one component.

text

rasterex-angular/
├── src/app/
│   ├── viewer.component.ts    # Creates, subscribes to, and destroys the viewer.
│   ├── viewer.component.html  # Renders the viewer host and accessible control.
│   └── viewer.component.css   # Gives the viewer host a stable height.
└── package.json               # Declares Angular and @rasterex/viewer.

Folder Structure

2. Install The Viewer

Install the Viewer package. Use a document URL that the Canvas environment can reach.

bash

npm install @rasterex/viewer

2. Install The Viewer

3. Initialize And Open A Document

Use ngAfterViewInit so the ViewChild host exists. Disable the control until the documented opened event confirms a document is ready, and clean up in ngOnDestroy.

import { AfterViewInit, Component, ElementRef, OnDestroy, ViewChild } from "@angular/core";
import { createViewer, type RasterexViewer } from "@rasterex/viewer";

const FILE_URL = "https://files.example.com/sample.pdf"; // Replace with a Canvas-reachable document URL.

@Component({
  selector: "app-viewer",
  standalone: true,
  templateUrl: "./viewer.component.html",
  styleUrl: "./viewer.component.css",
})
export class ViewerComponent implements AfterViewInit, OnDestroy {
  @ViewChild("viewerHost", { static: true }) viewerHost!: ElementRef<HTMLElement>;

  ready = false;
  status = "Starting viewer";
  private viewer: RasterexViewer | null = null;
  private cleanups: Array<() => void> = [];

  async ngAfterViewInit(): Promise<void> {
    this.viewer = createViewer({ container: this.viewerHost.nativeElement });
    this.cleanups.push(
      this.viewer.documents.on("opened", () => {
        this.ready = true;
        this.status = "Document opened";
      }),
      this.viewer.documents.on("failed", (event) => {
        this.status = `Open failed: ${event.error.message}`;
      }),
      this.viewer.annotations.on("created", (event) => {
        this.status = `Created annotation ${event.guid}`;
      }),
    );

    try {
      await this.viewer.mount();
      await this.viewer.ready();
      this.status = "Opening document";
      await this.viewer.documents.open({ url: FILE_URL, displayName: "sample.pdf" });
    } catch (error) {
      this.status = error instanceof Error ? error.message : "Viewer failed";
    }
  }

  async enableTextAnnotation(): Promise<void> {
    if (!this.viewer || !this.ready) return;
    const result = await this.viewer.tools.set({ action: "TEXT", enabled: true });
    this.status = result.success ? "Text tool active" : (result.error ?? "Text tool failed");
  }

  ngOnDestroy(): void {
    for (const cleanup of this.cleanups) cleanup();
    this.cleanups = [];
    this.viewer?.destroy();
    this.viewer = null;
  }
}

3. Initialize And Open A Document

4. Work With Annotations

The example enables the verified TEXT annotation action after the document has opened. It clears the host tool state when the documented created event arrives.

Creating an annotation is not a persistence confirmation. When the host must save changes, use the result-backed save flow documented in Annotation API and Save annotations.