Merge pull request #249 from angular/main

Create a new pull request by comparing changes across two branches

Author: GulajavaMinistudio

.pullapprove.yml

@@ -57,7 +57,7 @@
 version: 3
 
 availability:
-  users_unavailable: ['atscott', 'devversion']
+  users_unavailable: ['atscott']
 
 # Meta field that goes unused by PullApprove to allow for defining aliases to be
 # used throughout the config.

adev/shared-docs/components/algolia-icon/algolia-icon.component.ts

@@ -11,7 +11,6 @@ import {ChangeDetectionStrategy, Component} from '@angular/core';
 @Component({
   selector: 'docs-algolia-icon',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [],
   templateUrl: './algolia-icon.component.html',
 })
 export class AlgoliaIcon {}

adev/shared-docs/components/breadcrumb/breadcrumb.component.html

@@ -1,4 +1,4 @@
-@for (breadcrumb of breadcrumbItems(); track breadcrumb) {
+@for (breadcrumb of breadcrumbItems(); track $index) {
   <div class="docs-breadcrumb">
     @if (breadcrumb.path) {
       @if (breadcrumb.isExternal) {

adev/shared-docs/components/breadcrumb/breadcrumb.component.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {ChangeDetectionStrategy, Component, OnInit, inject, signal} from '@angular/core';
+import {ChangeDetectionStrategy, Component, inject, computed} from '@angular/core';
 import {NavigationState} from '../../services/index';
 import {NavigationItem} from '../../interfaces/index';
 import {RouterLink} from '@angular/router';
@@ -18,31 +18,18 @@ import {RouterLink} from '@angular/router';
   styleUrls: ['./breadcrumb.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class Breadcrumb implements OnInit {
+export class Breadcrumb {
   private readonly navigationState = inject(NavigationState);
 
-  breadcrumbItems = signal<NavigationItem[]>([]);
+  breadcrumbItems = computed(() => {
+    const breadcrumbs: NavigationItem[] = [];
+    let activeItem = this.navigationState.activeNavigationItem()?.parent;
 
-  ngOnInit(): void {
-    this.setBreadcrumbItemsBasedOnNavigationStructure();
-  }
+    while (activeItem != null) {
+      breadcrumbs.push(activeItem);
+      activeItem = activeItem.parent;
+    }
 
-  private setBreadcrumbItemsBasedOnNavigationStructure(): void {
-    let breadcrumbs: NavigationItem[] = [];
-
-    const traverse = (node: NavigationItem | null) => {
-      if (!node) {
-        return;
-      }
-
-      if (node.parent) {
-        breadcrumbs = [node.parent, ...breadcrumbs];
-        traverse(node.parent);
-      }
-    };
-
-    traverse(this.navigationState.activeNavigationItem());
-
-    this.breadcrumbItems.set(breadcrumbs);
-  }
+    return breadcrumbs.reverse();
+  });
 }

adev/shared-docs/components/icon/BUILD.bazel

@@ -1,5 +1,5 @@
-load("//tools:defaults.bzl", "ng_module")
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
+load("//tools:defaults.bzl", "ng_module")
 
 package(default_visibility = ["//visibility:private"])
 
@@ -10,7 +10,6 @@ ng_module(
     ],
     assets = [
         ":icon.component.css",
-        "icon.component.html",
     ],
     visibility = [
         "//adev/shared-docs/components:__pkg__",

adev/shared-docs/components/icon/icon.component.html

@@ -18,24 +18,21 @@ import {
 
 @Component({
   selector: 'docs-icon',
-  templateUrl: './icon.component.html',
-  styleUrl: './icon.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
-    '[class]': 'MATERIAL_SYMBOLS_OUTLINED',
+    'class': 'material-symbols-outlined',
     '[style.font-size.px]': 'fontSize()',
     'aria-hidden': 'true',
     'translate': 'no',
   },
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content />',
+  styleUrl: './icon.component.scss',
 })
 export class IconComponent {
-  fontSize = computed(() => {
-    return IconComponent.isFontLoaded() ? null : 0;
-  });
+  private static isFontLoaded = signal(false);
 
-  protected readonly MATERIAL_SYMBOLS_OUTLINED = 'material-symbols-outlined';
+  protected readonly fontSize = computed(() => (IconComponent.isFontLoaded() ? null : 0));
 
-  private static isFontLoaded = signal(false);
   /** Share the same promise across different instances of the component */
   private static whenFontLoad?: Promise<FontFace[]> | undefined;
 

adev/shared-docs/components/icon/icon.component.ts

@@ -79,7 +79,6 @@ export class DocViewer implements OnChanges {
   private readonly injector = inject(Injector);
   private readonly appRef = inject(ApplicationRef);
 
-  // tslint:disable-next-line:no-unused-variable
   private animateContent = false;
   private readonly pendingTasks = inject(PendingTasks);
 

adev/shared-docs/components/viewers/docs-viewer/docs-viewer.component.ts

@@ -12,6 +12,7 @@ import {
   ApplicationRef,
   afterNextRender,
   EnvironmentInjector,
+  Injector,
 } from '@angular/core';
 import {Scroll, Router} from '@angular/router';
 import {filter, firstValueFrom, map, switchMap, tap} from 'rxjs';
@@ -62,7 +63,7 @@ export class AppScroller {
       });
   }
 
-  scroll() {
+  scroll(injector?: Injector) {
     if (!this._lastScrollEvent || !this.canScroll) {
       return;
     }
@@ -83,7 +84,9 @@ export class AppScroller {
           }
         },
       },
-      {injector: this.injector},
+      // Use the component injector when provided so that the manager can
+      // deregister the sequence once the component is destroyed.
+      {injector: injector ?? this.injector},
     );
     this.cancelScroll = () => {
       ref.destroy();

adev/src/app/app-scroller.ts

@@ -220,7 +220,6 @@ export class CodeMirrorEditor {
     if (!this.currentFile().filename.endsWith('.ts')) return;
 
     this.tsVfsWorker.postMessage(request);
-    // tslint:disable-next-line:semicolon
   };
 
   private getVfsEnvFileSystemMap(): Map<string, string> {