Docs site cleanups

.ng-dev/format.mts

@@ -6,5 +6,7 @@ import {FormatConfig} from '@angular/ng-dev';
  */
 export const format: FormatConfig = {
   buildifier: true,
-  prettier: true,
+  prettier: {
+    matchers: ['**/*.{js,ts,mts,mjs,json}', '!.yarn/**'],
+  },
 };

material.angular.io/.eslintrc.json

@@ -20,8 +20,10 @@
         "@angular-eslint/component-selector": "off",
         "@angular-eslint/directive-class-suffix": "off",
         "@angular-eslint/directive-selector": "off",
+        "@angular-eslint/no-host-metadata-property": "off",
         "@typescript-eslint/dot-notation": "off",
         "@typescript-eslint/member-delimiter-style": "off",
+        "@typescript-eslint/naming-convention": "off",
         "@typescript-eslint/explicit-member-accessibility": [
           "off",
           {

material.angular.io/package.json

@@ -32,41 +32,41 @@
     "npm": "Please use yarn instead of NPM to install dependencies"
   },
   "dependencies": {
-    "@angular/animations": "^19.1.0-next.3",
-    "@angular/cdk": "^19.1.0-next.2",
-    "@angular/cdk-experimental": "^19.1.0-next.2",
-    "@angular/common": "^19.1.0-next.3",
-    "@angular/compiler": "^19.1.0-next.3",
-    "@angular/components-examples": "https://github.com/angular/material2-docs-content.git#6733b91d23723d25cbec788d0a2c81ce8188166b",
-    "@angular/core": "^19.1.0-next.3",
-    "@angular/forms": "^19.1.0-next.3",
-    "@angular/google-maps": "^19.1.0-next.2",
-    "@angular/localize": "^19.1.0-next.3",
-    "@angular/material": "^19.1.0-next.2",
-    "@angular/material-experimental": "^19.1.0-next.2",
-    "@angular/material-moment-adapter": "^19.1.0-next.2",
-    "@angular/platform-browser": "^19.1.0-next.3",
-    "@angular/platform-browser-dynamic": "^19.1.0-next.3",
-    "@angular/router": "^19.1.0-next.3",
-    "@angular/ssr": "^19.1.0-next.1",
-    "@angular/youtube-player": "^19.1.0-next.2",
+    "@angular/animations": "^19.2.0-next.2",
+    "@angular/cdk": "^19.2.0-next.4",
+    "@angular/cdk-experimental": "^19.2.0-next.4",
+    "@angular/common": "^19.2.0-next.2",
+    "@angular/compiler": "^19.2.0-next.2",
+    "@angular/components-examples": "https://github.com/angular/material2-docs-content.git#a0bebbbc81c854b002de1b9329d7647fde7d03f2",
+    "@angular/core": "^19.2.0-next.2",
+    "@angular/forms": "^19.2.0-next.2",
+    "@angular/google-maps": "^19.2.0-next.4",
+    "@angular/localize": "^19.2.0-next.2",
+    "@angular/material": "^19.2.0-next.4",
+    "@angular/material-experimental": "^19.2.0-next.4",
+    "@angular/material-moment-adapter": "^19.2.0-next.4",
+    "@angular/platform-browser": "^19.2.0-next.2",
+    "@angular/platform-browser-dynamic": "^19.2.0-next.2",
+    "@angular/router": "^19.2.0-next.2",
+    "@angular/ssr": "^19.2.0-next.2",
+    "@angular/youtube-player": "^19.2.0-next.4",
     "@stackblitz/sdk": "^1.5.2",
     "moment": "^2.29.1",
-    "path-normalize": "^6.0.7",
+    "path-normalize": "^6.0.13",
     "rxjs": "^7.8.1",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.10"
   },
   "devDependencies": {
-    "@angular-devkit/architect": "^0.1901.0-next.1",
-    "@angular-devkit/architect-cli": "^0.1901.0-next.1",
-    "@angular-devkit/build-angular": "^19.1.0-next.1",
+    "@angular-devkit/architect": "^0.1902.0-next.2",
+    "@angular-devkit/architect-cli": "^0.1902.0-next.2",
+    "@angular-devkit/build-angular": "^19.2.0-next.2",
     "@angular-eslint/builder": "^14.0.0",
     "@angular-eslint/eslint-plugin": "^14.0.0",
     "@angular-eslint/eslint-plugin-template": "^14.0.0",
     "@angular-eslint/template-parser": "^14.0.0",
-    "@angular/cli": "^19.1.0-next.1",
-    "@angular/compiler-cli": "^19.1.0-next.3",
+    "@angular/cli": "^19.2.0-next.2",
+    "@angular/compiler-cli": "^19.2.0-next.2",
     "@bazel/bazelisk": "^1.12.1",
     "@stylistic/eslint-plugin": "^2.6.2",
     "@types/imagemin": "^7.0.0",

material.angular.io/scenes/src/app/app.component.spec.ts

@@ -1,13 +1,13 @@
-import {TestBed, waitForAsync} from '@angular/core/testing';
-import {RouterTestingModule} from '@angular/router/testing';
+import {TestBed} from '@angular/core/testing';
 import {AppComponent} from './app.component';
+import {provideRouter} from '@angular/router';
 
 describe('AppComponent', () => {
-  beforeEach(waitForAsync(() => {
+  beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [RouterTestingModule, AppComponent],
-    }).compileComponents();
-  }));
+      providers: [provideRouter([])],
+    });
+  });
 
   it('should create the app', () => {
     const fixture = TestBed.createComponent(AppComponent);

material.angular.io/scenes/src/app/scene-viewer/scene-viewer.ts

@@ -6,6 +6,7 @@ import {
   ViewContainerRef,
   ViewEncapsulation,
   viewChild,
+  inject,
 } from '@angular/core';
 import {ActivatedRoute} from '@angular/router';
 import {DomSanitizer, SafeStyle} from '@angular/platform-browser';
@@ -18,6 +19,9 @@ import {DomSanitizer, SafeStyle} from '@angular/platform-browser';
   standalone: true,
 })
 export class SceneViewer implements OnInit {
+  private route = inject(ActivatedRoute);
+  private sanitizer = inject(DomSanitizer);
+
   @HostBinding('style.filter') filter: SafeStyle | undefined;
 
   /**
@@ -45,10 +49,7 @@ export class SceneViewer implements OnInit {
 
   readonly scene = viewChild.required('scene', {read: ViewContainerRef});
 
-  constructor(
-    private route: ActivatedRoute,
-    private sanitizer: DomSanitizer,
-  ) {
+  constructor() {
     this.hueRotation = this.route.snapshot.data['hueRotate'];
     this.component = this.route.snapshot.data['scene'];
     this.scale = this.route.snapshot.data['scale'];

material.angular.io/scenes/src/app/scenes/bottom-sheet/bottom-sheet-scene.ts

@@ -1,4 +1,4 @@
-import {AfterViewInit, Component, ViewEncapsulation} from '@angular/core';
+import {AfterViewInit, Component, ViewEncapsulation, inject} from '@angular/core';
 import {MatBottomSheet} from '@angular/material/bottom-sheet';
 import {MatIconModule} from '@angular/material/icon';
 import {MatListModule} from '@angular/material/list';
@@ -11,7 +11,7 @@ import {MatListModule} from '@angular/material/list';
   standalone: true,
 })
 export class BottomSheetScene implements AfterViewInit {
-  constructor(private _bottomSheet: MatBottomSheet) {}
+  private _bottomSheet = inject(MatBottomSheet);
 
   ngAfterViewInit(): void {
     this._bottomSheet.open(SampleBottomSheet);

material.angular.io/scenes/src/app/scenes/dialog/dialog-scene.ts

@@ -1,4 +1,4 @@
-import {Component, ViewEncapsulation} from '@angular/core';
+import {Component, ViewEncapsulation, inject} from '@angular/core';
 import {MatButtonModule} from '@angular/material/button';
 import {MatDialog, MatDialogModule} from '@angular/material/dialog';
 
@@ -9,7 +9,9 @@ import {MatDialog, MatDialogModule} from '@angular/material/dialog';
   standalone: true,
 })
 export class DialogScene {
-  constructor(public dialog: MatDialog) {
+  dialog = inject(MatDialog);
+
+  constructor() {
     this.openDialog();
   }
 

material.angular.io/scenes/src/app/scenes/snack-bar/snack-bar-scene.ts

@@ -1,4 +1,4 @@
-import {Component, ViewEncapsulation} from '@angular/core';
+import {Component, ViewEncapsulation, inject} from '@angular/core';
 import {MatSnackBar} from '@angular/material/snack-bar';
 
 @Component({
@@ -9,7 +9,9 @@ import {MatSnackBar} from '@angular/material/snack-bar';
   standalone: true,
 })
 export class SnackBarScene {
-  constructor(snackbar: MatSnackBar) {
+  constructor() {
+    const snackbar = inject(MatSnackBar);
+
     snackbar.open('Message archived', 'Undo');
   }
 }

material.angular.io/src/app/material-docs-app.ts

@@ -1,4 +1,4 @@
-import {Component, OnDestroy, ViewEncapsulation} from '@angular/core';
+import {Component, OnDestroy, ViewEncapsulation, inject} from '@angular/core';
 
 import {AnalyticsService} from './shared/analytics/analytics';
 import {NavigationFocusService} from './shared/navigation-focus/navigation-focus.service';
@@ -23,7 +23,10 @@ import {CookiePopup} from './shared/cookie-popup/cookie-popup';
 export class MaterialDocsApp implements OnDestroy {
   private subscriptions = new Subscription();
 
-  constructor(analytics: AnalyticsService, navigationFocusService: NavigationFocusService) {
+  constructor() {
+    const analytics = inject(AnalyticsService);
+    const navigationFocusService = inject(NavigationFocusService);
+
     this.subscriptions.add(
       navigationFocusService.navigationEndEvents
         .pipe(

material.angular.io/src/app/pages/component-category-list/component-category-list.html

@@ -3,9 +3,9 @@
      focusOnNavigation>
   <div [innerHTML]="_categoryListSummary"></div>
 </div>
-@if ((params | async)?.section; as section) {
+@if (items.length > 0) {
   <div class="docs-component-category-list">
-    @for (component of docItems.getItems(section); track component) {
+    @for (component of items; track component) {
       <a class="docs-component-category-list-item"
          [routerLink]="'/' + section + '/' + component.id">
         <div class="docs-component-category-list-card" matRipple>

material.angular.io/src/app/pages/component-category-list/component-category-list.ts

@@ -1,11 +1,13 @@
-import {AsyncPipe} from '@angular/common';
-import {Component, NgModule, OnDestroy, OnInit} from '@angular/core';
-import {MatCardModule} from '@angular/material/card';
-import {ActivatedRoute, Params, RouterModule, RouterLink} from '@angular/router';
+import {Component, OnDestroy, OnInit, inject} from '@angular/core';
+import {ActivatedRoute, RouterLink} from '@angular/router';
 import {MatRipple} from '@angular/material/core';
-import {combineLatest, Observable, Subscription} from 'rxjs';
+import {combineLatest, Subscription} from 'rxjs';
 
-import {DocumentationItems, SECTIONS} from '../../shared/documentation-items/documentation-items';
+import {
+  DocItem,
+  DocumentationItems,
+  SECTIONS,
+} from '../../shared/documentation-items/documentation-items';
 import {NavigationFocus} from '../../shared/navigation-focus/navigation-focus';
 
 import {ComponentPageTitle} from '../page-title/page-title';
@@ -15,32 +17,29 @@ import {ComponentPageTitle} from '../page-title/page-title';
   templateUrl: './component-category-list.html',
   styleUrls: ['./component-category-list.scss'],
   standalone: true,
-  imports: [NavigationFocus, RouterLink, AsyncPipe, MatRipple],
+  imports: [NavigationFocus, RouterLink, MatRipple],
 })
 export class ComponentCategoryList implements OnInit, OnDestroy {
-  params: Observable<Params> | undefined;
+  readonly _docItems = inject(DocumentationItems);
+  private _componentPageTitle = inject(ComponentPageTitle);
+  private _route = inject(ActivatedRoute);
+
+  items: DocItem[] = [];
+  section = '';
   routeParamSubscription: Subscription = new Subscription();
   _categoryListSummary: string | undefined;
 
-  constructor(
-    public docItems: DocumentationItems,
-    public _componentPageTitle: ComponentPageTitle,
-    private _route: ActivatedRoute,
-  ) {}
-
   ngOnInit() {
-    // Combine params from all of the path into a single object.
-    this.params = combineLatest(
+    this.routeParamSubscription = combineLatest(
       this._route.pathFromRoot.map(route => route.params),
       Object.assign,
-    );
-
-    // title on topbar navigation
-    this.routeParamSubscription = this.params.subscribe(params => {
+    ).subscribe(async params => {
       const sectionName = params['section'];
       const section = SECTIONS[sectionName];
       this._componentPageTitle.title = section.name;
       this._categoryListSummary = section.summary;
+      this.section = sectionName;
+      this.items = await this._docItems.getItems(sectionName);
     });
   }
 
@@ -50,9 +49,3 @@ export class ComponentCategoryList implements OnInit, OnDestroy {
     }
   }
 }
-
-@NgModule({
-  imports: [MatCardModule, RouterModule, ComponentCategoryList],
-  exports: [ComponentCategoryList],
-})
-export class ComponentCategoryListModule {}

material.angular.io/src/app/pages/component-page-header/component-page-header.spec.ts

@@ -1,16 +1,9 @@
-import {waitForAsync, ComponentFixture, TestBed} from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {ComponentPageHeader} from './component-page-header';
-import {DocsAppTestingModule} from '../../testing/testing-module';
 
 describe('ComponentPageHeader', () => {
   let fixture: ComponentFixture<ComponentPageHeader>;
 
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      imports: [DocsAppTestingModule],
-    }).compileComponents();
-  }));
-
   beforeEach(() => {
     fixture = TestBed.createComponent(ComponentPageHeader);
   });

material.angular.io/src/app/pages/component-page-header/component-page-header.ts

@@ -1,14 +1,14 @@
 import {Component, EventEmitter, Output} from '@angular/core';
 
-import {MatButtonModule} from '@angular/material/button';
-import {MatIconModule} from '@angular/material/icon';
+import {MatButton} from '@angular/material/button';
+import {MatIcon} from '@angular/material/icon';
 
 @Component({
   selector: 'component-page-header',
   templateUrl: './component-page-header.html',
   styleUrls: ['./component-page-header.scss'],
   standalone: true,
-  imports: [MatButtonModule, MatIconModule],
+  imports: [MatButton, MatIcon],
 })
 export class ComponentPageHeader {
   @Output() toggleSidenav = new EventEmitter<void>();

material.angular.io/src/app/pages/component-sidenav/component-nav.html

@@ -1,17 +1,19 @@
 <div class="docs-component-viewer-nav">
-  @if ((params() | async)?.section; as section) {
+  @let items = (this.items | async) || [];
+
+  @if (items.length > 0) {
     <div class="docs-component-viewer-nav-content">
-        <mat-nav-list>
-          @for (component of docItems.getItems(section); track component) {
-            <a mat-list-item #link="routerLinkActive"
-               [routerLink]="'/' + section+ '/' + component.id"
-               [activated]="link.isActive"
-               routerLinkActive="docs-component-viewer-sidenav-item-selected"
-               [attr.aria-current]="currentItemId === component.id ? 'page': 'false'">
-              {{component.name}}
-            </a>
-          }
-        </mat-nav-list>
+      <mat-nav-list>
+        @for (component of items; track component) {
+          <a mat-list-item #link="routerLinkActive"
+              [routerLink]="'/' + params()?.section + '/' + component.id"
+              [activated]="link.isActive"
+              routerLinkActive="docs-component-viewer-sidenav-item-selected"
+              [attr.aria-current]="link.isActive ? 'page': 'false'">
+            {{component.name}}
+          </a>
+        }
+      </mat-nav-list>
     </div>
   }
 </div>