diff --git a/package.json b/package.json
index f35eba88104..6478003c97f 100644
--- a/package.json
+++ b/package.json
@@ -28,11 +28,11 @@
   },
   "homepage": "https://github.com/tensorflow/tensorboard#readme",
   "devDependencies": {
-    "@angular-devkit/build-angular": "^15.2.9",
+    "@angular-devkit/build-angular": "^21.1.5",
     "@angular/build-tooling": "https://github.com/angular/dev-infra-private-build-tooling-builds.git#fb42478534df7d48ec23a6834fea94a776cb89a0",
-    "@angular/cli": "^15.2.9",
-    "@angular/compiler": "15.2.9",
-    "@angular/compiler-cli": "^15.2.9",
+    "@angular/cli": "^21.1.5",
+    "@angular/compiler": "21.1.5",
+    "@angular/compiler-cli": "^21.1.5",
     "@babel/core": "^7.16.12",
     "@bazel/concatjs": "5.7.0",
     "@bazel/esbuild": "5.7.0",
@@ -65,16 +65,16 @@
     "yarn-deduplicate": "^5.0.0"
   },
   "dependencies": {
-    "@angular/animations": "^15.2.9",
-    "@angular/cdk": "^15.2.9",
-    "@angular/common": "15.2.9",
-    "@angular/core": "^15.2.9",
-    "@angular/forms": "^15.2.9",
-    "@angular/localize": "^15.2.9",
-    "@angular/material": "^15.2.9",
-    "@angular/platform-browser": "^15.2.9",
-    "@angular/platform-browser-dynamic": "^15.2.9",
-    "@angular/router": "^15.2.9",
+    "@angular/animations": "^21.1.5",
+    "@angular/cdk": "^21.1.5",
+    "@angular/common": "21.1.5",
+    "@angular/core": "^21.1.5",
+    "@angular/forms": "^21.1.5",
+    "@angular/localize": "^21.1.5",
+    "@angular/material": "^21.1.5",
+    "@angular/platform-browser": "^21.1.5",
+    "@angular/platform-browser-dynamic": "^21.1.5",
+    "@angular/router": "^21.1.5",
     "@ngrx/effects": "^15.4.0",
     "@ngrx/store": "^15.4.0",
     "@polymer/decorators": "^3.0.0",
diff --git a/tensorboard/webapp/alert/views/alert_display_snackbar_container.ts b/tensorboard/webapp/alert/views/alert_display_snackbar_container.ts
index 07022f1cffa..5dea8758272 100644
--- a/tensorboard/webapp/alert/views/alert_display_snackbar_container.ts
+++ b/tensorboard/webapp/alert/views/alert_display_snackbar_container.ts
@@ -14,6 +14,7 @@ limitations under the License.
 ==============================================================================*/
 import {ChangeDetectionStrategy, Component, Inject} from '@angular/core';
 import {MatSnackBarRef, MAT_SNACK_BAR_DATA} from '@angular/material/snack-bar';
+// Note: MAT_SNACK_BAR_DATA and MatSnackBarRef import paths are unchanged in v21
 import {Store} from '@ngrx/store';
 import {State} from '../../app_state';
 import {splitByURL} from '../../util/string';
diff --git a/tensorboard/webapp/header/header_test.ts b/tensorboard/webapp/header/header_test.ts
index dbebbfe29bc..598011ac148 100644
--- a/tensorboard/webapp/header/header_test.ts
+++ b/tensorboard/webapp/header/header_test.ts
@@ -106,7 +106,7 @@ describe('header test', () => {
     fixture.detectChanges();
 
     const els = fixture.debugElement.queryAll(By.css('.mat-mdc-tab'));
-    expect(els.length).toBe(2);
+    expect(els.length).toBe(2); // .mat-mdc-tab is the MDC-based class used since Angular Material v15+
 
     assertDebugElementText(els[0], 'FOO FIGHTER');
     assertDebugElementText(els[1], 'BARBER');
@@ -126,7 +126,7 @@ describe('header test', () => {
     await fixture.whenStable();
 
     const els = fixture.debugElement.queryAll(By.css('.mat-mdc-tab'));
-    expect(els.length).toBe(3);
+    expect(els.length).toBe(3); // .mat-mdc-tab is the MDC-based class used since Angular Material v15+
     assertDebugElementText(els[0], 'MEOW');
     assertDebugElementText(els[1], 'WOOF');
     assertDebugElementText(els[2], 'TRUMPET');
diff --git a/tensorboard/webapp/header/plugin_selector_component.ts b/tensorboard/webapp/header/plugin_selector_component.ts
index b143a9609cb..17e2ea5e81d 100644
--- a/tensorboard/webapp/header/plugin_selector_component.ts
+++ b/tensorboard/webapp/header/plugin_selector_component.ts
@@ -14,6 +14,7 @@ limitations under the License.
 ==============================================================================*/
 import {Component, EventEmitter, Input, Output} from '@angular/core';
 import {MatSelectChange} from '@angular/material/select';
+// MatSelectChange is still exported from @angular/material/select in v21
 import {PluginId} from '../types/api';
 import {UiPluginMetadata} from './types';
 
diff --git a/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_component.ts b/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_component.ts
index 6afc328ad06..cc7419aba8a 100644
--- a/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_component.ts
+++ b/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_component.ts
@@ -22,6 +22,7 @@ import {
   Output,
 } from '@angular/core';
 import {MatTabChangeEvent} from '@angular/material/tabs';
+// MatTabChangeEvent is still exported from @angular/material/tabs in v21
 import {
   ColumnHeader,
   DataTableMode,