docs: convert AutoComplete/Badge/Button/BottomSheet/ButtonToggle/Input to signals

src/components-examples/material/autocomplete/autocomplete-require-selection/autocomplete-require-selection-example.html

@@ -12,7 +12,7 @@
            (input)="filter()"
            (focus)="filter()">
     <mat-autocomplete requireSelection #auto="matAutocomplete">
-      @for (option of filteredOptions; track option) {
+      @for (option of filteredOptions(); track option) {
         <mat-option [value]="option">{{option}}</mat-option>
       }
     </mat-autocomplete>

src/components-examples/material/autocomplete/autocomplete-require-selection/autocomplete-require-selection-example.ts

@@ -1,4 +1,4 @@
-import {Component, ElementRef, ViewChild} from '@angular/core';
+import {Component, ElementRef, signal, viewChild} from '@angular/core';
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatAutocompleteModule} from '@angular/material/autocomplete';
 import {MatInputModule} from '@angular/material/input';
@@ -20,13 +20,13 @@ import {MatFormFieldModule} from '@angular/material/form-field';
   ],
 })
 export class AutocompleteRequireSelectionExample {
-  @ViewChild('input') input!: ElementRef<HTMLInputElement>;
+  input = viewChild.required<ElementRef<HTMLInputElement>>('input');
   myControl = new FormControl('');
   options: string[] = ['One', 'Two', 'Three', 'Four', 'Five'];
-  filteredOptions: string[] = this.options.slice();
+  filteredOptions = signal<string[]>(this.options.slice());
 
   filter(): void {
-    const filterValue = this.input.nativeElement.value.toLowerCase();
-    this.filteredOptions = this.options.filter(o => o.toLowerCase().includes(filterValue));
+    const filterValue = this.input().nativeElement.value.toLowerCase();
+    this.filteredOptions.set(this.options.filter(o => o.toLowerCase().includes(filterValue)));
   }
 }

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

@@ -19,7 +19,7 @@
 <div class="demo-section">
     Button toggles badge visibility
 <!-- #docregion mat-badge-hide -->
-    <button matButton="elevated" matBadge="7" [matBadgeHidden]="hidden" (click)="toggleBadgeVisibility()">
+    <button matButton="elevated" matBadge="7" [matBadgeHidden]="hidden()" (click)="toggleBadgeVisibility()">
         Hide
     </button>
 <!-- #enddocregion mat-badge-hide -->

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

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, signal} from '@angular/core';
 import {MatIconModule} from '@angular/material/icon';
 import {MatButtonModule} from '@angular/material/button';
 import {MatBadgeModule} from '@angular/material/badge';
@@ -13,9 +13,9 @@ import {MatBadgeModule} from '@angular/material/badge';
   imports: [MatBadgeModule, MatButtonModule, MatIconModule],
 })
 export class BadgeOverviewExample {
-  hidden = false;
+  hidden = signal(false);
 
   toggleBadgeVisibility() {
-    this.hidden = !this.hidden;
+    this.hidden.update(hidden => !hidden);
   }
 }

src/components-examples/material/bottom-sheet/bottom-sheet-harness/bottom-sheet-harness-example.ts

@@ -1,4 +1,4 @@
-import {Component, TemplateRef, ViewChild, inject} from '@angular/core';
+import {Component, TemplateRef, inject, viewChild} from '@angular/core';
 import {
   MatBottomSheet,
   MatBottomSheetConfig,
@@ -16,9 +16,9 @@ import {
 export class BottomSheetHarnessExample {
   readonly bottomSheet = inject(MatBottomSheet);
 
-  @ViewChild(TemplateRef) template!: TemplateRef<any>;
+  template = viewChild.required<TemplateRef<any>>(TemplateRef);
 
   open(config?: MatBottomSheetConfig) {
-    return this.bottomSheet.open(this.template, config);
+    return this.bottomSheet.open(this.template(), config);
   }
 }

src/components-examples/material/button-toggle/button-toggle-forms/button-toggle-forms-example.html

@@ -5,7 +5,7 @@ <h4>Button Toggle inside of a Template-driven form</h4>
     <mat-button-toggle value="italic">Italic</mat-button-toggle>
     <mat-button-toggle value="underline">Underline</mat-button-toggle>
   </mat-button-toggle-group>
-  <p>Chosen value is {{fontStyle}}</p>
+  <p>Chosen value is {{fontStyle()}}</p>
 </section>
 
 <section>

src/components-examples/material/button-toggle/button-toggle-forms/button-toggle-forms-example.ts

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, signal} from '@angular/core';
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatButtonToggleModule} from '@angular/material/button-toggle';
 
@@ -12,5 +12,5 @@ import {MatButtonToggleModule} from '@angular/material/button-toggle';
 })
 export class ButtonToggleFormsExample {
   fontStyleControl = new FormControl('');
-  fontStyle?: string;
+  fontStyle = signal<string | undefined>(undefined);
 }

src/components-examples/material/button/button-harness/button-harness-example.html

@@ -1,3 +1,3 @@
-<button id="basic" type="button" matButton (click)="clicked = true">
+<button id="basic" type="button" matButton (click)="clicked.set(true)">
   Basic button
 </button>

src/components-examples/material/button/button-harness/button-harness-example.spec.ts

@@ -27,8 +27,8 @@ describe('ButtonHarnessExample', () => {
 
   it('should click a button', async () => {
     const button = await loader.getHarness(MatButtonHarness.with({text: 'Basic button'}));
-    expect(fixture.componentInstance.clicked).toBe(false);
+    expect(fixture.componentInstance.clicked()).toBe(false);
     await button.click();
-    expect(fixture.componentInstance.clicked).toBe(true);
+    expect(fixture.componentInstance.clicked()).toBe(true);
   });
 });

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

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, signal} from '@angular/core';
 import {MatButtonModule} from '@angular/material/button';
 
 /**
@@ -10,5 +10,5 @@ import {MatButtonModule} from '@angular/material/button';
   imports: [MatButtonModule],
 })
 export class ButtonHarnessExample {
-  clicked = false;
+  clicked = signal(false);
 }

src/components-examples/material/input/input-clearable/input-clearable-example.html

@@ -1,8 +1,8 @@
 <mat-form-field class="example-form-field">
   <mat-label>Clearable input</mat-label>
   <input matInput type="text" [(ngModel)]="value">
-  @if (value) {
-    <button matSuffix matIconButton aria-label="Clear" (click)="value=''">
+  @if (value()) {
+    <button matSuffix matIconButton aria-label="Clear" (click)="value.set('')">
       <mat-icon>close</mat-icon>
     </button>
   }

src/components-examples/material/input/input-clearable/input-clearable-example.ts

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, signal} from '@angular/core';
 import {MatIconModule} from '@angular/material/icon';
 import {MatButtonModule} from '@angular/material/button';
 import {FormsModule} from '@angular/forms';
@@ -15,5 +15,5 @@ import {MatFormFieldModule} from '@angular/material/form-field';
   imports: [MatFormFieldModule, MatInputModule, FormsModule, MatButtonModule, MatIconModule],
 })
 export class InputClearableExample {
-  value = 'Clear me';
+  value = signal('Clear me');
 }