-
Notifications
You must be signed in to change notification settings - Fork 26.7k
docs: aria autocomplete component guide (WIP) #64864
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: 21.0.x
Are you sure you want to change the base?
Conversation
f24be59 to
92417e9
Compare
|
Deployed adev-preview for 56941bd to: https://ng-dev-previews-fw--pr-angular-angular-64864-adev-prev-xlucaspn.web.app Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt. |
92417e9 to
56941bd
Compare
| : []), | ||
| : [ | ||
| { | ||
| label: 'Angular Aria', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We'll want to have the status: 'new'
| @@ -0,0 +1,14 @@ | |||
| <!doctype html> | |||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't think we need that index.html
| changeDetection: ChangeDetectionStrategy.OnPush, | ||
| }) | ||
| export class App { | ||
| popover = viewChild<ElementRef>('popover'); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| popover = viewChild<ElementRef>('popover'); | |
| popover = viewChild<ElementRef<HTMLDivElement>>.required('popover'); |
Using required will allow us to remove the type assertion
| listbox = viewChild<Listbox<any>>(Listbox); | ||
| combobox = viewChild<Combobox<any>>(Combobox); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| listbox = viewChild<Listbox<any>>(Listbox); | |
| combobox = viewChild<Combobox<any>>(Combobox); | |
| listbox = viewChild.required<Listbox<unknown>>(Listbox); | |
| combobox = viewChild.required<Combobox<unknown>>(Combobox); |
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <base href="/" /> | ||
|
|
||
| <title>Autocomplete - Auto-Select Mode</title> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
| </head> | ||
|
|
||
| <body> | ||
| <app-root></app-root> | ||
| </body> | ||
| </html> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
iirc we don't need that index.html file if we don't those e2e tests.
Same for the main.ts below
For the context, we don't compile a new file but just the component itself.
|
|
||
| Autocomplete combines a text input with a dynamic suggestion list that narrows down options based on user input. Users can type to filter options, navigate suggestions with keyboard arrows, and select values from the list. This pattern is particularly useful for forms with many predefined options, such as state selection, product search, or user lookup. | ||
|
|
||
| <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/autocomplete/src/basic/app/app.component.ts"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The current behavior with hideCode is weird. I just want to confirm that we indeed want hideCode (and I can take care of fixing it)
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
Issue Number: N/A
What is the new behavior?
Does this PR introduce a breaking change?
Other information