docs: add signal form example for autocomplete (#33852)

Author: msmallest

src/components-examples/material/autocomplete/autocomplete-auto-active-first-option-signal-form/autocomplete-auto-active-first-option-signal-form-example.css

@@ -0,0 +1,9 @@
+.example-form {
+  min-width: 150px;
+  max-width: 500px;
+  width: 100%;
+}
+
+.example-full-width {
+  width: 100%;
+}

src/components-examples/material/autocomplete/autocomplete-auto-active-first-option-signal-form/autocomplete-auto-active-first-option-signal-form-example.html

@@ -0,0 +1,16 @@
+<form class="example-form">
+  <mat-form-field class="example-full-width">
+    <mat-label>Number</mat-label>
+    <input type="text" 
+           placeholder="Pick one" 
+           aria-label="Number" 
+           matInput 
+           [formField]="form"
+           [matAutocomplete]="auto">
+    <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
+      @for (option of filteredOptions(); track option) {
+        <mat-option [value]="option">{{option}}</mat-option>
+      }
+    </mat-autocomplete>
+  </mat-form-field>
+</form>

src/components-examples/material/autocomplete/autocomplete-auto-active-first-option-signal-form/autocomplete-auto-active-first-option-signal-form-example.ts

@@ -0,0 +1,31 @@
+import {Component, computed, signal} from '@angular/core';
+import {MatAutocompleteModule} from '@angular/material/autocomplete';
+import {MatInputModule} from '@angular/material/input';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {form, FormField} from '@angular/forms/signals';
+
+/**
+ * @title Highlight the first autocomplete option (signal forms)
+ */
+@Component({
+  selector: 'autocomplete-auto-active-first-option-signal-form-example',
+  templateUrl: './autocomplete-auto-active-first-option-signal-form-example.html',
+  styleUrl: './autocomplete-auto-active-first-option-signal-form-example.css',
+  imports: [MatFormFieldModule, MatInputModule, MatAutocompleteModule, FormField],
+})
+export class AutocompleteAutoActiveFirstOptionSignalFormExample {
+  protected form = form(signal(''));
+
+  protected filteredOptions = computed<string[]>(() => {
+    const formValue = this.form().value();
+    return this._filter(formValue);
+  });
+
+  private _options = ['One', 'Two', 'Three'] as const;
+
+  private _filter(value: string): string[] {
+    const filterValue = value.toLowerCase();
+
+    return this._options.filter(option => option.toLowerCase().includes(filterValue));
+  }
+}

src/components-examples/material/autocomplete/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.ts

@@ -8,7 +8,7 @@ import {MatInputModule} from '@angular/material/input';
 import {MatFormFieldModule} from '@angular/material/form-field';
 
 /**
- * @title Highlight the first autocomplete option
+ * @title Highlight the first autocomplete option (reactive forms)
  */
 @Component({
   selector: 'autocomplete-auto-active-first-option-example',

src/components-examples/material/autocomplete/index.ts

@@ -1,4 +1,5 @@
 export {AutocompleteAutoActiveFirstOptionExample} from './autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example';
+export {AutocompleteAutoActiveFirstOptionSignalFormExample} from './autocomplete-auto-active-first-option-signal-form/autocomplete-auto-active-first-option-signal-form-example';
 export {AutocompleteDisplayExample} from './autocomplete-display/autocomplete-display-example';
 export {AutocompleteFilterExample} from './autocomplete-filter/autocomplete-filter-example';
 export {AutocompleteOptgroupExample} from './autocomplete-optgroup/autocomplete-optgroup-example';