From 18a34cdd0c48fc15beae8527c5f454c6eb7b84ec Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Wed, 25 Jun 2025 09:53:48 +0200
Subject: [PATCH] build: links to headers not working

Fixes that a previous commit stopped setting the `example` on the `HeaderLink` which means that its link isn't constructed correctly.
---
 docs/src/app/shared/doc-viewer/doc-viewer.ts  | 18 ++++++++++-------
 docs/src/app/shared/doc-viewer/header-link.ts | 20 +++++++------------
 2 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/docs/src/app/shared/doc-viewer/doc-viewer.ts b/docs/src/app/shared/doc-viewer/doc-viewer.ts
index 89b3b73cc81b..ed1b7b05f682 100644
--- a/docs/src/app/shared/doc-viewer/doc-viewer.ts
+++ b/docs/src/app/shared/doc-viewer/doc-viewer.ts
@@ -187,13 +187,17 @@ export class DocViewer implements OnDestroy {
       const examplePortal = new ComponentPortal(componentClass, this._viewContainerRef);
       const exampleViewer = portalHost.attach(examplePortal);
       const exampleViewerComponent = exampleViewer.instance;
-      if (example !== null && componentClass === ExampleViewer) {
-        DocViewer._initExampleViewer(
-          exampleViewerComponent as ExampleViewer,
-          example,
-          file,
-          region,
-        );
+      if (example !== null) {
+        if (componentClass === ExampleViewer) {
+          DocViewer._initExampleViewer(
+            exampleViewerComponent as ExampleViewer,
+            example,
+            file,
+            region,
+          );
+        } else {
+          (exampleViewerComponent as HeaderLink).example.set(example);
+        }
       }
       this._portalHosts.push(portalHost);
     });
diff --git a/docs/src/app/shared/doc-viewer/header-link.ts b/docs/src/app/shared/doc-viewer/header-link.ts
index a518be234af6..889e078095a8 100644
--- a/docs/src/app/shared/doc-viewer/header-link.ts
+++ b/docs/src/app/shared/doc-viewer/header-link.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {Component, inject} from '@angular/core';
+import {Component, computed, inject, signal} from '@angular/core';
 import {Router} from '@angular/router';
 import {MatIcon} from '@angular/material/icon';
 
@@ -18,7 +18,7 @@ import {MatIcon} from '@angular/material/icon';
   selector: 'header-link',
   template: `
     <a aria-label="Link to this heading" class="docs-markdown-a"
-      [attr.aria-describedby]="example" [href]="_getFragmentUrl()">
+      [attr.aria-describedby]="example()" [href]="_fragmentUrl()">
       <mat-icon>link</mat-icon>
     </a>
   `,
@@ -29,18 +29,12 @@ export class HeaderLink {
    * Id of the anchor element. Note that is uses "example" because we instantiate the
    * header link components through the ComponentPortal.
    */
-  example: string = '';
+  readonly example = signal('');
 
   /** Base URL that is used to build an absolute fragment URL. */
-  private _baseUrl: string;
+  private _baseUrl = inject(Router).url.split('#')[0];
 
-  constructor() {
-    const router = inject(Router);
-
-    this._baseUrl = router.url.split('#')[0];
-  }
-
-  _getFragmentUrl(): string {
-    return `${this._baseUrl}#${this.example}`;
-  }
+  protected readonly _fragmentUrl = computed(() => {
+    return `${this._baseUrl}#${this.example()}`;
+  });
 }