You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: adev-ja/src/content/best-practices/style-guide.en.md
+3-3Lines changed: 3 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -110,11 +110,11 @@ When in doubt, go with the approach that leads to smaller files.
110
110
111
111
### Prefer the `inject` function over constructor parameter injection
112
112
113
-
Prefer using the `inject` function over injecting constructor parameters. The `inject` function works the same way as constructor parameter injection, but offers several style advantages:
113
+
Prefer using the [`inject`](/api/core/inject) function over injecting constructor parameters. The [`inject`](/api/core/inject) function works the same way as constructor parameter injection, but offers several style advantages:
114
114
115
-
-`inject` is generally more readable, especially when a class injects many dependencies.
115
+
-[`inject`](/api/core/inject) is generally more readable, especially when a class injects many dependencies.
116
116
- It's more syntactically straightforward to add comments to injected dependencies
117
-
-`inject` offers better type inference.
117
+
-[`inject`](/api/core/inject) offers better type inference.
118
118
- When targeting ES2022+ with [`useDefineForClassFields`](https://www.typescriptlang.org/tsconfig/#useDefineForClassFields), you can avoid separating field declaration and initialization when fields read on injected dependencies.
119
119
120
120
[You can refactor existing code to `inject` with an automatic tool](reference/migrations/inject-function).
Copy file name to clipboardExpand all lines: adev-ja/src/content/guide/aria/combobox.en.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -51,7 +51,7 @@ Use documented patterns instead when:
51
51
- Single-selection dropdowns are needed - See the [Select pattern](guide/aria/select) for complete dropdown implementation
52
52
- Multiple-selection dropdowns are needed - See the [Multiselect pattern](guide/aria/multiselect) for multi-select with compact display
53
53
54
-
Note: The [Autocomplete](guide/aria/autocomplete), [Select](guide/aria/select), and [Multiselect](guide/aria/multiselect) guides show documented patterns that combine this directive with [Listbox](guide/aria/listbox) for specific use cases.
54
+
NOTE: The [Autocomplete](guide/aria/autocomplete), [Select](guide/aria/select), and [Multiselect](guide/aria/multiselect) guides show documented patterns that combine this directive with [Listbox](guide/aria/listbox) for specific use cases.
Copy file name to clipboardExpand all lines: adev-ja/src/content/guide/aria/grid.en.md
+4-4Lines changed: 4 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -10,10 +10,10 @@
10
10
11
11
A grid enables users to navigate two-dimensional data or interactive elements using directional arrow keys, Home, End, and Page Up/Down. Grids work for data tables, calendars, spreadsheets, and layout patterns that group related interactive elements.
|`'follow'`| Automatically selects the focused item, providing faster interaction when selection changes frequently |
121
+
|`'explicit'`| Requires Space or Enter to confirm selection, preventing accidental changes while navigating |
117
122
118
-
The `'follow'` mode automatically selects the focused item, providing faster interaction when selection changes frequently. The `'explicit'` mode requires Space or Enter to confirm selection, preventing accidental changes while navigating. Dropdown patterns typically use `'follow'` mode for single selection.
123
+
TIP: Dropdown patterns typically use `'follow'` mode for single selection.
Copy file name to clipboardExpand all lines: adev-ja/src/content/guide/aria/overview.en.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,7 +3,7 @@
3
3
4
4
## What is Angular Aria?
5
5
6
-
Building accessible components seems straightforward, but implementing them according to the W3 Accessibility Guidelines requires significant effort and accessibility expertise.
6
+
Building accessible components seems straightforward, but implementing them according to the W3C Accessibility Guidelines requires significant effort and accessibility expertise.
7
7
8
8
Angular Aria is a collection of headless, accessible directives that implement common WAI-ARIA patterns. The directives handle keyboard interactions, ARIA attributes, focus management, and screen reader support. All you have to do is provide the HTML structure, CSS styling, and business logic!
Subscribe to events of the DOM element that hosts an attribute directive (the `<p>` in this case) by configuring event listeners on the directive's [`host` property](guide/components/host-elements#binding-to-the-host-element).
55
55
@@ -69,19 +69,19 @@ This section walks you through setting the highlight color while applying the `H
69
69
70
70
1. In `highlight.directive.ts`, import `Input` from `@angular/core`.
1. In `highlight.directive.ts`, revise `onMouseEnter` method so that it first tries to highlight with `appHighlight` and falls back to `red` if `appHighlight` is `undefined`.
104
+
3. In `highlight.directive.ts`, revise `onMouseEnter` method so that it first tries to highlight with `appHighlight` and falls back to `red` if `appHighlight` is `undefined`.
4. Serve your application to verify that the user can choose the color with the radio buttons.
107
108
108
-
1. Serve your application to verify that the user can choose the color with the radio buttons.
109
-
110
-
<imgalt="Animated gif of the refactored highlight directive changing color according to the radio button the user selects"src="assets/images/guide/attribute-directives/highlight-directive-v2-anim.gif">
109
+
<imgalt="Animated gif of the refactored highlight directive changing color according to the radio button the user selects"src="assets/images/guide/attribute-directives/highlight-directive-v2-anim.gif">
111
110
112
111
## Binding to a second property
113
112
114
113
This section guides you through configuring your application so the developer can set the default color.
115
114
116
115
1. Add a second `input()` property to `HighlightDirective` called `defaultColor`.
1. Revise the directive's `onMouseEnter` so that it first tries to highlight with the `appHighlight`, then with the `defaultColor`, and falls back to `red` if both properties are `undefined`.
119
+
2. Revise the directive's `onMouseEnter` so that it first tries to highlight with the `appHighlight`, then with the `defaultColor`, and falls back to `red` if both properties are `undefined`.
Copy file name to clipboardExpand all lines: adev-ja/src/content/guide/forms/reactive-forms.en.md
+31Lines changed: 31 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -381,6 +381,36 @@ Each time a new alias instance is added, the new form array instance is provided
381
381
382
382
</docs-step>
383
383
384
+
### Using `FormArrayDirective` for top-level form arrays
385
+
386
+
You can bind a `FormArray` directly to a `<form>` element by using the `FormArrayDirective`.
387
+
This is useful when the form does not use a top-level `FormGroup`, and the array itself represents the full form model.
388
+
389
+
```angular-ts
390
+
import { Component } from '@angular/core';
391
+
import { FormArray, FormControl } from '@angular/forms';
392
+
393
+
@Component({
394
+
selector: 'form-array-example',
395
+
template: `
396
+
<form [formArray]="form">
397
+
@for (control of form.controls; track $index) {
398
+
<input [formControlName]="$index">
399
+
}
400
+
</form>
401
+
`,
402
+
})
403
+
export class FormArrayExampleComponent {
404
+
controls = [
405
+
new FormControl('fish'),
406
+
new FormControl('cat'),
407
+
new FormControl('dog'),
408
+
];
409
+
410
+
form = new FormArray(this.controls);
411
+
}
412
+
```
413
+
384
414
<docs-steptitle="Add an alias">
385
415
386
416
Initially, the form contains one `Alias` field. To add another field, click the **Add Alias** button. You can also validate the array of aliases reported by the form model displayed by `Form Value` at the bottom of the template. Instead of a form control instance for each alias, you can compose another form group instance with additional fields. The process of defining a control for each item is the same.
@@ -542,3 +572,4 @@ For complete syntax details, see the API reference documentation for the [Forms
542
572
|`FormGroupDirective`| Syncs an existing `FormGroup` instance to a DOM element. |
543
573
|`FormGroupName`| Syncs a nested `FormGroup` instance to a DOM element. |
544
574
|`FormArrayName`| Syncs a nested `FormArray` instance to a DOM element. |
575
+
|`FormArrayDirective`| Syncs a standalone `FormArray` instance to a DOM element. |
Copy file name to clipboardExpand all lines: adev-ja/src/content/guide/http/interceptors.en.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -85,7 +85,7 @@ CRITICAL: The body of a request or response is **not** protected from deep mutat
85
85
86
86
## Dependency injection in interceptors
87
87
88
-
Interceptors are run in the _injection context_ of the injector which registered them, and can use Angular's `inject` API to retrieve dependencies.
88
+
Interceptors are run in the _injection context_ of the injector which registered them, and can use Angular's [`inject`](/api/core/inject) API to retrieve dependencies.
89
89
90
90
For example, suppose an application has a service called `AuthService`, which creates authentication tokens for outgoing requests. An interceptor can inject and use this service:
0 commit comments