diff --git a/patches/@bazel+concatjs+5.8.1.patch b/patches/@bazel+concatjs+5.8.1.patch
index 27370ef39d4..7cca25b866f 100644
--- a/patches/@bazel+concatjs+5.8.1.patch
+++ b/patches/@bazel+concatjs+5.8.1.patch
@@ -81,6 +81,40 @@ index b01c999..86d61d4 100755
      module_mappings = get_module_mappings(ctx.label, ctx.attr, srcs = srcs)
  
      # To determine the path for auto-imports, TypeScript's language service
+diff --git a/node_modules/@bazel/concatjs/internal/tsc_wrapped/tsconfig.js b/node_modules/@bazel/concatjs/internal/tsc_wrapped/tsconfig.js
+index e049d15..9ebeec4 100755
+--- a/node_modules/@bazel/concatjs/internal/tsc_wrapped/tsconfig.js
++++ b/node_modules/@bazel/concatjs/internal/tsc_wrapped/tsconfig.js
+@@ -66,6 +66,13 @@ function parseTsconfig(tsconfigFile, host = ts.sys) {
+                     : existingBazelOpts.googmodule, devmodeTargetOverride: isUndefined(existingBazelOpts.devmodeTargetOverride)
+                     ? newBazelBazelOpts.devmodeTargetOverride
+                     : existingBazelOpts.devmodeTargetOverride });
++            // Same reasoning as the bazelOptions merge above, applied to the top-level
++            // "angularCompilerOptions" block. Without this the block in the root
++            // tsconfig.json is silently dropped, because only the generated per-target
++            // tsconfig is ever inspected. The nearer config wins, like "extends" does.
++            if (config.angularCompilerOptions) {
++                mergedConfig.angularCompilerOptions = Object.assign({}, config.angularCompilerOptions, existingConfig.angularCompilerOptions || {});
++            }
+         }
+         if (config.extends) {
+             let extendedConfigPath = resolveNormalizedPath(path.dirname(configFile), config.extends);
+@@ -145,6 +152,15 @@ function parseTsconfig(tsconfigFile, host = ts.sys) {
+         bazelOpts.nodeModulesPrefix =
+             resolveNormalizedPath(options.rootDir, bazelOpts.nodeModulesPrefix);
+     }
++    // NgTscPlugin is built from bazelOptions.angularCompilerOptions, so user options
++    // carried up the extends chain above must be folded in here or the Angular compiler
++    // never sees them. The guard matters: that object already existing is what marks a
++    // target as use_angular_plugin, so creating it here would load the Angular plugin
++    // for plain ts_library targets too. Bazel's own keys win, being build mechanics
++    // rather than user choice.
++    if (bazelOpts.angularCompilerOptions && config.angularCompilerOptions) {
++        bazelOpts.angularCompilerOptions = Object.assign({}, config.angularCompilerOptions, bazelOpts.angularCompilerOptions);
++    }
+     if (bazelOpts.angularCompilerOptions && bazelOpts.angularCompilerOptions.assets) {
+         bazelOpts.angularCompilerOptions.assets = bazelOpts.angularCompilerOptions.assets.map(f => resolveNormalizedPath(options.rootDir, f));
+     }
 diff --git a/node_modules/@bazel/concatjs/package.json b/node_modules/@bazel/concatjs/package.json
 index dbc7cee..1129289 100755
 --- a/node_modules/@bazel/concatjs/package.json
diff --git a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/debug_tensor_value/debug_tensor_value_component.ts b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/debug_tensor_value/debug_tensor_value_component.ts
index b0e86b71c8e..a0bddb47356 100644
--- a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/debug_tensor_value/debug_tensor_value_component.ts
+++ b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/debug_tensor_value/debug_tensor_value_component.ts
@@ -278,7 +278,7 @@ export class DebugTensorHasInfOrNaNComponent {
     </debug-tensor-has-inf-or-nan>
     <debug-tensor-numeric-breakdown
       *ngIf="debugTensorValue.size !== undefined"
-      size="{{ debugTensorValue.size }}"
+      [size]="debugTensorValue.size"
       [numNegativeInfs]="debugTensorValue.numNegativeInfs"
       [numPositiveInfs]="debugTensorValue.numPositiveInfs"
       [numNaNs]="debugTensorValue.numNaNs"
diff --git a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/execution_data/execution_data_component.ts b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/execution_data/execution_data_component.ts
index a9cfa2b9202..ea07d7883c9 100644
--- a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/execution_data/execution_data_component.ts
+++ b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/execution_data/execution_data_component.ts
@@ -42,7 +42,7 @@ export class ExecutionDataComponent {
 
   /** Debug tensor values under non-FULL_TENSOR debug modes. */
   @Input()
-  debugTensorValues: number[][] | null = null;
+  debugTensorValues: Array<number[] | null> | null = null;
 
   /**
    * Dtypes of the tensors.
diff --git a/tensorboard/webapp/core/views/layout_container.ts b/tensorboard/webapp/core/views/layout_container.ts
index 0a37b546eea..990058810d1 100644
--- a/tensorboard/webapp/core/views/layout_container.ts
+++ b/tensorboard/webapp/core/views/layout_container.ts
@@ -41,7 +41,7 @@ import {
       <mat-icon svgIcon="expand_more_24px"></mat-icon>
     </button>
     <nav
-      *ngIf="(width$ | async) > 0"
+      *ngIf="((width$ | async) ?? 0) > 0"
       class="sidebar"
       [style.width.%]="width$ | async"
       [style.minWidth.px]="MINIMUM_SIDEBAR_WIDTH_IN_PX"
@@ -70,7 +70,7 @@ import {
       </div>
     </nav>
     <div
-      *ngIf="(width$ | async) > 0"
+      *ngIf="((width$ | async) ?? 0) > 0"
       class="resizer"
       (mousedown)="resizeGrabbed()"
     ></div>
diff --git a/tensorboard/webapp/customization/customization_test.ts b/tensorboard/webapp/customization/customization_test.ts
index e7f6d5d593e..0069634ca91 100644
--- a/tensorboard/webapp/customization/customization_test.ts
+++ b/tensorboard/webapp/customization/customization_test.ts
@@ -15,8 +15,10 @@ limitations under the License.
 import {
   ChangeDetectionStrategy,
   Component,
+  Inject,
   NgModule,
   Optional,
+  Type,
 } from '@angular/core';
 import {TestBed} from '@angular/core/testing';
 import {CustomizationModule} from './customization_module';
@@ -43,7 +45,9 @@ export class CustomizableComponentType {}
 })
 export class ParentComponent {
   constructor(
-    @Optional() readonly customizableComponent: CustomizableComponentType
+    @Inject(CustomizableComponentType)
+    @Optional()
+    readonly customizableComponent: Type<unknown>
   ) {}
 }
 
diff --git a/tensorboard/webapp/feature_flag/views/feature_flag_dialog_component.ng.html b/tensorboard/webapp/feature_flag/views/feature_flag_dialog_component.ng.html
index b7760da39a7..1e391749a5c 100644
--- a/tensorboard/webapp/feature_flag/views/feature_flag_dialog_component.ng.html
+++ b/tensorboard/webapp/feature_flag/views/feature_flag_dialog_component.ng.html
@@ -63,7 +63,9 @@ <h2 class="warning">WARNING: EXPERIMENTAL FEATURES AHEAD!</h2>
           </mat-select>
         </ng-template>
         <ng-template #unsupportedBlock>
-          <td>Unsupported By UI {{formatFlagValue(flagStatus.value)}}</td>
+          <td>
+            Unsupported By UI {{formatFlagValue(flagStatus.defaultValue)}}
+          </td>
         </ng-template>
       </tr>
     </ng-container>
diff --git a/tensorboard/webapp/feature_flag/views/feature_flag_dialog_test.ts b/tensorboard/webapp/feature_flag/views/feature_flag_dialog_test.ts
index 8f914dd0708..88bbaf7ddbc 100644
--- a/tensorboard/webapp/feature_flag/views/feature_flag_dialog_test.ts
+++ b/tensorboard/webapp/feature_flag/views/feature_flag_dialog_test.ts
@@ -186,7 +186,7 @@ describe('feature_flag_dialog_container', () => {
     expect(dataCells.length).toEqual(3);
     const selectors = component.querySelectorAll('mat-select');
     expect(selectors.length).toEqual(1);
-    expect(dataCells[2].innerText).toBe('Unsupported By UI - null');
+    expect(dataCells[2].innerText).toBe('Unsupported By UI - []');
   });
 
   describe('formatFlagValue', () => {
diff --git a/tensorboard/webapp/header/plugin_selector_component.ng.html b/tensorboard/webapp/header/plugin_selector_component.ng.html
index 8f61443f1a9..6035ce16420 100644
--- a/tensorboard/webapp/header/plugin_selector_component.ng.html
+++ b/tensorboard/webapp/header/plugin_selector_component.ng.html
@@ -35,11 +35,7 @@
     </ng-template>
   </mat-tab>
 </mat-tab-group>
-<mat-form-field
-  floatLabel="never"
-  *ngIf="disabledPlugins.length > 0"
-  subscriptSizing="dynamic"
->
+<mat-form-field *ngIf="disabledPlugins.length > 0" subscriptSizing="dynamic">
   <mat-label>Inactive</mat-label>
   <mat-select
     [value]="selectedPlugin"
diff --git a/tensorboard/webapp/metrics/views/card_renderer/data_download_dialog_component.ng.html b/tensorboard/webapp/metrics/views/card_renderer/data_download_dialog_component.ng.html
index 4900a561526..af9cc394066 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/data_download_dialog_component.ng.html
+++ b/tensorboard/webapp/metrics/views/card_renderer/data_download_dialog_component.ng.html
@@ -41,7 +41,7 @@ <h2>
         cdkFocusInitial
         required
         [value]="selectedRunId || ''"
-        (change)="runSelected.emit($event.target.value)"
+        (change)="runSelected.emit($any($event.target).value)"
       >
         <option selected [value]="''">-</option>
         <!-- There is no guarantee that the run.name is unique but run.id is.-->
diff --git a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.ng.html b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.ng.html
index 451daf40c3b..ed35ca80e2b 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.ng.html
+++ b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.ng.html
@@ -121,7 +121,6 @@
       [tooltipTemplate]="tooltip"
       [useDarkMode]="useDarkMode"
       [userViewBox]="userViewBox"
-      (onViewBoxOverridden)="isViewBoxOverridden = $event"
       (viewBoxChanged)="onLineChartZoom.emit($event)"
       [customVisTemplate]="lineChartCustomVis"
       [customChartOverlayTemplate]="lineChartCustomXAxisVis"
@@ -215,7 +214,6 @@
       (editColumnHeaders)="editColumnHeaders.emit($event)"
       (addColumn)="addColumn.emit($event)"
       (removeColumn)="removeColumn.emit($event)"
-      (hideColumn)="hideColumn.emit($event)"
       (addFilter)="addFilter.emit($event)"
       (loadAllColumns)="loadAllColumns.emit()"
     >
@@ -269,7 +267,7 @@
         xScale.forward(
           viewExtent.x,
           [0, domDim.width],
-          stepOrLinkedTimeSelection.end?.step
+          stepOrLinkedTimeSelection.end!.step
         ) + 'px'
       "
     ></div>
diff --git a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.ts b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.ts
index 594cd977a45..8cfd926a687 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.ts
+++ b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.ts
@@ -53,6 +53,7 @@ import {
 import {
   MinMaxStep,
   ScalarCardDataSeries,
+  ScalarCardPoint,
   ScalarCardSeriesMetadata,
   ScalarCardSeriesMetadataMap,
 } from './scalar_card_types';
@@ -72,7 +73,8 @@ import {RunToHparamMap} from '../../../runs/types';
 type ScalarTooltipDatum = TooltipDatum<
   ScalarCardSeriesMetadata & {
     closest: boolean;
-  }
+  },
+  ScalarCardPoint
 >;
 
 @Component({
@@ -89,7 +91,7 @@ export class ScalarCardComponent<Downloader> {
 
   @Input() cardId!: string;
   @Input() chartMetadataMap!: ScalarCardSeriesMetadataMap;
-  @Input() cardState?: CardState;
+  @Input() cardState?: Partial<CardState>;
   @Input() DataDownloadComponent!: ComponentType<Downloader>;
   @Input() dataSeries!: ScalarCardDataSeries[];
   @Input() ignoreOutliers!: boolean;
@@ -154,7 +156,6 @@ export class ScalarCardComponent<Downloader> {
   constructor(private readonly ref: ElementRef, private dialog: MatDialog) {}
 
   yScaleType = ScaleType.LINEAR;
-  isViewBoxOverridden: boolean = false;
   additionalItemsCount = 0;
 
   toggleYScaleType() {
@@ -194,7 +195,7 @@ export class ScalarCardComponent<Downloader> {
   }
 
   getCursorAwareTooltipData(
-    tooltipData: TooltipDatum<ScalarCardSeriesMetadata>[],
+    tooltipData: TooltipDatum<ScalarCardSeriesMetadata, ScalarCardPoint>[],
     cursorLocationInDataCoord: {x: number; y: number},
     cursorLocation: {x: number; y: number}
   ): ScalarTooltipDatum[] {
diff --git a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_data_table.ng.html b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_data_table.ng.html
index a2a49f95304..42dd085466d 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_data_table.ng.html
+++ b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_data_table.ng.html
@@ -47,7 +47,7 @@
           <tb-data-table-content-cell
             *ngIf="header.enabled && (header.type !== ColumnHeaderType.SMOOTHED || smoothingEnabled)"
             [header]="header"
-            [datum]="dataRow[header.name]"
+            [datum]="$any(dataRow[header.name])"
           >
             <div
               *ngIf="header.type === ColumnHeaderType.COLOR"
diff --git a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_fob_controller.ts b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_fob_controller.ts
index 371477ab284..7d676db9561 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_fob_controller.ts
+++ b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_fob_controller.ts
@@ -74,9 +74,9 @@ export class ScalarCardFobController {
   };
   prospectiveStep: number | null = null;
 
-  getAxisPositionFromStartStep() {
+  getAxisPositionFromStartStep(): number {
     if (!this.timeSelection) {
-      return '';
+      return 0;
     }
     return this.scale.forward(
       this.minMaxHorizontalViewExtend,
diff --git a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_line_chart_component.ng.html b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_line_chart_component.ng.html
index 98dd43648da..4faea6903d4 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_line_chart_component.ng.html
+++ b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_line_chart_component.ng.html
@@ -27,7 +27,6 @@
   [useDarkMode]="useDarkMode"
   [userViewBox]="userViewBox"
   [disableTooltip]="disableTooltip"
-  (onViewBoxOverridden)="isViewBoxOverridden = $event"
   (viewBoxChanged)="onLineChartZoom.emit($event)"
   [customVisTemplate]="lineChartCustomVis"
   [customChartOverlayTemplate]="lineChartCustomXAxisVis"
@@ -64,7 +63,7 @@
         xScale.forward(
           viewExtent.x,
           [0, domDim.width],
-          stepOrLinkedTimeSelection.end?.step
+          stepOrLinkedTimeSelection.end!.step
         ) + 'px'
       "
     ></div>
diff --git a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_line_chart_component.ts b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_line_chart_component.ts
index 93afad7d0c6..96004cdb451 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_line_chart_component.ts
+++ b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_line_chart_component.ts
@@ -90,8 +90,6 @@ export class ScalarCardLineChartComponent {
 
   constructor(private readonly changeDetector: ChangeDetectorRef) {}
 
-  isViewBoxOverridden: boolean = false;
-
   resetDomain() {
     if (this.lineChart) {
       this.lineChart.viewBoxReset();
diff --git a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_line_chart_container.ts b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_line_chart_container.ts
index c96008a33b1..75bb48c42e6 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_line_chart_container.ts
+++ b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_line_chart_container.ts
@@ -110,7 +110,7 @@ export class ScalarCardLineChartContainer
       ? of(this.xAxisType)
       : this.store.select(getMetricsXAxisType);
     this.xScaleType$ = this.xAxisType
-      ? ScaleType.LINEAR
+      ? of(ScaleType.LINEAR)
       : this.store.select(getMetricsXAxisType).pipe(
           map((xAxisType) => {
             switch (xAxisType) {
diff --git a/tensorboard/webapp/metrics/views/main_view/card_grid_component.ng.html b/tensorboard/webapp/metrics/views/main_view/card_grid_component.ng.html
index 9df3660a0dd..b361af79971 100644
--- a/tensorboard/webapp/metrics/views/main_view/card_grid_component.ng.html
+++ b/tensorboard/webapp/metrics/views/main_view/card_grid_component.ng.html
@@ -57,7 +57,7 @@
         i18n-aria-label="A button that sets a group to the previous page."
         aria-label="Previous page"
         [disabled]="pageIndex === 0"
-        (click)="handlePageChange(pageIndex - 1, $event.target)"
+        (click)="handlePageChange(pageIndex - 1, $any($event.target))"
       >
         Previous
       </button>
@@ -84,7 +84,7 @@
           aria-label="Next page"
           class="next pagination-button"
           [disabled]="pageIndex + 1 >= numPages"
-          (click)="handlePageChange(pageIndex + 1, $event.target)"
+          (click)="handlePageChange(pageIndex + 1, $any($event.target))"
         >
           Next
         </button>
diff --git a/tensorboard/webapp/metrics/views/main_view/card_grid_component.ts b/tensorboard/webapp/metrics/views/main_view/card_grid_component.ts
index af51a278514..e46b829569a 100644
--- a/tensorboard/webapp/metrics/views/main_view/card_grid_component.ts
+++ b/tensorboard/webapp/metrics/views/main_view/card_grid_component.ts
@@ -53,6 +53,7 @@ export class CardGridComponent {
   @Input() cardObserver!: CardObserver;
   @Input() showPaginationControls!: boolean;
   @Input() cardStateMap!: CardStateMap;
+  @Input() groupName: string | null = null;
 
   @Output() pageIndexChanged = new EventEmitter<number>();
 
diff --git a/tensorboard/webapp/metrics/views/main_view/card_grid_container.ts b/tensorboard/webapp/metrics/views/main_view/card_grid_container.ts
index 561ecb165d0..3bf7394ab88 100644
--- a/tensorboard/webapp/metrics/views/main_view/card_grid_container.ts
+++ b/tensorboard/webapp/metrics/views/main_view/card_grid_container.ts
@@ -46,6 +46,7 @@ import {CardIdWithMetadata} from '../metrics_view_types';
       [cardMinWidth]="cardMinWidth$ | async"
       [cardObserver]="cardObserver"
       [cardStateMap]="cardStateMap$ | async"
+      [groupName]="groupName"
       (pageIndexChanged)="onPageIndexChanged($event)"
     >
     </metrics-card-grid-component>
diff --git a/tensorboard/webapp/metrics/views/main_view/filter_input_component.ng.html b/tensorboard/webapp/metrics/views/main_view/filter_input_component.ng.html
index 2239c416707..0031dd38bdc 100644
--- a/tensorboard/webapp/metrics/views/main_view/filter_input_component.ng.html
+++ b/tensorboard/webapp/metrics/views/main_view/filter_input_component.ng.html
@@ -18,7 +18,7 @@
   <tb-filter-input
     placeholder="Filter tags (regex)"
     [value]="regexFilterValue"
-    (input)="onRegexFilterValueChange.emit($event.target.value)"
+    (input)="onRegexFilterValueChange.emit($any($event.target).value)"
     [matAutocomplete]="filterMatches"
   ></tb-filter-input>
   <mat-icon
@@ -34,13 +34,13 @@
   class="tag-options"
 >
   <mat-option
-    *ngFor="let completion of completions?.slice(0, 25)"
+    *ngFor="let completion of completions.slice(0, 25)"
     [value]="completion"
     class="option"
     [attr.title]="completion"
     >{{ completion }}</mat-option
   >
-  <div *ngIf="completions?.length > 25" class="and-more">
+  <div *ngIf="completions.length > 25" class="and-more">
     <em>and {{completions.length - 25 | number}} more tags matched</em>
   </div>
 </mat-autocomplete>
diff --git a/tensorboard/webapp/metrics/views/main_view/filter_input_container.ts b/tensorboard/webapp/metrics/views/main_view/filter_input_container.ts
index 4a40c3b653a..77a3e0ba7b6 100644
--- a/tensorboard/webapp/metrics/views/main_view/filter_input_container.ts
+++ b/tensorboard/webapp/metrics/views/main_view/filter_input_container.ts
@@ -15,7 +15,7 @@ limitations under the License.
 import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {Store} from '@ngrx/store';
 import {Observable} from 'rxjs';
-import {combineLatestWith, filter, map} from 'rxjs/operators';
+import {combineLatestWith, filter, map, startWith} from 'rxjs/operators';
 import {State} from '../../../app_state';
 import {
   getMetricsTagFilter,
@@ -79,7 +79,8 @@ export class MetricsFilterInputContainer {
       filter(([, tagFilterRegex]) => tagFilterRegex !== null),
       map(([tags, tagFilterRegex]) => {
         return tags.filter((tag: string) => tagFilterRegex!.test(tag));
-      })
+      }),
+      startWith([] as string[])
     );
   }
 
diff --git a/tensorboard/webapp/metrics/views/main_view/pinned_view_container.ts b/tensorboard/webapp/metrics/views/main_view/pinned_view_container.ts
index 0fa8836016a..2b49ea16d8f 100644
--- a/tensorboard/webapp/metrics/views/main_view/pinned_view_container.ts
+++ b/tensorboard/webapp/metrics/views/main_view/pinned_view_container.ts
@@ -15,7 +15,7 @@ limitations under the License.
 import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
 import {Store} from '@ngrx/store';
 import {Observable} from 'rxjs';
-import {skip, startWith} from 'rxjs/operators';
+import {map, skip, startWith} from 'rxjs/operators';
 import {State} from '../../../app_state';
 import {getEnableGlobalPins} from '../../../selectors';
 import {DeepReadonly} from '../../../util/types';
@@ -44,7 +44,10 @@ export class PinnedViewContainer {
   constructor(private readonly store: Store<State>) {
     this.cardIdsWithMetadata$ = this.store
       .select(getPinnedCardsWithMetadata)
-      .pipe(startWith([]));
+      .pipe(
+        map((cards) => cards as DeepReadonly<CardIdWithMetadata>[]),
+        startWith([] as DeepReadonly<CardIdWithMetadata>[])
+      );
     this.lastPinnedCardTime$ = this.store.select(getLastPinnedCardTime).pipe(
       // Ignore the first value on component load, only reacting to new
       // pins after page load.
@@ -53,7 +56,7 @@ export class PinnedViewContainer {
     this.globalPinsEnabled$ = this.store.select(getEnableGlobalPins);
   }
 
-  readonly cardIdsWithMetadata$: Observable<DeepReadonly<CardIdWithMetadata[]>>;
+  readonly cardIdsWithMetadata$: Observable<DeepReadonly<CardIdWithMetadata>[]>;
 
   readonly lastPinnedCardTime$;
 
diff --git a/tensorboard/webapp/metrics/views/right_pane/settings_view_component.ng.html b/tensorboard/webapp/metrics/views/right_pane/settings_view_component.ng.html
index 39a65b856a3..7ae39b59d03 100644
--- a/tensorboard/webapp/metrics/views/right_pane/settings_view_component.ng.html
+++ b/tensorboard/webapp/metrics/views/right_pane/settings_view_component.ng.html
@@ -149,7 +149,7 @@ <h3 class="section-title">Scalars</h3>
   <div class="control-row scalars-ignore-outliers">
     <mat-checkbox
       [checked]="ignoreOutliers"
-      (change)="ignoreOutliersChanged.emit($event.checked)"
+      (change)="ignoreOutliersChanged.emit()"
       >Ignore outliers in chart scaling</mat-checkbox
     >
   </div>
@@ -157,7 +157,7 @@ <h3 class="section-title">Scalars</h3>
   <div class="control-row scalars-limit-tooltip-rows">
     <mat-checkbox
       [checked]="isTooltipRowsLimitEnabled"
-      (change)="isTooltipRowsLimitEnabledChanged.emit($event.checked)"
+      (change)="isTooltipRowsLimitEnabledChanged.emit()"
       >Limit tooltip rows to</mat-checkbox
     >
     <input
@@ -269,7 +269,7 @@ <h3 class="section-title">Images</h3>
   <div class="control-row image-show-actual-size">
     <mat-checkbox
       [checked]="imageShowActualSize"
-      (change)="imageShowActualSizeChanged.emit($event.checked)"
+      (change)="imageShowActualSizeChanged.emit()"
       >Show actual image size</mat-checkbox
     >
   </div>
diff --git a/tensorboard/webapp/metrics/views/right_pane/settings_view_component.ts b/tensorboard/webapp/metrics/views/right_pane/settings_view_component.ts
index dd2383cf2d3..d18b352e22e 100644
--- a/tensorboard/webapp/metrics/views/right_pane/settings_view_component.ts
+++ b/tensorboard/webapp/metrics/views/right_pane/settings_view_component.ts
@@ -80,7 +80,7 @@ export class SettingsViewComponent {
   @Output() stepSelectorToggled = new EventEmitter<void>();
   @Output() rangeSelectionToggled = new EventEmitter<void>();
   @Output() onSlideOutToggled = new EventEmitter<void>();
-  @Output() onEnableSavingPinsToggled = new EventEmitter<void>();
+  @Output() onEnableSavingPinsToggled = new EventEmitter<boolean>();
 
   @Input() isImageSupportEnabled!: boolean;
 
diff --git a/tensorboard/webapp/plugins/plugins_component.ng.html b/tensorboard/webapp/plugins/plugins_component.ng.html
index a8a6dfa7e55..c0f4269715f 100644
--- a/tensorboard/webapp/plugins/plugins_component.ng.html
+++ b/tensorboard/webapp/plugins/plugins_component.ng.html
@@ -19,7 +19,7 @@
   [ngClass]="{
     'plugins': true,
     'is-first-party-plugin': (
-      activeKnownPlugin?.loading_mechanism.type !== LoadingMechanismType.IFRAME
+      activeKnownPlugin?.loading_mechanism?.type !== LoadingMechanismType.IFRAME
     )
   }"
 >
diff --git a/tensorboard/webapp/runs/views/runs_table/runs_data_table.ng.html b/tensorboard/webapp/runs/views/runs_table/runs_data_table.ng.html
index 9845b75c605..5cc1d95354f 100644
--- a/tensorboard/webapp/runs/views/runs_table/runs_data_table.ng.html
+++ b/tensorboard/webapp/runs/views/runs_table/runs_data_table.ng.html
@@ -71,7 +71,7 @@
           <ng-container *ngFor="let header of extendHeaders(headers)">
             <tb-data-table-content-cell
               [header]="header"
-              [datum]="dataRow[header.name]"
+              [datum]="$any(dataRow[header.name])"
               [ngClass]="['table-column-' + header.name]"
             >
               <ng-container [ngSwitch]="header.name">
@@ -79,9 +79,9 @@
                   <button
                     class="run-color-swatch"
                     [style.background]="dataRow['color']"
-                    [colorPicker]="dataRow['color']"
+                    [colorPicker]="$any(dataRow['color'])"
                     [cpDialogDisplay]="'popup'"
-                    [cpPositionOffset]="-20"
+                    [cpPositionOffset]="'-20'"
                     [cpUseRootViewContainer]="true"
                     [cpOutputFormat]="'hex'"
                     (colorPickerChange)="onRunColorChange.emit({runId: dataRow.id, newColor: $event})"
@@ -95,8 +95,8 @@
                 </div>
                 <span *ngSwitchCase="'experimentAlias'">
                   <tb-experiment-alias
-                    [alias]="dataRow['experimentAlias']"
-                    [title]="dataRow['experimentName']"
+                    [alias]="$any(dataRow['experimentAlias'])"
+                    [title]="$any(dataRow['experimentName'])"
                   ></tb-experiment-alias>
                 </span>
               </ng-container>
diff --git a/tensorboard/webapp/widgets/card_fob/card_fob_component.ts b/tensorboard/webapp/widgets/card_fob/card_fob_component.ts
index 1e6da00fbb7..5f194b2b37d 100644
--- a/tensorboard/webapp/widgets/card_fob/card_fob_component.ts
+++ b/tensorboard/webapp/widgets/card_fob/card_fob_component.ts
@@ -58,7 +58,7 @@ export class CardFobComponent {
     if (event.key === ' ' || isNaN(Number(charcode))) event.preventDefault();
   }
 
-  stepTyped(event: InputEvent) {
+  stepTyped(event: Event) {
     event.preventDefault();
     const stepString = (event.target! as HTMLInputElement).innerText;
 
diff --git a/tensorboard/webapp/widgets/card_fob/card_fob_controller_component.ng.html b/tensorboard/webapp/widgets/card_fob/card_fob_controller_component.ng.html
index 7171c19b37c..23fd9ab5c97 100644
--- a/tensorboard/webapp/widgets/card_fob/card_fob_controller_component.ng.html
+++ b/tensorboard/webapp/widgets/card_fob/card_fob_controller_component.ng.html
@@ -52,7 +52,7 @@
     ></div>
     <card-fob
       class="startFob"
-      [allowRemoval]="allowFobRemoval ? true : timeSelection.end"
+      [allowRemoval]="allowFobRemoval || timeSelection.end !== null"
       [ngClass]="isVertical() ? 'vertical-fob' : 'horizontal-fob'"
       [step]="timeSelection.start.step"
       (mousedown)="startDrag(Fob.START, TimeSelectionAffordance.FOB, $event)"
diff --git a/tensorboard/webapp/widgets/content_wrapping_input/content_wrapping_input_component.ts b/tensorboard/webapp/widgets/content_wrapping_input/content_wrapping_input_component.ts
index 1341492e234..a4f617bef47 100644
--- a/tensorboard/webapp/widgets/content_wrapping_input/content_wrapping_input_component.ts
+++ b/tensorboard/webapp/widgets/content_wrapping_input/content_wrapping_input_component.ts
@@ -159,7 +159,7 @@ export class ContentWrappingInputComponent
     this.updateInputWidth();
   }
 
-  onInput(event: InputEvent) {
+  onInput(event: Event) {
     const prevValue = this.internalValue;
     this.internalValue = this.inputElRef.nativeElement.value;
     if (this.internalValue !== prevValue) {
diff --git a/tensorboard/webapp/widgets/data_table/context_menu_component.ng.html b/tensorboard/webapp/widgets/data_table/context_menu_component.ng.html
index 404afea017a..40b90046ae0 100644
--- a/tensorboard/webapp/widgets/data_table/context_menu_component.ng.html
+++ b/tensorboard/webapp/widgets/data_table/context_menu_component.ng.html
@@ -27,20 +27,20 @@
   <button
     *ngIf="contextMenuHeader?.sortable &&
     sortingInfo.order === SortingOrder.ASCENDING &&
-    sortingInfo.name === contextMenuHeader?.name"
+    sortingInfo.name === contextMenuHeader!.name"
     class="context-menu-button sort-button"
     mat-button
-    (click)="sortByHeader.emit(contextMenuHeader?.name)"
+    (click)="sortByHeader.emit(contextMenuHeader!.name)"
   >
     <mat-icon svgIcon="arrow_downward_24px"></mat-icon>Sort Descending
   </button>
   <button
     *ngIf="contextMenuHeader?.sortable &&
     (sortingInfo.order !== SortingOrder.ASCENDING ||
-    sortingInfo.name !== contextMenuHeader?.name)"
+    sortingInfo.name !== contextMenuHeader!.name)"
     class="context-menu-button sort-button"
     mat-button
-    (click)="sortByHeader.emit(contextMenuHeader?.name)"
+    (click)="sortByHeader.emit(contextMenuHeader!.name)"
   >
     <mat-icon svgIcon="arrow_upward_24px"></mat-icon>Sort Ascending
   </button>
@@ -56,7 +56,7 @@
     mat-button
     *ngIf="canContextMenuInsert()"
     class="context-menu-button"
-    (click)="openColumnSelector.emit({event: $event, insertTo: Side.LEFT, isSubMenu: true})"
+    (click)="openColumnSelector.emit({event: $event, insertTo: Side.LEFT, isSubmenu: true})"
   >
     <mat-icon svgIcon="add_24px"></mat-icon>Insert Column Left
   </button>
@@ -64,7 +64,7 @@
     mat-button
     *ngIf="canContextMenuInsert()"
     class="context-menu-button"
-    (click)="openColumnSelector.emit({event: $event, insertTo: Side.RIGHT, isSubMenu: true})"
+    (click)="openColumnSelector.emit({event: $event, insertTo: Side.RIGHT, isSubmenu: true})"
   >
     <mat-icon svgIcon="add_24px"></mat-icon>Insert Column Right
   </button>
diff --git a/tensorboard/webapp/widgets/data_table/filter_dialog_component.ng.html b/tensorboard/webapp/widgets/data_table/filter_dialog_component.ng.html
index a5e37181010..74eed5114df 100644
--- a/tensorboard/webapp/widgets/data_table/filter_dialog_component.ng.html
+++ b/tensorboard/webapp/widgets/data_table/filter_dialog_component.ng.html
@@ -35,7 +35,7 @@
         class="discrete-value"
       >
         <mat-checkbox
-          [checked]="filter.filterValues.includes(value)"
+          [checked]="$any(filter.filterValues).includes(value)"
           (change)="discreteFilterChanged.emit(value)"
           ><span>{{ value }}</span></mat-checkbox
         >
diff --git a/tensorboard/webapp/widgets/filter_input/filter_input_component.ts b/tensorboard/webapp/widgets/filter_input/filter_input_component.ts
index 74a52988980..2386d0134aa 100644
--- a/tensorboard/webapp/widgets/filter_input/filter_input_component.ts
+++ b/tensorboard/webapp/widgets/filter_input/filter_input_component.ts
@@ -18,7 +18,10 @@ import {
   Input,
   ViewChild,
 } from '@angular/core';
-import {MatAutocompleteTrigger} from '@angular/material/autocomplete';
+import {
+  MatAutocomplete,
+  MatAutocompleteTrigger,
+} from '@angular/material/autocomplete';
 
 /**
  * A text input field intended for filtering items.
@@ -36,7 +39,7 @@ import {MatAutocompleteTrigger} from '@angular/material/autocomplete';
       type="text"
       autocomplete="off"
       [placeholder]="placeholder"
-      [matAutocomplete]="matAutocomplete"
+      [matAutocomplete]="matAutocomplete!"
       [matAutocompleteDisabled]="!matAutocomplete"
       [value]="value"
       (keyup)="onInputKeyUp($event)"
@@ -46,7 +49,7 @@ import {MatAutocompleteTrigger} from '@angular/material/autocomplete';
 })
 export class FilterInputComponent {
   @Input() value: string = '';
-  @Input() matAutocomplete?: string;
+  @Input() matAutocomplete?: MatAutocomplete;
   @Input() placeholder: string = '';
 
   @ViewChild(MatAutocompleteTrigger)
diff --git a/tensorboard/webapp/widgets/histogram/histogram_card_fob_controller.ts b/tensorboard/webapp/widgets/histogram/histogram_card_fob_controller.ts
index e770597729d..cee5b09ca94 100644
--- a/tensorboard/webapp/widgets/histogram/histogram_card_fob_controller.ts
+++ b/tensorboard/webapp/widgets/histogram/histogram_card_fob_controller.ts
@@ -21,6 +21,7 @@ import {
   AxisDirection,
   CardFobGetStepFromPositionHelper,
   TimeSelection,
+  TimeSelectionWithAffordance,
 } from '../card_fob/card_fob_types';
 import {TemporalScale} from './histogram_component';
 
@@ -46,7 +47,8 @@ export class HistogramCardFobController {
   @Input() steps!: number[];
   @Input() timeSelection!: TimeSelection;
   @Input() temporalScale!: TemporalScale;
-  @Output() onTimeSelectionChanged = new EventEmitter<TimeSelection>();
+  @Output() onTimeSelectionChanged =
+    new EventEmitter<TimeSelectionWithAffordance>();
   @Output() onTimeSelectionToggled = new EventEmitter();
 
   readonly axisDirection = AxisDirection.VERTICAL;
diff --git a/tensorboard/webapp/widgets/histogram/histogram_component.ng.html b/tensorboard/webapp/widgets/histogram/histogram_component.ng.html
index 842a3e6d54e..6dda36098bf 100644
--- a/tensorboard/webapp/widgets/histogram/histogram_component.ng.html
+++ b/tensorboard/webapp/widgets/histogram/histogram_component.ng.html
@@ -55,7 +55,7 @@
         class="histogram-card-fob"
         [timeSelection]="timeSelection"
         [steps]="getSteps()"
-        [temporalScale]="scales.temporalScale"
+        [temporalScale]="scales!.temporalScale"
         (onTimeSelectionChanged)="onLinkedTimeSelectionChanged.emit($event)"
         (onTimeSelectionToggled)="onLinkedTimeToggled.emit()"
       ></histogram-card-fob-controller>
diff --git a/tensorboard/webapp/widgets/histogram/histogram_component.ts b/tensorboard/webapp/widgets/histogram/histogram_component.ts
index a67ac8d959c..8ed8d61eab9 100644
--- a/tensorboard/webapp/widgets/histogram/histogram_component.ts
+++ b/tensorboard/webapp/widgets/histogram/histogram_component.ts
@@ -214,7 +214,7 @@ export class HistogramComponent implements AfterViewInit, OnChanges, OnDestroy {
     return pathBuilder.join('');
   }
 
-  trackByWallTime(datum: HistogramDatum): number {
+  trackByWallTime(index: number, datum: HistogramDatum): number {
     return datum.wallTime;
   }
 
diff --git a/tensorboard/webapp/widgets/line_chart_v2/line_chart_component.ts b/tensorboard/webapp/widgets/line_chart_v2/line_chart_component.ts
index 34d0c549237..891af834232 100644
--- a/tensorboard/webapp/widgets/line_chart_v2/line_chart_component.ts
+++ b/tensorboard/webapp/widgets/line_chart_v2/line_chart_component.ts
@@ -103,7 +103,7 @@ export class LineChartComponent
 
   @Input()
   customChartOverlayTemplate?: TemplateRef<
-    TemplateContext & {formatter: Formatter}
+    TemplateContext & {interactionState: InteractionState}
   >;
 
   @Input()
diff --git a/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.ng.html b/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.ng.html
index 1a5c34f7ccf..f0268b44821 100644
--- a/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.ng.html
+++ b/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.ng.html
@@ -23,7 +23,6 @@
         *ngFor="let tick of minorTicks; trackBy: trackByMinorTick"
       >
         <text
-          [style.font]="axisFont"
           [attr.x]="textXPosition(tick.value)"
           [attr.y]="textYPosition(tick.value)"
         >
@@ -57,7 +56,6 @@
       [style.width]="getMajorWidthString(tick, isLast, majorTicks[i + 1])"
       [style.bottom.px]="getMajorYPosition(tick)"
       [style.height]="getMajorHeightString(tick, isLast, majorTicks[i + 1])"
-      [style.font]="axisFont"
       [title]="getFormatter().formatLong(tick.start)"
       ><span>{{ tick.tickFormattedString }}</span></span
     >
diff --git a/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.ts b/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.ts
index 6b6ccfaafdd..7d4185cd139 100644
--- a/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.ts
+++ b/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.ts
@@ -104,11 +104,11 @@ export class LineChartAxisComponent {
     return this.customFormatter ?? this.scale.defaultFormatter;
   }
 
-  trackByMinorTick(tick: MinorTick): number {
+  trackByMinorTick(index: number, tick: MinorTick): number {
     return tick.value;
   }
 
-  trackByMajorTick(tick: MajorTick): number {
+  trackByMajorTick(index: number, tick: MajorTick): number {
     return tick.start;
   }
 
diff --git a/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_interactive_view.ts b/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_interactive_view.ts
index c2b4ffd20cd..13a95c8f551 100644
--- a/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_interactive_view.ts
+++ b/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_interactive_view.ts
@@ -14,6 +14,7 @@ limitations under the License.
 ==============================================================================*/
 import {
   CdkConnectedOverlay,
+  CdkOverlayOrigin,
   ConnectedPosition,
   Overlay,
   RepositionScrollStrategy,
@@ -128,7 +129,7 @@ export class LineChartInteractiveViewComponent
   domDim!: Dimension;
 
   @Input()
-  tooltipOriginEl!: ElementRef;
+  tooltipOriginEl!: CdkOverlayOrigin;
 
   @Input()
   tooltipTemplate?: TooltipTemplate;
diff --git a/tensorboard/webapp/widgets/range_input/range_input_component.ts b/tensorboard/webapp/widgets/range_input/range_input_component.ts
index f14bca8884a..0df49d8cc0f 100644
--- a/tensorboard/webapp/widgets/range_input/range_input_component.ts
+++ b/tensorboard/webapp/widgets/range_input/range_input_component.ts
@@ -143,7 +143,7 @@ export class RangeInputComponent {
     }
   }
 
-  handleInputChange(event: InputEvent, position: Position) {
+  handleInputChange(event: Event, position: Position) {
     const input = event.target! as HTMLInputElement;
     const numValue = this.getClippedValue(Number(input.value));
     if (isNaN(numValue)) {
diff --git a/tsconfig.json b/tsconfig.json
index c9aa2cbb6f8..3887c1e0529 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -32,6 +32,9 @@
     ]
   },
   "angularCompilerOptions": {
-    "strictTemplates": true
+    "strictTemplates": true,
+    // TODO(@cdavalos): Set this back to true after these containers stop using AsyncPipe
+    // for inputs. AsyncPipe can return null, so Angular currently rejects these bindings.
+    "strictNullInputTypes": false
   }
 }