docs: convert list/pag/progb/progs/rad/rip/elev to signals (#33497)

Author: msmallest

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>

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);
 }

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>

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('');
 }

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>

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);
 }

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>

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));
     }
   }
 }

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>

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);
   });
 });