From dd15efb7c322b06e89bf3883508e312dabb6f333 Mon Sep 17 00:00:00 2001
From: SkyZeroZx <73321943+SkyZeroZx@users.noreply.github.com>
Date: Sun, 8 Feb 2026 13:42:31 -0500
Subject: [PATCH] docs(docs-infra): fix heading ID generation and display

Ensures that custom heading IDs are properly handled
---
 .../pipeline/shared/marked/test/heading/heading.spec.mts    | 4 ++++
 .../pipeline/shared/marked/transformations/heading.mts      | 4 +++-
 adev/src/content/guide/templates/ng-template.md             | 6 +++---
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/adev/shared-docs/pipeline/shared/marked/test/heading/heading.spec.mts b/adev/shared-docs/pipeline/shared/marked/test/heading/heading.spec.mts
index dd3bb563396..ec8511baffe 100644
--- a/adev/shared-docs/pipeline/shared/marked/test/heading/heading.spec.mts
+++ b/adev/shared-docs/pipeline/shared/marked/test/heading/heading.spec.mts
@@ -104,6 +104,10 @@ describe('markdown to html', () => {
 
     expect(h2HeaderId).toBe('my-custom-id');
     expect(h2AnchorHref).toBe(`#${h2HeaderId}`);
+
+    // Verify that the custom ID syntax is removed from the displayed text
+    expect(h2Anchor?.textContent?.trim()).toBe('My heading');
+    expect(h2Anchor?.textContent).not.toContain('{#');
   });
 
   it('should be able to parse heading with a valid tag in a code block', () => {
diff --git a/adev/shared-docs/pipeline/shared/marked/transformations/heading.mts b/adev/shared-docs/pipeline/shared/marked/transformations/heading.mts
index f5ed377e114..1b00e9bd62d 100644
--- a/adev/shared-docs/pipeline/shared/marked/transformations/heading.mts
+++ b/adev/shared-docs/pipeline/shared/marked/transformations/heading.mts
@@ -34,7 +34,9 @@ export function headingRender(
 
   const link = customId ?? getIdFromHeading(headingText);
 
-  const label = parsedText.replace(/`(.*?)`/g, '<code>$1</code>');
+  // Replace code backticks and remove custom ID syntax from the displayed label
+  let label = parsedText.replace(/`(.*?)`/g, '<code>$1</code>');
+  label = label.replace(/{#\s*[\w-]+\s*}/g, '').trim();
   const normalizedLabel = label.replace(/<\/?code>/g, '');
 
   return `
diff --git a/adev/src/content/guide/templates/ng-template.md b/adev/src/content/guide/templates/ng-template.md
index 0d7e8843bc8..102b3d63ef1 100644
--- a/adev/src/content/guide/templates/ng-template.md
+++ b/adev/src/content/guide/templates/ng-template.md
@@ -222,7 +222,7 @@ Each parameter is written as an attribute prefixed with `let-` with a value matc
 </ng-template>
 ```
 
-### Using `NgTemplateOutlet`
+### Using `NgTemplateOutlet` {#using-ngtemplateoutlet-with-parameters}
 
 You can bind a context object to the `ngTemplateOutletContext` input:
 
@@ -234,11 +234,11 @@ You can bind a context object to the `ngTemplateOutletContext` input:
 <ng-container [ngTemplateOutlet]="myFragment" [ngTemplateOutletContext]="{topping: 'onion'}" />
 ```
 
-### Using `ViewContainerRef`
+### Using `ViewContainerRef` {#using-viewcontainerref-with-parameters}
 
 You can pass a context object as the second argument to `createEmbeddedView`:
 
-```angular-ts
+```ts
 this.viewContainer.createEmbeddedView(this.myFragment, {topping: 'onion'});
 ```