docs(material/expansion): Update expansion docs & examples (#29244)

Author: mmalerba

src/components-examples/material/expansion/expansion-expand-collapse-all/expansion-expand-collapse-all-example.html

@@ -1,15 +1,13 @@
 <div class="example-action-buttons">
-  <button mat-button (click)="accordion.openAll()">Expand All</button>
-  <button mat-button (click)="accordion.closeAll()">Collapse All</button>
+  <button mat-button (click)="accordion().openAll()">Expand All</button>
+  <button mat-button (click)="accordion().closeAll()">Collapse All</button>
 </div>
 <!-- #docregion multi -->
 <mat-accordion class="example-headers-align" multi>
-<!-- #enddocregion multi -->
+  <!-- #enddocregion multi -->
   <mat-expansion-panel>
     <mat-expansion-panel-header>
-      <mat-panel-title>
-        Personal data
-      </mat-panel-title>
+      <mat-panel-title> Personal data </mat-panel-title>
       <mat-panel-description>
         Type your name and age
         <mat-icon>account_circle</mat-icon>
@@ -18,22 +16,19 @@
 
     <mat-form-field>
       <mat-label>First name</mat-label>
-      <input matInput>
+      <input matInput />
     </mat-form-field>
 
     <mat-form-field>
       <mat-label>Age</mat-label>
-      <input matInput type="number" min="1">
+      <input matInput type="number" min="1" />
     </mat-form-field>
-
   </mat-expansion-panel>
-<!-- #docregion disabled -->
+  <!-- #docregion disabled -->
   <mat-expansion-panel disabled>
-<!-- #enddocregion disabled -->
+    <!-- #enddocregion disabled -->
     <mat-expansion-panel-header>
-      <mat-panel-title>
-        Destination
-      </mat-panel-title>
+      <mat-panel-title> Destination </mat-panel-title>
       <mat-panel-description>
         Type the country name
         <mat-icon>map</mat-icon>
@@ -42,15 +37,13 @@
 
     <mat-form-field>
       <mat-label>Country</mat-label>
-      <input matInput>
+      <input matInput />
     </mat-form-field>
   </mat-expansion-panel>
 
   <mat-expansion-panel>
     <mat-expansion-panel-header>
-      <mat-panel-title>
-        Day of the trip
-      </mat-panel-title>
+      <mat-panel-title> Day of the trip </mat-panel-title>
       <mat-panel-description>
         Inform the date you wish to travel
         <mat-icon>date_range</mat-icon>
@@ -59,7 +52,7 @@
 
     <mat-form-field>
       <mat-label>Date</mat-label>
-      <input matInput [matDatepicker]="picker" (focus)="picker.open()" readonly>
+      <input matInput [matDatepicker]="picker" (focus)="picker.open()" readonly />
     </mat-form-field>
     <mat-datepicker #picker></mat-datepicker>
   </mat-expansion-panel>

src/components-examples/material/expansion/expansion-expand-collapse-all/expansion-expand-collapse-all-example.ts

@@ -1,11 +1,11 @@
-import {Component, ViewChild} from '@angular/core';
-import {MatAccordion, MatExpansionModule} from '@angular/material/expansion';
+import {ChangeDetectionStrategy, Component, viewChild} from '@angular/core';
+import {MatButtonModule} from '@angular/material/button';
+import {provideNativeDateAdapter} from '@angular/material/core';
 import {MatDatepickerModule} from '@angular/material/datepicker';
-import {MatInputModule} from '@angular/material/input';
+import {MatAccordion, MatExpansionModule} from '@angular/material/expansion';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatIconModule} from '@angular/material/icon';
-import {MatButtonModule} from '@angular/material/button';
-import {provideNativeDateAdapter} from '@angular/material/core';
+import {MatInputModule} from '@angular/material/input';
 
 /**
  * @title Accordion with expand/collapse all toggles
@@ -24,7 +24,8 @@ import {provideNativeDateAdapter} from '@angular/material/core';
     MatInputModule,
     MatDatepickerModule,
   ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ExpansionExpandCollapseAllExample {
-  @ViewChild(MatAccordion) accordion: MatAccordion;
+  accordion = viewChild.required(MatAccordion);
 }

src/components-examples/material/expansion/expansion-harness/expansion-harness-example.ts

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {MatExpansionModule} from '@angular/material/expansion';
 
 /**
@@ -9,5 +9,6 @@ import {MatExpansionModule} from '@angular/material/expansion';
   templateUrl: 'expansion-harness-example.html',
   standalone: true,
   imports: [MatExpansionModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ExpansionHarnessExample {}

src/components-examples/material/expansion/expansion-overview/expansion-overview-example.html

@@ -1,27 +1,20 @@
 <mat-accordion>
-<!-- #docregion basic-panel -->
-<!-- #docregion hide-toggle -->
+  <!-- #docregion basic-panel -->
+  <!-- #docregion hide-toggle -->
   <mat-expansion-panel hideToggle>
-<!-- #enddocregion hide-toggle -->
+    <!-- #enddocregion hide-toggle -->
     <mat-expansion-panel-header>
-      <mat-panel-title>
-        This is the expansion title
-      </mat-panel-title>
-      <mat-panel-description>
-        This is a summary of the content
-      </mat-panel-description>
+      <mat-panel-title> This is the expansion title </mat-panel-title>
+      <mat-panel-description> This is a summary of the content </mat-panel-description>
     </mat-expansion-panel-header>
     <p>This is the primary content of the panel.</p>
   </mat-expansion-panel>
-<!-- #enddocregion basic-panel -->
-  <mat-expansion-panel (opened)="panelOpenState = true"
-                       (closed)="panelOpenState = false">
+  <!-- #enddocregion basic-panel -->
+  <mat-expansion-panel (opened)="panelOpenState.set(true)" (closed)="panelOpenState.set(false)">
     <mat-expansion-panel-header>
-      <mat-panel-title>
-        Self aware panel
-      </mat-panel-title>
+      <mat-panel-title> Self aware panel </mat-panel-title>
       <mat-panel-description>
-        Currently I am {{panelOpenState ? 'open' : 'closed'}}
+        Currently I am {{panelOpenState() ? 'open' : 'closed'}}
       </mat-panel-description>
     </mat-expansion-panel-header>
     <p>I'm visible because I am open</p>

src/components-examples/material/expansion/expansion-overview/expansion-overview-example.ts

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {ChangeDetectionStrategy, Component, signal} from '@angular/core';
 import {MatExpansionModule} from '@angular/material/expansion';
 
 /**
@@ -9,7 +9,8 @@ import {MatExpansionModule} from '@angular/material/expansion';
   templateUrl: 'expansion-overview-example.html',
   standalone: true,
   imports: [MatExpansionModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ExpansionOverviewExample {
-  panelOpenState = false;
+  readonly panelOpenState = signal(false);
 }

src/components-examples/material/expansion/expansion-steps/expansion-steps-example.html

@@ -1,9 +1,7 @@
 <mat-accordion class="example-headers-align">
-  <mat-expansion-panel [expanded]="step === 0" (opened)="setStep(0)" hideToggle>
+  <mat-expansion-panel [expanded]="step() === 0" (opened)="setStep(0)" hideToggle>
     <mat-expansion-panel-header>
-      <mat-panel-title>
-        Personal data
-      </mat-panel-title>
+      <mat-panel-title> Personal data </mat-panel-title>
       <mat-panel-description>
         Type your name and age
         <mat-icon>account_circle</mat-icon>
@@ -12,25 +10,23 @@
 
     <mat-form-field>
       <mat-label>First name</mat-label>
-      <input matInput>
+      <input matInput />
     </mat-form-field>
 
     <mat-form-field>
       <mat-label>Age</mat-label>
-      <input matInput type="number" min="1">
+      <input matInput type="number" min="1" />
     </mat-form-field>
-<!-- #docregion action-bar -->
+    <!-- #docregion action-bar -->
     <mat-action-row>
       <button mat-button color="primary" (click)="nextStep()">Next</button>
     </mat-action-row>
-<!-- #enddocregion action-bar -->
+    <!-- #enddocregion action-bar -->
   </mat-expansion-panel>
 
-  <mat-expansion-panel [expanded]="step === 1" (opened)="setStep(1)" hideToggle>
+  <mat-expansion-panel [expanded]="step() === 1" (opened)="setStep(1)" hideToggle>
     <mat-expansion-panel-header>
-      <mat-panel-title>
-        Destination
-      </mat-panel-title>
+      <mat-panel-title> Destination </mat-panel-title>
       <mat-panel-description>
         Type the country name
         <mat-icon>map</mat-icon>
@@ -39,7 +35,7 @@
 
     <mat-form-field>
       <mat-label>Country</mat-label>
-      <input matInput>
+      <input matInput />
     </mat-form-field>
 
     <mat-action-row>
@@ -48,11 +44,9 @@
     </mat-action-row>
   </mat-expansion-panel>
 
-  <mat-expansion-panel [expanded]="step === 2" (opened)="setStep(2)" hideToggle>
+  <mat-expansion-panel [expanded]="step() === 2" (opened)="setStep(2)" hideToggle>
     <mat-expansion-panel-header>
-      <mat-panel-title>
-        Day of the trip
-      </mat-panel-title>
+      <mat-panel-title> Day of the trip </mat-panel-title>
       <mat-panel-description>
         Inform the date you wish to travel
         <mat-icon>date_range</mat-icon>
@@ -61,7 +55,7 @@
 
     <mat-form-field>
       <mat-label>Date</mat-label>
-      <input matInput [matDatepicker]="picker" (focus)="picker.open()" readonly>
+      <input matInput [matDatepicker]="picker" (focus)="picker.open()" readonly />
     </mat-form-field>
     <mat-datepicker #picker></mat-datepicker>
 
@@ -70,5 +64,4 @@
       <button mat-button color="primary" (click)="nextStep()">End</button>
     </mat-action-row>
   </mat-expansion-panel>
-
 </mat-accordion>

src/components-examples/material/expansion/expansion-steps/expansion-steps-example.ts

@@ -1,11 +1,11 @@
-import {Component} from '@angular/core';
-import {MatDatepickerModule} from '@angular/material/datepicker';
+import {ChangeDetectionStrategy, Component, signal} from '@angular/core';
 import {MatButtonModule} from '@angular/material/button';
-import {MatInputModule} from '@angular/material/input';
+import {provideNativeDateAdapter} from '@angular/material/core';
+import {MatDatepickerModule} from '@angular/material/datepicker';
+import {MatExpansionModule} from '@angular/material/expansion';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatIconModule} from '@angular/material/icon';
-import {MatExpansionModule} from '@angular/material/expansion';
-import {provideNativeDateAdapter} from '@angular/material/core';
+import {MatInputModule} from '@angular/material/input';
 
 /**
  * @title Expansion panel as accordion
@@ -24,19 +24,20 @@ import {provideNativeDateAdapter} from '@angular/material/core';
     MatButtonModule,
     MatDatepickerModule,
   ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ExpansionStepsExample {
-  step = 0;
+  step = signal(0);
 
   setStep(index: number) {
-    this.step = index;
+    this.step.set(index);
   }
 
   nextStep() {
-    this.step++;
+    this.step.update(i => i + 1);
   }
 
   prevStep() {
-    this.step--;
+    this.step.update(i => i - 1);
   }
 }

src/material/expansion/expansion.md

@@ -12,32 +12,33 @@ as the control for expanding and collapsing. This header may optionally contain
 header to align with Material Design specifications.
 
 <!-- example({"example": "expansion-overview",
-              "file": "expansion-overview-example.html", 
+              "file": "expansion-overview-example.html",
               "region": "basic-panel"}) -->
-              
+
 By default, the expansion-panel header includes a toggle icon at the end of the
 header to indicate the expansion state. This icon can be hidden via the
 `hideToggle` property.
 
 <!-- example({"example": "expansion-overview",
               "file": "expansion-overview-example.html", 
-              "region": "hide-toggle"}) -->         
+              "region": "hide-toggle"}) -->
 
 #### Action bar
 
 Actions may optionally be included at the bottom of the panel, visible only when the expansion
 is in its expanded state.
 
 <!-- example({"example": "expansion-steps",
-              "file": "expansion-steps-example.html", 
+              "file": "expansion-steps-example.html",
               "region": "action-bar"}) -->
+
 #### Disabling a panel
 
 Expansion panels can be disabled using the `disabled` attribute. A disabled expansion panel can't
 be toggled by the user, but can still be manipulated programmatically.
 
 <!-- example({"example": "expansion-expand-collapse-all",
-              "file": "expansion-expand-collapse-all-example.html", 
+              "file": "expansion-expand-collapse-all-example.html",
               "region": "disabled"}) -->
 
 ### Accordion
@@ -47,13 +48,15 @@ expansions state to be set independently of each other. When `multi="false"` (de
 panel can be expanded at a given time:
 
 <!-- example({"example": "expansion-expand-collapse-all",
-              "file": "expansion-expand-collapse-all-example.html", 
+              "file": "expansion-expand-collapse-all-example.html",
               "region": "multi"}) -->
 
 ### Lazy rendering
+
 By default, the expansion panel content will be initialized even when the panel is closed.
 To instead defer initialization until the panel is open, the content should be provided as
 an `ng-template`:
+
 ```html
 <mat-expansion-panel>
   <mat-expansion-panel-header>