refactor(deps): migrate @angular/material from v15.2.9 to v21.1.5

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",

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';

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');

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';
 

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,