diff --git a/src/components-examples/material/autocomplete/autocomplete-auto-active-first-option-signal-form/autocomplete-auto-active-first-option-signal-form-example.css b/src/components-examples/material/autocomplete/autocomplete-auto-active-first-option-signal-form/autocomplete-auto-active-first-option-signal-form-example.css new file mode 100644 index 000000000000..08fa67536b1f --- /dev/null +++ b/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%; +} diff --git a/src/components-examples/material/autocomplete/autocomplete-auto-active-first-option-signal-form/autocomplete-auto-active-first-option-signal-form-example.html b/src/components-examples/material/autocomplete/autocomplete-auto-active-first-option-signal-form/autocomplete-auto-active-first-option-signal-form-example.html new file mode 100644 index 000000000000..4372cec493be --- /dev/null +++ b/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 @@ +
\ No newline at end of file diff --git a/src/components-examples/material/autocomplete/autocomplete-auto-active-first-option-signal-form/autocomplete-auto-active-first-option-signal-form-example.ts b/src/components-examples/material/autocomplete/autocomplete-auto-active-first-option-signal-form/autocomplete-auto-active-first-option-signal-form-example.ts new file mode 100644 index 000000000000..da40bfa4e13e --- /dev/null +++ b/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