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 @@ +
+ + Number + + + @for (option of filteredOptions(); track option) { + {{option}} + } + + +
\ 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(() => { + 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)); + } +} diff --git a/src/components-examples/material/autocomplete/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.ts b/src/components-examples/material/autocomplete/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.ts index 26e0d259d0b1..2e9bb7585e69 100644 --- a/src/components-examples/material/autocomplete/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.ts +++ b/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', diff --git a/src/components-examples/material/autocomplete/index.ts b/src/components-examples/material/autocomplete/index.ts index 18aad314a477..d3025ec0a8de 100644 --- a/src/components-examples/material/autocomplete/index.ts +++ b/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';