angular · crisbeto · Mar 20, 2025 · Mar 20, 2025 · Mar 20, 2025 · Mar 20, 2025
diff --git a/adev/shared-docs/components/viewers/docs-viewer/docs-viewer.component.ts b/adev/shared-docs/components/viewers/docs-viewer/docs-viewer.component.ts
@@ -79,7 +79,7 @@ export class DocViewer implements OnChanges {
   private readonly injector = inject(Injector);
   private readonly appRef = inject(ApplicationRef);
 
-  private animateContent = false;
+  protected animateContent = false;
   private readonly pendingTasks = inject(PendingTasks);
 
   private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));

diff --git a/adev/shared-docs/directives/click-outside/click-outside.directive.ts b/adev/shared-docs/directives/click-outside/click-outside.directive.ts
@@ -22,23 +22,23 @@ export class ClickOutside {
   private readonly document = inject(DOCUMENT);
   private readonly elementRef = inject(ElementRef<HTMLElement>);
 
-  onClick($event: PointerEvent): void {
+  onClick(event: MouseEvent): void {
     if (
-      !this.elementRef.nativeElement.contains($event.target) &&
-      !this.wasClickedOnIgnoredElement($event)
+      !this.elementRef.nativeElement.contains(event.target) &&
+      !this.wasClickedOnIgnoredElement(event)
     ) {
       this.clickOutside.emit();
     }
   }
 
-  private wasClickedOnIgnoredElement($event: PointerEvent): boolean {
+  private wasClickedOnIgnoredElement(event: MouseEvent): boolean {
     if (this.ignoredElementsIds.length === 0) {
       return false;
     }
 
     return this.ignoredElementsIds.some((elementId) => {
       const element = this.document.getElementById(elementId);
-      const target = $event.target as Node;
+      const target = event.target as Node;
       const contains = element?.contains(target);
       return contains;
     });

diff --git a/adev/src/app/editor/embedded-editor.component.html b/adev/src/app/editor/embedded-editor.component.html
@@ -1,6 +1,6 @@
 <div class="adev-editor-container" #editorContainer>
   <as-split class="docs-editor" [direction]="splitDirection" restrictMove="true" gutterSize="5">
-    <as-split-area class="adev-left-side" [size]="50">
+    <as-split-area class="adev-left-side" size="50">
       <!-- Code Editor -->
       @if (!displayOnlyTerminal()) {
       <docs-tutorial-code-editor class="adev-tutorial-code-editor" />
@@ -15,13 +15,13 @@
       }
     </as-split-area>
 
-    <as-split-area [size]="50">
+    <as-split-area size="50">
       <!-- Preview, Terminal & Console -->
       @if (!displayOnlyTerminal()) {
       <as-split class="docs-right-side" direction="vertical" restrictMove="true" gutterSize="5">
         <!-- Preview Section: for larger screens -->
         @if (!displayPreviewInMatTabGroup()) {
-        <as-split-area [size]="50">
+        <as-split-area size="50">
           <!-- Preview Section: for larger screens -->
           <div class="adev-preview-section">
             <div class="adev-preview-header">
@@ -34,7 +34,7 @@
         </as-split-area>
         }
 
-        <as-split-area class="docs-editor-tabs-and-refresh" [size]="50">
+        <as-split-area class="docs-editor-tabs-and-refresh" size="50">
           <!-- Container to hide preview, console and footer when only the interactive terminal is used  -->
           <mat-tab-group class="docs-editor-tabs" animationDuration="0ms" mat-stretch-tabs="false">
             @if (displayPreviewInMatTabGroup()) {

diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.html b/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.html
@@ -22,7 +22,7 @@
   <select
     matTooltip="Select a frame to inspect with Angular Devtools"
     class="frame-selector"
-    (change)="emitSelectedFrame($event.target.value)"
+    (change)="emitSelectedFrame($event)"
   >
     @for (frame of frameManager.frames(); track frame.id) {
       <option [value]="frame.id" [selected]="frameManager.isSelectedFrame(frame)">

diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.ts
@@ -100,7 +100,8 @@ export class DevToolsTabsComponent {
     }
   }
 
-  emitSelectedFrame(frameId: string): void {
+  emitSelectedFrame(event: Event): void {
+    const frameId = (event.target as HTMLInputElement).value;
     const frame = this.frameManager.frames().find((frame) => frame.id === parseInt(frameId, 10));
     this.frameSelected.emit(frame!);
   }

diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.spec.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.spec.ts
@@ -92,7 +92,11 @@ describe('DevtoolsTabsComponent', () => {
     expect(contentScriptConnected).toEqual(jasmine.any(Function));
     contentScriptConnected(frameId, 'name', 'http://localhost:4200/url');
     spyOn(comp.frameSelected, 'emit');
-    comp.emitSelectedFrame('1');
+    comp.emitSelectedFrame({
+      target: {
+        value: '1',
+      },
+    } as unknown as Event);
 
     expect(comp.frameSelected.emit).toHaveBeenCalledWith(comp.frameManager.frames()[0]);
   });

diff --git a/...ts/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.html b/...ts/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.html
@@ -10,7 +10,7 @@
           (removeComponentHighlight)="removeComponentHighlight()"
           (toggleInspector)="toggleInspector.emit()"
           [forest]="forest()"
-          [currentSelectedElement]="currentSelectedElement()"
+          [currentSelectedElement]="currentSelectedElement()!"
           [showCommentNodes]="showCommentNodes()"
         />
       </as-split-area>
@@ -20,7 +20,7 @@
             (mouseLeaveNode)="unhighlight()"
             (mouseOverNode)="highlight($event)"
             (handleSelect)="handleSelect($event)"
-            [parents]="parents()"
+            [parents]="parents()!"
           />
         }
       </as-split-area>
@@ -29,7 +29,7 @@
   <as-split-area size="40" minSize="25" class="prop-split">
     <div class="property-tab-wrapper">
       <ng-property-tab
-        [currentSelectedElement]="currentSelectedElement()"
+        [currentSelectedElement]="currentSelectedElement()!"
         (inspect)="inspect($event)"
         (viewSource)="viewSource($event)"
       />

diff --git a/...src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.component.html b/...src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.component.html
@@ -7,6 +7,8 @@
 </ng-filter>
 <cdk-virtual-scroll-viewport class="tree-wrapper" [itemSize]="itemHeight">
   <ng-container *cdkVirtualFor="let node of dataSource; let idx = index">
+    @let hydration = node.hydration;
+
     <div
       [class]="{
         matched: isMatched(node),
@@ -48,7 +50,7 @@
           <span class="on-push">OnPush</span>
         }
 
-        @switch (node.hydration?.status) {
+        @switch (hydration?.status) {
           @case ('hydrated') {
             <mat-icon matTooltip="Hydrated" class="hydration">water_drop</mat-icon>
           }
@@ -64,19 +66,21 @@
           }
         }
       </div>
+
       @if (
         treeControl.isExpanded(node) &&
-        node.hydration?.status === 'mismatched' &&
-        (node.hydration.expectedNodeDetails || node.hydration.actualNodeDetails)
+        hydration &&
+        hydration.status === 'mismatched' &&
+        (hydration.expectedNodeDetails || hydration.actualNodeDetails)
       ) {
         <div class="hydration-error">
-          @if (node.hydration.expectedNodeDetails) {
+          @if (hydration.expectedNodeDetails) {
             <div>Expected Dom:</div>
-            <pre>{{node.hydration.expectedNodeDetails}}</pre>
+            <pre>{{hydration.expectedNodeDetails}}</pre>
           }
-          @if (node.hydration.actualNodeDetails) {
+          @if (hydration.actualNodeDetails) {
             <div>Actual Dom:</div>
-            <pre>{{node.hydration.actualNodeDetails}}</pre>
+            <pre>{{hydration.actualNodeDetails}}</pre>
           }
         </div>
       }

diff --git a/...ools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.component.ts b/...ools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.component.ts
@@ -23,7 +23,7 @@ export class FilterComponent {
 
   readonly hasMatched = input(false);
 
-  emitFilter(event: InputEvent): void {
+  emitFilter(event: Event): void {
     this.filter.emit((event.target as HTMLInputElement).value);
   }
 

diff --git a/...vtools-tabs/directive-explorer/property-tab/property-view/property-view-body.component.ts b/...vtools-tabs/directive-explorer/property-tab/property-view/property-view-body.component.ts
@@ -120,7 +120,7 @@ export class PropertyViewBodyComponent {
             </mat-chip-listbox>
           </mat-panel-description>
         </mat-expansion-panel-header>
-        <ng-resolution-path [path]="dependency().resolutionPath"></ng-resolution-path>
+        <ng-resolution-path [path]="dependency().resolutionPath!"></ng-resolution-path>
       </mat-expansion-panel>
     </mat-accordion>
   `,

diff --git a/.../devtools-tabs/directive-explorer/property-tab/property-view/property-view.component.html b/.../devtools-tabs/directive-explorer/property-tab/property-view/property-view.component.html
@@ -3,9 +3,9 @@
   (viewSource)="viewSource.emit()"
 ></ng-property-view-header>
 <ng-property-view-body
-  [controller]="controller()"
-  [directiveInputControls]="directiveInputControls()"
-  [directiveOutputControls]="directiveOutputControls()"
-  [directiveStateControls]="directiveStateControls()"
+  [controller]="controller()!"
+  [directiveInputControls]="directiveInputControls()!"
+  [directiveOutputControls]="directiveOutputControls()!"
+  [directiveStateControls]="directiveStateControls()!"
   (inspect)="inspect.emit($event)"
 ></ng-property-view-body>
diff --git a/.../src/lib/devtools-tabs/injector-tree/injector-providers/injector-providers.component.html b/.../src/lib/devtools-tabs/injector-tree/injector-providers/injector-providers.component.html
@@ -8,7 +8,7 @@ <h2 class="providers-title">Providers for {{ injector()?.name }}</h2>
           type="text"
           matInput
           placeholder="Provider token"
-          (input)="searchToken.set($event.target.value)"
+          (input)="searchToken.set($any($event.target).value)"
           [value]="searchToken()"
         />
         <mat-icon matSuffix (click)="searchToken.set('')">close</mat-icon>

diff --git a/...ols/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-tree.component.html b/...ols/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-tree.component.html
@@ -61,7 +61,7 @@ <h2>
         </as-split>
       </as-split-area>
       @if (selectedNode() && providers().length > 0) {
-        <as-split-area size="40" minSize="25">
+        <as-split-area size="40" [minSize]="25">
           <ng-injector-providers
             [injector]="selectedNode()!.data.injector"
             [providers]="providers()"

diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/file-api-service.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/file-api-service.ts
@@ -15,7 +15,7 @@ import {Subject} from 'rxjs';
 export class FileApiService {
   uploadedData: Subject<any> = new Subject();
 
-  publishFileUpload(parentEvent: InputEvent): void {
+  publishFileUpload(parentEvent: Event): void {
     const reader = new FileReader();
     reader.onload = (event) => {
       try {

diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.component.ts
@@ -110,7 +110,7 @@ export class ProfilerComponent {
     this._fileApiService.saveObjectAsJSON(fileToExport);
   }
 
-  importProfilerResults(event: InputEvent): void {
+  importProfilerResults(event: Event): void {
     this._fileApiService.publishFileUpload(event);
   }
 

diff --git a/.../ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/record-formatter.ts b/.../ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/record-formatter.ts
@@ -20,7 +20,7 @@ export interface AppEntry<T> {
 
 export interface GraphNode {
   toolTip: string;
-  style: unknown;
+  style: Record<string, unknown>;
   frame: ProfilerFrame;
 }
 

diff --git a/...ects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline-controls.component.html b/...ects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline-controls.component.html
@@ -5,7 +5,7 @@
       <input
         matInput
         class="filter-input"
-        (keyup)="filter.emit($event.target.value)"
+        (keyup)="filter.emit($any($event.target).value)"
         placeholder="duration: >30 source: click"
       />
     </mat-form-field>

diff --git a/...ools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline.component.html b/...ools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline.component.html
@@ -1,3 +1,5 @@
+@let frame = this.frame();
+
 @if (!hasFrames() && !visualizing()) {
   <ng-recording-modal />
 }
@@ -7,7 +9,7 @@
 <div class="timeline-wrapper">
   <ng-timeline-controls
     [class.hidden]="!hasFrames()"
-    [record]="frame()"
+    [record]="frame!"
     [empty]="!hasFrames()"
     [estimatedFrameRate]="currentFrameRate()"
     [(visualizationMode)]="visualizationMode"
@@ -20,12 +22,12 @@
     [graphData]="graphData()"
     (selectFrames)="selectFrames.set($event.indexes)"
   />
-  @if (hasFrames() && !frame()) {
+  @if (hasFrames() && !frame) {
     <p class="info">Select a bar to preview a particular change detection cycle.</p>
-  } @else if (hasFrames() && frame()) {
+  } @else if (hasFrames() && frame) {
     <ng-timeline-visualizer
       [visualizationMode]="visualizationMode()"
-      [frame]="frame()"
+      [frame]="frame"
       [changeDetection]="changeDetection()"
     />
   }

diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.component.ts
@@ -65,9 +65,9 @@ export class RouterTreeComponent {
     });
   }
 
-  searchRoutes($event: InputEvent) {
+  searchRoutes(event: Event) {
     this.filterRegex = new RegExp(
-      ($event?.target as HTMLInputElement)?.value?.toLowerCase() || DEFAULT_FILTER,
+      (event?.target as HTMLInputElement)?.value?.toLowerCase() || DEFAULT_FILTER,
     );
     this.renderGraph(this.routes());
   }

diff --git a/...ls/projects/ng-devtools/src/lib/vendor/angular-split/lib/component/splitArea.directive.ts b/...ls/projects/ng-devtools/src/lib/vendor/angular-split/lib/component/splitArea.directive.ts
@@ -12,7 +12,7 @@ export class SplitAreaDirective implements OnInit, OnDestroy {
   private _order: number | null = null;
 
   @Input()
-  set order(v: number | null) {
+  set order(v: number | string | null) {
     this._order = getInputPositiveNumber(v, null);
 
     this.split.updateArea(this, true, false);
@@ -27,7 +27,7 @@ export class SplitAreaDirective implements OnInit, OnDestroy {
   private _size: number | null = null;
 
   @Input()
-  set size(v: number | null) {
+  set size(v: number | string | null) {
     this._size = getInputPositiveNumber(v, null);
 
     this.split.updateArea(this, false, true);
@@ -42,7 +42,7 @@ export class SplitAreaDirective implements OnInit, OnDestroy {
   private _minSize: number | null = null;
 
   @Input()
-  set minSize(v: number | null) {
+  set minSize(v: number | string | null) {
     this._minSize = getInputPositiveNumber(v, null);
 
     this.split.updateArea(this, false, true);
@@ -57,7 +57,7 @@ export class SplitAreaDirective implements OnInit, OnDestroy {
   private _maxSize: number | null = null;
 
   @Input()
-  set maxSize(v: number | null) {
+  set maxSize(v: number | string | null) {
     this._maxSize = getInputPositiveNumber(v, null);
 
     this.split.updateArea(this, false, true);

diff --git a/goldens/public-api/common/index.api.md b/goldens/public-api/common/index.api.md
@@ -605,6 +605,7 @@ export class NgOptimizedImage implements OnInit, OnChanges {
     constructor();
     disableOptimizedSrcset: boolean;
     fill: boolean;
+    protected generatePlaceholder(placeholderInput: string | boolean): string | boolean | null;
     height: number | undefined;
     loaderParams?: {
         [key: string]: any;
@@ -633,6 +634,7 @@ export class NgOptimizedImage implements OnInit, OnChanges {
     placeholder?: string | boolean;
     placeholderConfig?: ImagePlaceholderConfig;
     priority: boolean;
+    protected shouldBlurPlaceholder(placeholderConfig?: ImagePlaceholderConfig): boolean;
     sizes?: string;
     width: number | undefined;
     // (undocumented)

diff --git a/modules/benchmarks/src/class_bindings/class_bindings.component.ts b/modules/benchmarks/src/class_bindings/class_bindings.component.ts
@@ -33,5 +33,5 @@ import {Component, Input} from '@angular/core';
 })
 export class ClassBindingsComponent {
   @Input() msg: string = '';
-  @Input() list: string[] | null = null;
+  @Input() list: {i: number; text: string}[] | null = null;
 }
diff --git a/modules/benchmarks/src/ng_template_outlet_context/ng2/BUILD.bazel b/modules/benchmarks/src/ng_template_outlet_context/ng2/BUILD.bazel
@@ -1,12 +1,11 @@
-load("//tools:defaults.bzl", "app_bundle", "http_server", "ng_module")
 load("@npm//@angular/build-tooling/bazel/benchmark/component_benchmark:benchmark_test.bzl", "benchmark_test")
+load("//tools:defaults.bzl", "app_bundle", "http_server", "ng_module")
 
 package(default_visibility = ["//modules/benchmarks:__subpackages__"])
 
 ng_module(
     name = "ng2",
     srcs = glob(["*.ts"]),
-    strict_templates = True,
     tsconfig = "//modules/benchmarks:tsconfig-build.json",
     deps = [
         "//modules/benchmarks/src:util_lib",