docs: convert list/pag/progb/progs/rad/rip/elev to signals

msmallest · msmallest · commit 341bc8235bf0 · 2026-07-06T11:04:19.000-05:00
diff --git a/src/components-examples/material/core/elevation-overview/elevation-overview-example.html b/src/components-examples/material/core/elevation-overview/elevation-overview-example.html
@@ -1,5 +1,5 @@
-<div class="example-container" [class.mat-shadow-1]="!isActive" [class.mat-shadow-4]="isActive">
+<div class="example-container" [class.mat-shadow-1]="!isActive()" [class.mat-shadow-4]="isActive()">
   Example
 </div>
 
-<button matButton (click)="isActive = !isActive">Toggle Elevation</button>
+<button matButton (click)="isActive.set(!isActive())">Toggle Elevation</button>
diff --git a/src/components-examples/material/core/elevation-overview/elevation-overview-example.ts b/src/components-examples/material/core/elevation-overview/elevation-overview-example.ts
@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, signal} from '@angular/core';
 import {MatButtonModule} from '@angular/material/button';
 
 /**
@@ -11,5 +11,5 @@ import {MatButtonModule} from '@angular/material/button';
   imports: [MatButtonModule],
 })
 export class ElevationOverviewExample {
-  isActive = false;
+  isActive = signal(false);
 }
diff --git a/src/components-examples/material/core/ripple-overview/ripple-overview-example.html b/src/components-examples/material/core/ripple-overview/ripple-overview-example.html
@@ -11,13 +11,12 @@
   <input matInput [(ngModel)]="color" type="text">
 </mat-form-field>
 
-
 <div class="example-ripple-container mat-shadow-2"
      matRipple
-     [matRippleCentered]="centered"
-     [matRippleDisabled]="disabled"
-     [matRippleUnbounded]="unbounded"
-     [matRippleRadius]="radius"
-     [matRippleColor]="color">
+     [matRippleCentered]="centered()"
+     [matRippleDisabled]="disabled()"
+     [matRippleUnbounded]="unbounded()"
+     [matRippleRadius]="radius()"
+     [matRippleColor]="color()">
   Click me
 </div>
diff --git a/src/components-examples/material/core/ripple-overview/ripple-overview-example.ts b/src/components-examples/material/core/ripple-overview/ripple-overview-example.ts
@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, signal} from '@angular/core';
 import {MatRippleModule} from '@angular/material/core';
 import {MatInputModule} from '@angular/material/input';
 import {MatFormFieldModule} from '@angular/material/form-field';
@@ -15,10 +15,10 @@ import {MatCheckboxModule} from '@angular/material/checkbox';
   imports: [MatCheckboxModule, FormsModule, MatFormFieldModule, MatInputModule, MatRippleModule],
 })
 export class RippleOverviewExample {
-  centered = false;
-  disabled = false;
-  unbounded = false;
+  centered = signal(false);
+  disabled = signal(false);
+  unbounded = signal(false);
 
-  radius!: number;
-  color!: string;
+  radius = signal<number>(0);
+  color = signal('');
 }
diff --git a/src/components-examples/material/list/list-navigation/list-navigation-example.html b/src/components-examples/material/list/list-navigation/list-navigation-example.html
@@ -3,8 +3,8 @@
     <a
       mat-list-item
       href="#{{link}}"
-      (click)="$event.preventDefault(); activeLink=link;"
-      [activated]="activeLink === link"
+      (click)="$event.preventDefault(); activeLink.set(link)"
+      [activated]="activeLink() === link"
       >{{link | titlecase}}</a
     >
   }
@@ -13,9 +13,9 @@ <h3 matSubheader>List with icons</h3>
   @for (link of fragments; track link) {
     <a
       mat-list-item
-      [activated]="activeLink===link"
+      [activated]="activeLink() === link"
       href="#{{link}}"
-      (click)="$event.preventDefault(); activeLink=link;"
+      (click)="$event.preventDefault(); activeLink.set(link);"
     >
       <mat-icon matListItemIcon>folder</mat-icon>
       <span matListItemTitle>{{ link | titlecase}}</span>
diff --git a/src/components-examples/material/list/list-navigation/list-navigation-example.ts b/src/components-examples/material/list/list-navigation/list-navigation-example.ts
@@ -1,5 +1,5 @@
 import {TitleCasePipe} from '@angular/common';
-import {Component} from '@angular/core';
+import {Component, signal} from '@angular/core';
 import {MatIconModule} from '@angular/material/icon';
 import {MatListModule} from '@angular/material/list';
 
@@ -13,5 +13,5 @@ import {MatListModule} from '@angular/material/list';
 })
 export class ListNavigationExample {
   fragments = ['inbox', 'outbox', 'drafts'];
-  activeLink: string | null = null;
+  activeLink = signal<string | null>(null);
 }
diff --git a/src/components-examples/material/paginator/paginator-configurable/paginator-configurable-example.html b/src/components-examples/material/paginator/paginator-configurable/paginator-configurable-example.html
@@ -16,7 +16,7 @@
 
   <mat-form-field>
     <mat-label>Page Size Options</mat-label>
-    <input matInput [ngModel]="pageSizeOptions" (ngModelChange)="setPageSizeOptions($event)"
+    <input matInput [ngModel]="pageSizeOptions()" (ngModelChange)="setPageSizeOptions($event)"
            [ngModelOptions]="{updateOn: 'blur'}" placeholder="Ex. 10,25,50">
   </mat-form-field>
 
@@ -31,17 +31,17 @@
 <mat-paginator #paginator
                class="demo-paginator"
                (page)="handlePageEvent($event)"
-               [length]="length"
-               [pageSize]="pageSize"
-               [disabled]="disabled"
-               [showFirstLastButtons]="showFirstLastButtons"
-               [pageSizeOptions]="showPageSizeOptions ? pageSizeOptions : []"
-               [hidePageSize]="hidePageSize"
-               [pageIndex]="pageIndex"
+               [length]="length()"
+               [pageSize]="pageSize()"
+               [disabled]="disabled()"
+               [showFirstLastButtons]="showFirstLastButtons()"
+               [pageSizeOptions]="showPageSizeOptions() ? pageSizeOptions() : []"
+               [hidePageSize]="hidePageSize()"
+               [pageIndex]="pageIndex()"
                aria-label="Select page">
 </mat-paginator>
 
 <div class="demo-data">
-  <div> Output event: {{(pageEvent | json) || 'No events dispatched yet'}} </div>
+  <div> Output event: {{(pageEvent() | json) || 'No events dispatched yet'}} </div>
   <div> getNumberOfPages: {{paginator.getNumberOfPages()}} </div>
 </div>
diff --git a/src/components-examples/material/paginator/paginator-configurable/paginator-configurable-example.ts b/src/components-examples/material/paginator/paginator-configurable/paginator-configurable-example.ts
@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, signal} from '@angular/core';
 import {PageEvent, MatPaginatorModule} from '@angular/material/paginator';
 import {JsonPipe} from '@angular/common';
 import {MatSlideToggleModule} from '@angular/material/slide-toggle';
@@ -23,28 +23,28 @@ import {MatFormFieldModule} from '@angular/material/form-field';
   ],
 })
 export class PaginatorConfigurableExample {
-  length = 50;
-  pageSize = 10;
-  pageIndex = 0;
-  pageSizeOptions = [5, 10, 25];
+  length = signal(50);
+  pageSize = signal(10);
+  pageIndex = signal(0);
+  pageSizeOptions = signal([5, 10, 25]);
 
-  hidePageSize = false;
-  showPageSizeOptions = true;
-  showFirstLastButtons = true;
-  disabled = false;
+  hidePageSize = signal(false);
+  showPageSizeOptions = signal(true);
+  showFirstLastButtons = signal(true);
+  disabled = signal(false);
 
-  pageEvent: PageEvent | undefined;
+  pageEvent = signal<PageEvent | undefined>(undefined);
 
   handlePageEvent(e: PageEvent) {
-    this.pageEvent = e;
-    this.length = e.length;
-    this.pageSize = e.pageSize;
-    this.pageIndex = e.pageIndex;
+    this.pageEvent.set(e);
+    this.length.set(e.length);
+    this.pageSize.set(e.pageSize);
+    this.pageIndex.set(e.pageIndex);
   }
 
   setPageSizeOptions(setPageSizeOptionsInput: string) {
     if (setPageSizeOptionsInput) {
-      this.pageSizeOptions = setPageSizeOptionsInput.split(',').map(str => +str);
+      this.pageSizeOptions.set(setPageSizeOptionsInput.split(',').map(str => +str));
     }
   }
 }
diff --git a/src/components-examples/material/paginator/paginator-harness/paginator-harness-example.html b/src/components-examples/material/paginator/paginator-harness/paginator-harness-example.html
@@ -1,9 +1,9 @@
 <mat-paginator
     (page)="handlePageEvent($event)"
-    [length]="length"
-    [pageSize]="pageSize"
-    [showFirstLastButtons]="showFirstLastButtons"
-    [pageSizeOptions]="pageSizeOptions"
-    [pageIndex]="pageIndex"
+    [length]="length()"
+    [pageSize]="pageSize()"
+    [showFirstLastButtons]="showFirstLastButtons()"
+    [pageSizeOptions]="pageSizeOptions()"
+    [pageIndex]="pageIndex()"
     aria-label="Select page">
 </mat-paginator>
diff --git a/src/components-examples/material/paginator/paginator-harness/paginator-harness-example.spec.ts b/src/components-examples/material/paginator/paginator-harness/paginator-harness-example.spec.ts
@@ -24,26 +24,26 @@ describe('PaginatorHarnessExample', () => {
   it('should be able to navigate between pages', async () => {
     const paginator = await loader.getHarness(MatPaginatorHarness);
 
-    expect(instance.pageIndex).toBe(0);
+    expect(instance.pageIndex()).toBe(0);
     await paginator.goToNextPage();
-    expect(instance.pageIndex).toBe(1);
+    expect(instance.pageIndex()).toBe(1);
     await paginator.goToPreviousPage();
-    expect(instance.pageIndex).toBe(0);
+    expect(instance.pageIndex()).toBe(0);
   });
 
   it('should be able to go to the last page', async () => {
     const paginator = await loader.getHarness(MatPaginatorHarness);
 
-    expect(instance.pageIndex).toBe(0);
+    expect(instance.pageIndex()).toBe(0);
     await paginator.goToLastPage();
-    expect(instance.pageIndex).toBe(49);
+    expect(instance.pageIndex()).toBe(49);
   });
 
   it('should be able to set the page size', async () => {
     const paginator = await loader.getHarness(MatPaginatorHarness);
 
-    expect(instance.pageSize).toBe(10);
+    expect(instance.pageSize()).toBe(10);
     await paginator.setPageSize(25);
-    expect(instance.pageSize).toBe(25);
+    expect(instance.pageSize()).toBe(25);
   });
 });
diff --git a/src/components-examples/material/paginator/paginator-harness/paginator-harness-example.ts b/src/components-examples/material/paginator/paginator-harness/paginator-harness-example.ts
@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, signal} from '@angular/core';
 import {PageEvent, MatPaginatorModule} from '@angular/material/paginator';
 
 /**
@@ -10,15 +10,15 @@ import {PageEvent, MatPaginatorModule} from '@angular/material/paginator';
   imports: [MatPaginatorModule],
 })
 export class PaginatorHarnessExample {
-  length = 500;
-  pageSize = 10;
-  pageIndex = 0;
-  pageSizeOptions = [5, 10, 25];
-  showFirstLastButtons = true;
+  length = signal(500);
+  pageSize = signal(10);
+  pageIndex = signal(0);
+  pageSizeOptions = signal([5, 10, 25]);
+  showFirstLastButtons = signal(true);
 
   handlePageEvent(event: PageEvent) {
-    this.length = event.length;
-    this.pageSize = event.pageSize;
-    this.pageIndex = event.pageIndex;
+    this.length.set(event.length);
+    this.pageSize.set(event.pageSize);
+    this.pageIndex.set(event.pageIndex);
   }
 }
diff --git a/src/components-examples/material/progress-bar/progress-bar-configurable/progress-bar-configurable-example.html b/src/components-examples/material/progress-bar/progress-bar-configurable/progress-bar-configurable-example.html
@@ -20,15 +20,15 @@ <h2 class="example-h2">Progress bar configuration</h2>
       </mat-radio-group>
     </section>
 
-    @if (mode === 'determinate' || mode === 'buffer') {
+    @if (mode() === 'determinate' || mode() === 'buffer') {
       <section class="example-section">
         <label class="example-margin">Progress:</label>
         <mat-slider class="example-margin">
           <input type="range" [(ngModel)]="value" matSliderThumb>
         </mat-slider>
       </section>
     }
-    @if (mode === 'buffer') {
+    @if (mode() === 'buffer') {
       <section class="example-section">
         <label class="example-margin">Buffer:</label>
         <mat-slider class="example-margin">
@@ -46,9 +46,9 @@ <h2 class="example-h2">Result</h2>
     <section class="example-section">
       <mat-progress-bar
           class="example-margin"
-          [mode]="mode"
-          [value]="value"
-          [bufferValue]="bufferValue">
+          [mode]="mode()"
+          [value]="value()"
+          [bufferValue]="bufferValue()">
       </mat-progress-bar>
     </section>
   </mat-card-content>
diff --git a/src/components-examples/material/progress-bar/progress-bar-configurable/progress-bar-configurable-example.ts b/src/components-examples/material/progress-bar/progress-bar-configurable/progress-bar-configurable-example.ts
@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, signal} from '@angular/core';
 import {ProgressBarMode, MatProgressBarModule} from '@angular/material/progress-bar';
 import {MatSliderModule} from '@angular/material/slider';
 import {FormsModule} from '@angular/forms';
@@ -15,7 +15,7 @@ import {MatCardModule} from '@angular/material/card';
   imports: [MatCardModule, MatRadioModule, FormsModule, MatSliderModule, MatProgressBarModule],
 })
 export class ProgressBarConfigurableExample {
-  mode: ProgressBarMode = 'determinate';
-  value = 50;
-  bufferValue = 75;
+  mode = signal<ProgressBarMode>('determinate');
+  value = signal(50);
+  bufferValue = signal(75);
 }
diff --git a/src/components-examples/material/progress-spinner/progress-spinner-configurable/progress-spinner-configurable-example.html b/src/components-examples/material/progress-spinner/progress-spinner-configurable/progress-spinner-configurable-example.html
@@ -14,7 +14,7 @@ <h2 class="example-h2">Progress spinner configuration</h2>
       </mat-radio-group>
     </section>
 
-    @if (mode === 'determinate') {
+    @if (mode() === 'determinate') {
       <section class="example-section">
         <label class="example-margin">Progress:</label>
         <mat-slider class="example-margin">
@@ -31,8 +31,8 @@ <h2 class="example-h2">Result</h2>
 
     <mat-progress-spinner
         class="example-margin"
-        [mode]="mode"
-        [value]="value">
+        [mode]="mode()"
+        [value]="value()">
     </mat-progress-spinner>
   </mat-card-content>
 </mat-card>
diff --git a/src/components-examples/material/progress-spinner/progress-spinner-configurable/progress-spinner-configurable-example.ts b/src/components-examples/material/progress-spinner/progress-spinner-configurable/progress-spinner-configurable-example.ts
@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, signal} from '@angular/core';
 import {ProgressSpinnerMode, MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 import {MatSliderModule} from '@angular/material/slider';
 import {FormsModule} from '@angular/forms';
@@ -15,6 +15,6 @@ import {MatCardModule} from '@angular/material/card';
   imports: [MatCardModule, MatRadioModule, FormsModule, MatSliderModule, MatProgressSpinnerModule],
 })
 export class ProgressSpinnerConfigurableExample {
-  mode: ProgressSpinnerMode = 'determinate';
-  value = 50;
+  mode = signal<ProgressSpinnerMode>('determinate');
+  value = signal(50);
 }
diff --git a/src/components-examples/material/radio/radio-ng-model/radio-ng-model-example.html b/src/components-examples/material/radio/radio-ng-model/radio-ng-model-example.html
@@ -7,4 +7,4 @@
     <mat-radio-button class="example-radio-button" [value]="season">{{season}}</mat-radio-button>
   }
 </mat-radio-group>
-<div>Your favorite season is: {{favoriteSeason}}</div>
+<div>Your favorite season is: {{favoriteSeason()}}</div>
diff --git a/src/components-examples/material/radio/radio-ng-model/radio-ng-model-example.ts b/src/components-examples/material/radio/radio-ng-model/radio-ng-model-example.ts
@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, signal} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatRadioModule} from '@angular/material/radio';
 
@@ -12,6 +12,6 @@ import {MatRadioModule} from '@angular/material/radio';
   imports: [MatRadioModule, FormsModule],
 })
 export class RadioNgModelExample {
-  favoriteSeason = '';
+  favoriteSeason = signal('');
   seasons: string[] = ['Winter', 'Spring', 'Summer', 'Autumn'];
 }
