> ## 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.

# Inicio rápido

> Su primer componente de conversión con @markpdf/angular en menos de 15 líneas.

# Inicio rápido

## Componente con `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` devuelve un `Observable<string>` (o `Observable<ConversionResult>` con `responseFormat: "json"`), consistente con el resto de API de Angular.

<Note>
  `MarkpdfService` llama a `baseUrl` (el que configuró con `provideMarkpdf`/`forRoot`), que debe apuntar a **su propio backend**, no directamente a `api.markpdf.tech`; de lo contrario, expondría su clave API en el navegador. Consulte la [Guía marco](/docs/public/es/sdks/angular/framework-guide).
</Note>

## Con tubería `async`

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

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

## Progreso de la carga

```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);
  }
});
```

Consulte [Referencia](/docs/public/es/sdks/angular/reference#progreso-de-upload) para obtener detalles de los eventos.

## Siguiente paso

* [Guía de marco: proteger la clave API](/docs/public/es/sdks/angular/framework-guide)
* [Referencia completa](/docs/public/es/sdks/angular/reference)