> ## Documentation Index
> Fetch the complete documentation index at: https://docs.markpdf.tech/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

> Your first conversion component with @markpdf/angular in less than 15 lines.

# Quickstart

## Component with `MarkpdfService`

```ts upload.component.ts theme={null}
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.

<Note>
  `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](/docs/sdks/angular/framework-guide).
</Note>

## With `async` pipe

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

```markup theme={null}
<pre>{{ markdown$ | async }}</pre>
```

## Upload progress

```ts theme={null}
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](/docs/sdks/angular/reference#progreso-de-upload) for details of the events.

## Siguiente paso

* [Framework guide: protect the API key](/docs/sdks/angular/framework-guide)
* [Referencia completa](/docs/sdks/angular/reference)