diff --git a/frontend/src/app/sample/sample.component.ts b/frontend/src/app/sample/sample.component.ts
index 9638ab1..35a9276 100644
--- a/frontend/src/app/sample/sample.component.ts
+++ b/frontend/src/app/sample/sample.component.ts
@@ -1,21 +1,22 @@
-import { Component } from "@angular/core";
+import { Component, DestroyRef, OnInit } from "@angular/core";
 import { ActivatedRoute, Params, Router } from "@angular/router";
 import { AethelApiService } from "../shared/services/aethel-api.service";
-import { map, Observable } from "rxjs";
+import { map } from "rxjs";
 import { AethelMode, ExportMode, LexicalPhrase } from "../shared/types";
 import { isNonNull } from "../shared/operators/IsNonNull";
 import { faArrowLeft } from "@fortawesome/free-solid-svg-icons";
 import { Location } from "@angular/common";
 import { SpindleApiService } from "../shared/services/spindle-api.service";
-import { TextOutput } from "../shared/spindle-parse-result/spindle-parse-result.component";
+import { TextOutput } from "../shared/components/spindle-parse-result/spindle-parse-result.component";
 import { ErrorHandlerService } from "../shared/services/error-handler.service";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 
 @Component({
     selector: "pp-sample",
     templateUrl: "./sample.component.html",
     styleUrl: "./sample.component.scss",
 })
-export class SampleComponent {
+export class SampleComponent implements OnInit {
     private sampleName = this.route.snapshot.params["sampleName"];
     private sample$ = this.aethelService.sampleResult$(this.sampleName);
     public sampleResult$ = this.sample$.pipe(
@@ -29,31 +30,10 @@ export class SampleComponent {
 
     public loading$ = this.spindleService.loading$;
 
-    public textOutput$: Observable<TextOutput | null> = this.spindleService.output$.pipe(map(response => {
-        if (!response) {
-            return null;
-        }
-        if (response.error) {
-            this.errorHandler.handleSpindleError(response.error);
-            return null;
-        }
-        if (response.latex) {
-            return {
-                extension: "tex",
-                text: response.latex,
-            };
-        }
-        if (response.proof) {
-            return {
-                extension: "json",
-                // The additional arguments are for pretty-printing.
-                text: JSON.stringify(response.proof, null, 2),
-            };
-        }
-        return null;
-    }));
+    public textOutput: TextOutput | null = null;
 
     constructor(
+        private destroyRef: DestroyRef,
         private route: ActivatedRoute,
         private spindleService: SpindleApiService,
         private aethelService: AethelApiService,
@@ -62,6 +42,42 @@ export class SampleComponent {
         private location: Location,
     ) {}
 
+    ngOnInit(): void {
+        this.spindleService.output$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((response) => {
+                // HTTP error
+                if (!response) {
+                    return;
+                }
+                if (response.error) {
+                    this.errorHandler.handleSpindleError(response.error);
+                    return;
+                }
+                if (response.latex) {
+                    this.textOutput = {
+                        extension: "tex",
+                        text: response.latex,
+                    };
+                }
+                if (response.redirect) {
+                    // Opens a new tab.
+                    window.open(response.redirect, "_blank");
+                }
+                if (response.pdf) {
+                    const base64 = response.pdf;
+                    this.spindleService.downloadAsFile(base64, "pdf");
+                }
+                if (response.proof) {
+                    this.textOutput = {
+                        extension: "json",
+                        // The additional arguments are for pretty-printing.
+                        text: JSON.stringify(response.proof, null, 2),
+                    };
+                }
+            });
+    }
+
     public searchAethel(phrase: LexicalPhrase, mode: AethelMode): void {
         const queryParams = this.formatQueryParams(phrase, mode);
         this.router.navigate(["/aethel"], { queryParams });
@@ -70,8 +86,8 @@ export class SampleComponent {
     public exportResult(mode: ExportMode, sentence: string): void {
         this.spindleService.input$.next({
             mode,
-            sentence
-        })
+            sentence,
+        });
     }
 
     public showButtons(items: LexicalPhrase["items"]): boolean {