refactor(material-angular-io): switch to inject function

Runs the inject migration over the docs site to make it consistent with the rest of the repo.

Author: crisbeto

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.ts

@@ -1,4 +1,4 @@
-import {Component, OnDestroy, OnInit} from '@angular/core';
+import {Component, OnDestroy, OnInit, inject} from '@angular/core';
 import {ActivatedRoute, RouterLink} from '@angular/router';
 import {MatRipple} from '@angular/material/core';
 import {combineLatest, Subscription} from 'rxjs';
@@ -20,17 +20,15 @@ import {ComponentPageTitle} from '../page-title/page-title';
   imports: [NavigationFocus, RouterLink, MatRipple],
 })
 export class ComponentCategoryList implements OnInit, OnDestroy {
+  readonly _docItems = inject(DocumentationItems);
+  private _componentPageTitle = inject(ComponentPageTitle);
+  private _route = inject(ActivatedRoute);
+
   items: DocItem[] = [];
   section = '';
   routeParamSubscription: Subscription = new Subscription();
   _categoryListSummary: string | undefined;
 
-  constructor(
-    readonly _docItems: DocumentationItems,
-    private _componentPageTitle: ComponentPageTitle,
-    private _route: ActivatedRoute,
-  ) {}
-
   ngOnInit() {
     this.routeParamSubscription = combineLatest(
       this._route.pathFromRoot.map(route => route.params),

material.angular.io/src/app/pages/component-sidenav/component-sidenav-can-load-guard.ts

@@ -1,4 +1,4 @@
-import {Injectable} from '@angular/core';
+import {Injectable, inject} from '@angular/core';
 import {ActivatedRouteSnapshot, Router} from '@angular/router';
 import {SECTIONS} from '../../shared/documentation-items/documentation-items';
 
@@ -8,7 +8,7 @@ import {SECTIONS} from '../../shared/documentation-items/documentation-items';
  */
 @Injectable({providedIn: 'root'})
 export class CanActivateComponentSidenav {
-  constructor(private router: Router) {}
+  private router = inject(Router);
 
   canActivate(route: ActivatedRouteSnapshot) {
     // Searches if the section defined in the base UrlSegment is a valid section from the

material.angular.io/src/app/pages/component-sidenav/component-sidenav.ts

@@ -68,18 +68,19 @@ const SMALL_WIDTH_BREAKPOINT = 959;
   ],
 })
 export class ComponentSidenav implements OnInit, OnDestroy {
+  docItems = inject(DocumentationItems);
+  private _route = inject(ActivatedRoute);
+  private _navigationFocusService = inject(NavigationFocusService);
+
   readonly sidenav = viewChild(MatSidenav);
   params: Observable<Params>;
   isExtraScreenSmall: Observable<boolean>;
   isScreenSmall: Observable<boolean>;
   private _subscriptions = new Subscription();
 
-  constructor(
-    public docItems: DocumentationItems,
-    private _route: ActivatedRoute,
-    private _navigationFocusService: NavigationFocusService,
-    breakpoints: BreakpointObserver,
-  ) {
+  constructor() {
+    const breakpoints = inject(BreakpointObserver);
+
     this.isExtraScreenSmall = breakpoints
       .observe(`(max-width: ${EXTRA_SMALL_WIDTH_BREAKPOINT}px)`)
       .pipe(map(breakpoint => breakpoint.matches));

material.angular.io/src/app/pages/component-viewer/component-styling.ts

@@ -19,9 +19,9 @@ interface StyleOverridesData {
 
 @Injectable({providedIn: 'root'})
 class TokenService {
-  private _cache: Record<string, Observable<StyleOverridesData>> = {};
+  private _http = inject(HttpClient);
 
-  constructor(private _http: HttpClient) {}
+  private _cache: Record<string, Observable<StyleOverridesData>> = {};
 
   getTokenData(item: DocItem): Observable<StyleOverridesData> {
     const url = `/docs-content/tokens/${item.packageName}/${item.id}/${item.id}.json`;

material.angular.io/src/app/pages/component-viewer/component-viewer.ts

@@ -9,6 +9,7 @@ import {
   ViewEncapsulation,
   viewChild,
   viewChildren,
+  inject,
 } from '@angular/core';
 import {ActivatedRoute, Router, RouterLinkActive, RouterLink, RouterOutlet} from '@angular/router';
 import {combineLatest, Observable, ReplaySubject, Subject} from 'rxjs';
@@ -39,16 +40,19 @@ import {MatTabLink, MatTabNav, MatTabNavPanel} from '@angular/material/tabs';
   ],
 })
 export class ComponentViewer implements OnDestroy {
+  private router = inject(Router);
+  componentPageTitle = inject(ComponentPageTitle);
+  readonly docItems = inject(DocumentationItems);
+
   componentDocItem = new ReplaySubject<DocItem>(1);
   sections: Set<string> = new Set(['overview', 'api']);
   private _destroyed = new Subject<void>();
 
-  constructor(
-    route: ActivatedRoute,
-    private router: Router,
-    public componentPageTitle: ComponentPageTitle,
-    readonly docItems: DocumentationItems,
-  ) {
+  constructor() {
+    const route = inject(ActivatedRoute);
+    const componentPageTitle = this.componentPageTitle;
+    const docItems = this.docItems;
+
     const routeAndParentParams = [route.params];
     if (route.parent) {
       routeAndParentParams.push(route.parent.params);
@@ -101,17 +105,18 @@ export class ComponentViewer implements OnDestroy {
  */
 @Directive()
 export class ComponentBaseView implements OnInit, OnDestroy {
+  componentViewer = inject(ComponentViewer);
+  private changeDetectorRef = inject(ChangeDetectorRef);
+
   readonly tableOfContents = viewChild<TableOfContents>('toc');
   readonly viewers = viewChildren(DocViewer);
 
   showToc: Observable<boolean>;
   private _destroyed = new Subject<void>();
 
-  constructor(
-    public componentViewer: ComponentViewer,
-    breakpointObserver: BreakpointObserver,
-    private changeDetectorRef: ChangeDetectorRef,
-  ) {
+  constructor() {
+    const breakpointObserver = inject(BreakpointObserver);
+
     this.showToc = breakpointObserver.observe('(max-width: 1200px)').pipe(
       map(result => {
         this.changeDetectorRef.detectChanges();