main - a6a70f6 build: add missing dependency (#30229)

Author: crisbeto

docs-content/examples-highlighted/material/sidenav/sidenav-responsive/sidenav-responsive-example-html.html

@@ -1,14 +1,14 @@
 @if (shouldRun) {
-  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-container&quot;</span> [<span class="hljs-attr">class.example-is-mobile</span>]=<span class="hljs-string">&quot;mobileQuery.matches&quot;</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-container&quot;</span> [<span class="hljs-attr">class.example-is-mobile</span>]=<span class="hljs-string">&quot;isMobile()&quot;</span>&gt;</span>
     <span class="hljs-tag">&lt;<span class="hljs-name">mat-toolbar</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-toolbar&quot;</span>&gt;</span>
       <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">mat-icon-button</span> (<span class="hljs-attr">click</span>)=<span class="hljs-string">&quot;snav.toggle()&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">mat-icon</span>&gt;</span>menu<span class="hljs-tag">&lt;/<span class="hljs-name">mat-icon</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
       <span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-app-name&quot;</span>&gt;</span>Responsive App<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
     <span class="hljs-tag">&lt;/<span class="hljs-name">mat-toolbar</span>&gt;</span>
 
     <span class="hljs-tag">&lt;<span class="hljs-name">mat-sidenav-container</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-sidenav-container&quot;</span>
-                          [<span class="hljs-attr">style.marginTop.px</span>]=<span class="hljs-string">&quot;mobileQuery.matches ? 56 : 0&quot;</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">mat-sidenav</span> #<span class="hljs-attr">snav</span> [<span class="hljs-attr">mode</span>]=<span class="hljs-string">&quot;mobileQuery.matches ? &#x27;over&#x27; : &#x27;side&#x27;&quot;</span>
-                  [<span class="hljs-attr">fixedInViewport</span>]=<span class="hljs-string">&quot;mobileQuery.matches&quot;</span> <span class="hljs-attr">fixedTopGap</span>=<span class="hljs-string">&quot;56&quot;</span>&gt;</span>
+                          [<span class="hljs-attr">style.marginTop.px</span>]=<span class="hljs-string">&quot;isMobile() ? 56 : 0&quot;</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">mat-sidenav</span> #<span class="hljs-attr">snav</span> [<span class="hljs-attr">mode</span>]=<span class="hljs-string">&quot;isMobile() ? &#x27;over&#x27; : &#x27;side&#x27;&quot;</span>
+                  [<span class="hljs-attr">fixedInViewport</span>]=<span class="hljs-string">&quot;isMobile()&quot;</span> <span class="hljs-attr">fixedTopGap</span>=<span class="hljs-string">&quot;56&quot;</span>&gt;</span>
         <span class="hljs-tag">&lt;<span class="hljs-name">mat-nav-list</span>&gt;</span>
           @for (nav of fillerNav; track nav) {
             <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">mat-list-item</span> <span class="hljs-attr">routerLink</span>=<span class="hljs-string">&quot;.&quot;</span>&gt;</span>{{nav}}<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>

docs-content/examples-highlighted/material/sidenav/sidenav-responsive/sidenav-responsive-example-ts.html

@@ -1,24 +1,30 @@
 <span class="hljs-keyword">import</span> {MediaMatcher} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/cdk/layout&#x27;</span>;
-<span class="hljs-keyword">import</span> {ChangeDetectorRef, Component, OnDestroy, inject} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/core&#x27;</span>;
+<span class="hljs-keyword">import</span> {Component, OnDestroy, inject, signal} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/core&#x27;</span>;
 <span class="hljs-keyword">import</span> {MatListModule} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/list&#x27;</span>;
 <span class="hljs-keyword">import</span> {MatSidenavModule} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/sidenav&#x27;</span>;
 <span class="hljs-keyword">import</span> {MatIconModule} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/icon&#x27;</span>;
 <span class="hljs-keyword">import</span> {MatButtonModule} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/button&#x27;</span>;
 <span class="hljs-keyword">import</span> {MatToolbarModule} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/toolbar&#x27;</span>;
+<span class="hljs-keyword">import</span> {RouterLink} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/router&#x27;</span>;
 
 <span class="hljs-comment">/** <span class="hljs-doctag">@title </span>Responsive sidenav */</span>
 <span class="hljs-meta">@Component</span>({
   <span class="hljs-attr">selector</span>: <span class="hljs-string">&#x27;sidenav-responsive-example&#x27;</span>,
   <span class="hljs-attr">templateUrl</span>: <span class="hljs-string">&#x27;sidenav-responsive-example.html&#x27;</span>,
   <span class="hljs-attr">styleUrl</span>: <span class="hljs-string">&#x27;sidenav-responsive-example.css&#x27;</span>,
-  <span class="hljs-attr">imports</span>: [MatToolbarModule, MatButtonModule, MatIconModule, MatSidenavModule, MatListModule],
+  <span class="hljs-attr">imports</span>: [
+    MatToolbarModule,
+    MatButtonModule,
+    MatIconModule,
+    MatSidenavModule,
+    MatListModule,
+    RouterLink,
+  ],
 })
 <span class="hljs-keyword">export</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">SidenavResponsiveExample</span> <span class="hljs-title">implements</span> <span class="hljs-title">OnDestroy</span> </span>{
-  <span class="hljs-attr">mobileQuery</span>: MediaQueryList;
+  <span class="hljs-keyword">protected</span> <span class="hljs-keyword">readonly</span> fillerNav = <span class="hljs-built_in">Array</span>.from({<span class="hljs-attr">length</span>: <span class="hljs-number">50</span>}, <span class="hljs-function">(<span class="hljs-params">_, i</span>) =&gt;</span> <span class="hljs-string">`Nav Item <span class="hljs-subst">${i + <span class="hljs-number">1</span>}</span>`</span>);
 
-  fillerNav = <span class="hljs-built_in">Array</span>.from({<span class="hljs-attr">length</span>: <span class="hljs-number">50</span>}, <span class="hljs-function">(<span class="hljs-params">_, i</span>) =&gt;</span> <span class="hljs-string">`Nav Item <span class="hljs-subst">${i + <span class="hljs-number">1</span>}</span>`</span>);
-
-  fillerContent = <span class="hljs-built_in">Array</span>.from(
+  <span class="hljs-keyword">protected</span> <span class="hljs-keyword">readonly</span> fillerContent = <span class="hljs-built_in">Array</span>.from(
     {<span class="hljs-attr">length</span>: <span class="hljs-number">50</span>},
     <span class="hljs-function">() =&gt;</span>
       <span class="hljs-string">`Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
@@ -28,20 +34,25 @@
        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`</span>,
   );
 
-  <span class="hljs-keyword">private</span> _mobileQueryListener: <span class="hljs-function">() =&gt;</span> <span class="hljs-built_in">void</span>;
+  <span class="hljs-keyword">protected</span> <span class="hljs-keyword">readonly</span> isMobile = signal(<span class="hljs-literal">true</span>);
+
+  <span class="hljs-keyword">private</span> <span class="hljs-keyword">readonly</span> _mobileQuery: MediaQueryList;
+  <span class="hljs-keyword">private</span> <span class="hljs-keyword">readonly</span> _mobileQueryListener: <span class="hljs-function">() =&gt;</span> <span class="hljs-built_in">void</span>;
 
   <span class="hljs-function"><span class="hljs-title">constructor</span>(<span class="hljs-params"></span>)</span> {
-    <span class="hljs-keyword">const</span> changeDetectorRef = inject(ChangeDetectorRef);
     <span class="hljs-keyword">const</span> media = inject(MediaMatcher);
 
-    <span class="hljs-built_in">this</span>.mobileQuery = media.matchMedia(<span class="hljs-string">&#x27;(max-width: 600px)&#x27;</span>);
-    <span class="hljs-built_in">this</span>._mobileQueryListener = <span class="hljs-function">() =&gt;</span> changeDetectorRef.detectChanges();
-    <span class="hljs-built_in">this</span>.mobileQuery.addListener(<span class="hljs-built_in">this</span>._mobileQueryListener);
+    <span class="hljs-built_in">this</span>._mobileQuery = media.matchMedia(<span class="hljs-string">&#x27;(max-width: 600px)&#x27;</span>);
+    <span class="hljs-built_in">this</span>.isMobile.set(<span class="hljs-built_in">this</span>._mobileQuery.matches);
+    <span class="hljs-built_in">this</span>._mobileQueryListener = <span class="hljs-function">() =&gt;</span> <span class="hljs-built_in">this</span>.isMobile.set(<span class="hljs-built_in">this</span>._mobileQuery.matches);
+    <span class="hljs-built_in">this</span>._mobileQuery.addEventListener(<span class="hljs-string">&#x27;change&#x27;</span>, <span class="hljs-built_in">this</span>._mobileQueryListener);
   }
 
   ngOnDestroy(): <span class="hljs-built_in">void</span> {
-    <span class="hljs-built_in">this</span>.mobileQuery.removeListener(<span class="hljs-built_in">this</span>._mobileQueryListener);
+    <span class="hljs-built_in">this</span>._mobileQuery.removeEventListener(<span class="hljs-string">&#x27;change&#x27;</span>, <span class="hljs-built_in">this</span>._mobileQueryListener);
   }
 
-  shouldRun = <span class="hljs-regexp">/(^|.)(stackblitz|webcontainer).(io|com)$/</span>.test(<span class="hljs-built_in">window</span>.location.host);
+  <span class="hljs-keyword">protected</span> <span class="hljs-keyword">readonly</span> shouldRun = <span class="hljs-regexp">/(^|.)(stackblitz|webcontainer).(io|com)$/</span>.test(
+    <span class="hljs-built_in">window</span>.location.host,
+  );
 }

docs-content/examples-source/material/sidenav/sidenav-responsive/sidenav-responsive-example.html

@@ -1,14 +1,14 @@
 @if (shouldRun) {
-  <div class="example-container" [class.example-is-mobile]="mobileQuery.matches">
+  <div class="example-container" [class.example-is-mobile]="isMobile()">
     <mat-toolbar class="example-toolbar">
       <button mat-icon-button (click)="snav.toggle()"><mat-icon>menu</mat-icon></button>
       <h1 class="example-app-name">Responsive App</h1>
     </mat-toolbar>
 
     <mat-sidenav-container class="example-sidenav-container"
-                          [style.marginTop.px]="mobileQuery.matches ? 56 : 0">
-      <mat-sidenav #snav [mode]="mobileQuery.matches ? 'over' : 'side'"
-                  [fixedInViewport]="mobileQuery.matches" fixedTopGap="56">
+                          [style.marginTop.px]="isMobile() ? 56 : 0">
+      <mat-sidenav #snav [mode]="isMobile() ? 'over' : 'side'"
+                  [fixedInViewport]="isMobile()" fixedTopGap="56">
         <mat-nav-list>
           @for (nav of fillerNav; track nav) {
             <a mat-list-item routerLink=".">{{nav}}</a>

docs-content/examples-source/material/sidenav/sidenav-responsive/sidenav-responsive-example.ts

@@ -1,24 +1,30 @@
 import {MediaMatcher} from '@angular/cdk/layout';
-import {ChangeDetectorRef, Component, OnDestroy, inject} from '@angular/core';
+import {Component, OnDestroy, inject, signal} from '@angular/core';
 import {MatListModule} from '@angular/material/list';
 import {MatSidenavModule} from '@angular/material/sidenav';
 import {MatIconModule} from '@angular/material/icon';
 import {MatButtonModule} from '@angular/material/button';
 import {MatToolbarModule} from '@angular/material/toolbar';
+import {RouterLink} from '@angular/router';
 
 /** @title Responsive sidenav */
 @Component({
   selector: 'sidenav-responsive-example',
   templateUrl: 'sidenav-responsive-example.html',
   styleUrl: 'sidenav-responsive-example.css',
-  imports: [MatToolbarModule, MatButtonModule, MatIconModule, MatSidenavModule, MatListModule],
+  imports: [
+    MatToolbarModule,
+    MatButtonModule,
+    MatIconModule,
+    MatSidenavModule,
+    MatListModule,
+    RouterLink,
+  ],
 })
 export class SidenavResponsiveExample implements OnDestroy {
-  mobileQuery: MediaQueryList;
+  protected readonly fillerNav = Array.from({length: 50}, (_, i) => `Nav Item ${i + 1}`);
 
-  fillerNav = Array.from({length: 50}, (_, i) => `Nav Item ${i + 1}`);
-
-  fillerContent = Array.from(
+  protected readonly fillerContent = Array.from(
     {length: 50},
     () =>
       `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
@@ -28,20 +34,25 @@ export class SidenavResponsiveExample implements OnDestroy {
        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`,
   );
 
-  private _mobileQueryListener: () => void;
+  protected readonly isMobile = signal(true);
+
+  private readonly _mobileQuery: MediaQueryList;
+  private readonly _mobileQueryListener: () => void;
 
   constructor() {
-    const changeDetectorRef = inject(ChangeDetectorRef);
     const media = inject(MediaMatcher);
 
-    this.mobileQuery = media.matchMedia('(max-width: 600px)');
-    this._mobileQueryListener = () => changeDetectorRef.detectChanges();
-    this.mobileQuery.addListener(this._mobileQueryListener);
+    this._mobileQuery = media.matchMedia('(max-width: 600px)');
+    this.isMobile.set(this._mobileQuery.matches);
+    this._mobileQueryListener = () => this.isMobile.set(this._mobileQuery.matches);
+    this._mobileQuery.addEventListener('change', this._mobileQueryListener);
   }
 
   ngOnDestroy(): void {
-    this.mobileQuery.removeListener(this._mobileQueryListener);
+    this._mobileQuery.removeEventListener('change', this._mobileQueryListener);
   }
 
-  shouldRun = /(^|.)(stackblitz|webcontainer).(io|com)$/.test(window.location.host);
+  protected readonly shouldRun = /(^|.)(stackblitz|webcontainer).(io|com)$/.test(
+    window.location.host,
+  );
 }