From 2e4e4856559053da836042bab39f03edcd52b174 Mon Sep 17 00:00:00 2001
From: Enea Jahollari <jahollarienea14@gmail.com>
Date: Tue, 26 Nov 2024 20:51:00 +0100
Subject: [PATCH] refactor(docs-infra): use interpolation instead of innerHTML
 for better perf (#58913)

Using innerHTML will cause the browser to parse the HTML and then create a DOM tree instead of just using normal interpolation.

PR Close #58913
---
 .../navigation-list/navigation-list.component.html          | 6 +++---
 .../components/navigation-list/navigation-list.component.ts | 4 ++--
 .../api-items-section/api-items-section.component.html      | 6 +++---
 packages/core/global/BUILD.bazel                            | 2 +-
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/adev/shared-docs/components/navigation-list/navigation-list.component.html b/adev/shared-docs/components/navigation-list/navigation-list.component.html
index 8bd3760a053..ac8c429c33c 100644
--- a/adev/shared-docs/components/navigation-list/navigation-list.component.html
+++ b/adev/shared-docs/components/navigation-list/navigation-list.component.html
@@ -29,7 +29,7 @@
               routerLinkActive="docs-faceted-list-item-active"
               (click)="emitClickOnLink()"
             >
-              <span [innerHtml]="item.label"></span>
+              <span>{{item.label}}</span>
               @if (item.children && !item.isExpanded) {
                 <docs-icon>chevron_right</docs-icon>
               }
@@ -39,7 +39,7 @@
           <!-- Nav Section Header -->
           @if (item.level !== collapsableLevel() && item.level !== expandableLevel()) {
             <div class="docs-secondary-nav-header">
-              <span [innerHtml]="item.label"></span>
+              <span>{{item.label}}</span>
             </div>
           }
 
@@ -50,7 +50,7 @@
             <button
               type="button"
               (click)="toggle(item)"
-              attr.aria-label="{{ item.isExpanded ? 'Collapse' : 'Expand' }} {{ item.label }}"
+              [attr.aria-label]="(item.isExpanded ? 'Collapse' : 'Expand') + ' ' + item.label"
               [attr.aria-expanded]="item.isExpanded"
               class="docs-secondary-nav-button"
               [class.docs-faceted-list-item-active]="item | isActiveNavigationItem: activeItem()"
diff --git a/adev/shared-docs/components/navigation-list/navigation-list.component.ts b/adev/shared-docs/components/navigation-list/navigation-list.component.ts
index 062ecc00d1d..92f27df6034 100644
--- a/adev/shared-docs/components/navigation-list/navigation-list.component.ts
+++ b/adev/shared-docs/components/navigation-list/navigation-list.component.ts
@@ -10,14 +10,14 @@ import {ChangeDetectionStrategy, Component, inject, input, output} from '@angula
 import {NavigationItem} from '../../interfaces/index';
 import {NavigationState} from '../../services/index';
 import {RouterLink, RouterLinkActive} from '@angular/router';
-import {CommonModule} from '@angular/common';
 import {IconComponent} from '../icon/icon.component';
 import {IsActiveNavigationItem} from '../../pipes/is-active-navigation-item.pipe';
+import {NgTemplateOutlet} from '@angular/common';
 
 @Component({
   selector: 'docs-navigation-list',
   standalone: true,
-  imports: [CommonModule, RouterLink, RouterLinkActive, IconComponent, IsActiveNavigationItem],
+  imports: [RouterLink, RouterLinkActive, IconComponent, IsActiveNavigationItem, NgTemplateOutlet],
   templateUrl: './navigation-list.component.html',
   styleUrls: ['./navigation-list.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/adev/src/app/features/references/api-items-section/api-items-section.component.html b/adev/src/app/features/references/api-items-section/api-items-section.component.html
index aeb7e96b38c..3b0ec811cfb 100644
--- a/adev/src/app/features/references/api-items-section/api-items-section.component.html
+++ b/adev/src/app/features/references/api-items-section/api-items-section.component.html
@@ -1,14 +1,14 @@
 <header class="adev-api-items-section-header">
   <h3 [id]="group().id">
-    <!-- we use innerHtml because the title can be an html string-->
     <a
       routerLink="/api"
       [fragment]="group().id"
       queryParamsHandling="preserve"
       class="adev-api-anchor"
       tabindex="-1"
-      [innerHtml]="group().title"
-    ></a>
+    >
+      {{group().title}}
+    </a>
   </h3>
 </header>
 
diff --git a/packages/core/global/BUILD.bazel b/packages/core/global/BUILD.bazel
index fe5d9634d2d..d050fcf747a 100644
--- a/packages/core/global/BUILD.bazel
+++ b/packages/core/global/BUILD.bazel
@@ -16,6 +16,6 @@ generate_api_docs(
         "//packages:common_files_and_deps_for_docs",
     ],
     entry_point = ":index.ts",
-    module_label = "<code>window.ng</code> globals",
+    module_label = "window.ng globals",
     module_name = "@angular/core/globals",
 )