Quickstart

Component with `MarkpdfService`

upload.component.ts

import { Component, inject } from "@angular/core";
import { MarkpdfService } from "@markpdf/angular";

@Component({
  selector: "app-upload",
  standalone: true,
  template: `
    <input type="file" (change)="onFile($event)" />
    <pre>{{ markdown() }}</pre>
  `,
})
export class UploadComponent {
  private markpdf = inject(MarkpdfService);
  markdown = signal("");

  onFile(event: Event) {
    const file = (event.target as { files?: FileList | null }).files?.[0];
    if (!file) return;

    this.markpdf.convertFile(file, { mode: "fast" }).subscribe({
      next: (md) => this.markdown.set(md),
      error: (err) => console.error(err),
    });
  }
}

MarkpdfService.convertFile returns a Observable<string> (or Observable<ConversionResult> with responseFormat: "json"), consistent with the rest of Angular’s API.

MarkpdfService calls baseUrl (the one you configured with provideMarkpdf/forRoot), which must point to your own backend, not directly to api.markpdf.tech — otherwise you would expose your API key in the browser. See Framework Guide.

With `async` pipe

markdown$ = this.markpdf.convertFile(file, { mode: "fast" });

<pre>{{ markdown$ | async }}</pre>

Upload progress

this.markpdf.convertFile(file, { mode: "fast" }, { reportProgress: true }).subscribe((event) => {
  if (event.type === "progress") {
    console.log(`${event.percent}%`);
  } else if (event.type === "result") {
    this.markdown.set(event.markdown);
  }
});

See Reference for details of the events.

Siguiente paso