From 8a04384bf783056d29e6e91d4fc2ec1395f77714 Mon Sep 17 00:00:00 2001 From: Suguru Inatomi Date: Wed, 3 Dec 2025 08:50:34 +0900 Subject: [PATCH 01/16] chore: update origin to 29223c440fcd313066e62332e855ee7ec1189713 --- origin | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/origin b/origin index 51ebe9a4f..29223c440 160000 --- a/origin +++ b/origin @@ -1 +1 @@ -Subproject commit 51ebe9a4fcc158e11acc9a5ce25746b70a505b96 +Subproject commit 29223c440fcd313066e62332e855ee7ec1189713 From b032dcc142fa50f13c513aa58698063acd1159a8 Mon Sep 17 00:00:00 2001 From: Suguru Inatomi Date: Wed, 3 Dec 2025 08:50:51 +0900 Subject: [PATCH 02/16] fix: migrate untranslated files --- .../guide/di/creating-injectable-service.md | 8 +++--- .../content/guide/i18n/format-data-locale.md | 16 +++--------- .../content/guide/i18n/manage-marked-text.md | 24 +++++------------- .../reference/extended-diagnostics/NG8101.md | 4 +-- .../reference/extended-diagnostics/NG8102.md | 4 +-- .../reference/extended-diagnostics/NG8105.md | 4 +-- .../reference/extended-diagnostics/NG8107.md | 6 ++--- .../reference/extended-diagnostics/NG8108.md | 4 +-- .../reference/extended-diagnostics/NG8109.md | 4 +-- .../reference/extended-diagnostics/NG8111.md | 4 +-- .../reference/extended-diagnostics/NG8114.md | 4 +-- .../reference/extended-diagnostics/NG8115.md | 4 +-- .../reference/extended-diagnostics/NG8116.md | 4 +-- .../reference/extended-diagnostics/NG8117.md | 4 +-- .../reference/migrations/inject-function.md | 14 +++++------ .../content/reference/migrations/overview.md | 2 +- .../reference/migrations/self-closing-tags.md | 8 +++--- .../reference/migrations/signal-inputs.md | 25 ++++++++++--------- .../reference/migrations/signal-queries.md | 4 +-- .../reference/migrations/standalone.md | 4 +-- .../content/tools/cli/schematics-authoring.md | 17 ++++++------- .../tools/libraries/creating-libraries.md | 2 +- .../first-app/steps/10-routing/README.md | 2 +- 23 files changed, 75 insertions(+), 97 deletions(-) diff --git a/adev-ja/src/content/guide/di/creating-injectable-service.md b/adev-ja/src/content/guide/di/creating-injectable-service.md index f8b15a9cc..0d1784ea2 100644 --- a/adev-ja/src/content/guide/di/creating-injectable-service.md +++ b/adev-ja/src/content/guide/di/creating-injectable-service.md @@ -21,13 +21,13 @@ Angular helps you follow these principles by making it easy to factor your appli Here's an example of a service class that logs to the browser console: - +```ts {header: "logger.service.ts (class)"} export class Logger { log(msg: unknown) { console.log(msg); } error(msg: unknown) { console.error(msg); } warn(msg: unknown) { console.warn(msg); } } - +``` Services can depend on other services. For example, here's a `HeroService` that depends on the `Logger` service, and also uses `BackendService` to get heroes. @@ -101,7 +101,7 @@ For clarity and maintainability, it is recommended that you define components an ## Injecting services -To inject a service as a dependency into a component, you can declare a class field representing the dependency and use Angular's `inject` function to initialize it. +To inject a service as a dependency into a component, you can declare a class field representing the dependency and use Angular's [`inject`](/api/core/inject) function to initialize it. The following example specifies the `HeroService` in the `HeroListComponent`. The type of `heroService` is `HeroService`. @@ -120,7 +120,7 @@ It is also possible to inject a service into a component using the component's c constructor(private heroService: HeroService) ``` -The `inject` method can be used in both classes and functions, while the constructor method can naturally only be used in a class constructor. However, in either case a dependency may only be injected in a valid [injection context](guide/di/dependency-injection-context), usually in the construction or initialization of a component. +The [`inject`](/api/core/inject) method can be used in both classes and functions, while the constructor method can naturally only be used in a class constructor. However, in either case a dependency may only be injected in a valid [injection context](guide/di/dependency-injection-context), usually in the construction or initialization of a component. ## Injecting services in other services diff --git a/adev-ja/src/content/guide/i18n/format-data-locale.md b/adev-ja/src/content/guide/i18n/format-data-locale.md index 2e70eb9c7..8f90ef869 100644 --- a/adev-ja/src/content/guide/i18n/format-data-locale.md +++ b/adev-ja/src/content/guide/i18n/format-data-locale.md @@ -14,13 +14,9 @@ The data transformation pipes use the [`LOCALE_ID`][ApiCoreLocaleId] token to fo To display the current date in the format for the current locale, use the following format for the `DatePipe`. - - - - +```angular-html {{ today | date }} - - +``` ## Override current locale for CurrencyPipe @@ -28,13 +24,9 @@ Add the `locale` parameter to the pipe to override the current value of `LOCALE_ To force the currency to use American English \(`en-US`\), use the following format for the `CurrencyPipe` - - - - +```angular-html {{ amount | currency : 'en-US' }} - - +``` HELPFUL: The locale specified for the `CurrencyPipe` overrides the global `LOCALE_ID` token of your application. diff --git a/adev-ja/src/content/guide/i18n/manage-marked-text.md b/adev-ja/src/content/guide/i18n/manage-marked-text.md index 5735ae5ed..07308749e 100644 --- a/adev-ja/src/content/guide/i18n/manage-marked-text.md +++ b/adev-ja/src/content/guide/i18n/manage-marked-text.md @@ -28,13 +28,9 @@ The following example defines the `introductionHeader` custom ID in a heading el The following example defines the `introductionHeader` custom ID for a variable. - - - - +```ts variableText1 = $localize`:@@introductionHeader:Hello i18n!`; - - +``` When you specify a custom ID, the extractor generates a translation unit with the custom ID. @@ -54,13 +50,9 @@ The following example includes a description, followed by the custom ID. The following example defines the `introductionHeader` custom ID and description for a variable. - - - - +```ts variableText2 = $localize`:An introduction header for this sample@@introductionHeader:Hello i18n!`; - - +``` The following example adds a meaning. @@ -68,13 +60,9 @@ The following example adds a meaning. The following example defines the `introductionHeader` custom ID for a variable. - - - - +```ts variableText3 = $localize`:site header|An introduction header for this sample@@introductionHeader:Hello i18n!`; - - +``` ### Define unique custom IDs diff --git a/adev-ja/src/content/reference/extended-diagnostics/NG8101.md b/adev-ja/src/content/reference/extended-diagnostics/NG8101.md index af36e4e0a..43799f403 100644 --- a/adev-ja/src/content/reference/extended-diagnostics/NG8101.md +++ b/adev-ja/src/content/reference/extended-diagnostics/NG8101.md @@ -2,7 +2,7 @@ This diagnostic detects a backwards "banana-in-box" syntax for [two-way bindings](guide/templates/two-way-binding). -``` +```html ``` @@ -18,7 +18,7 @@ Fix the typo. As the name suggests, the banana `(` should go _inside_ the box `[]`. In this case: -``` +```html ``` diff --git a/adev-ja/src/content/reference/extended-diagnostics/NG8102.md b/adev-ja/src/content/reference/extended-diagnostics/NG8102.md index 3a774ad6d..15133eb4a 100644 --- a/adev-ja/src/content/reference/extended-diagnostics/NG8102.md +++ b/adev-ja/src/content/reference/extended-diagnostics/NG8102.md @@ -32,7 +32,7 @@ Double-check the type of the input and confirm whether it is actually expected t If the input should be nullable, add `null` or `undefined` to its type to indicate this. -```ts +```angular-ts import {Component} from '@angular/core'; @@ -49,7 +49,7 @@ username: string | null = 'Angelino'; If the input should _not_ be nullable, delete the `??` operator and its right operand, since the value is guaranteed by TypeScript to always be non-nullable. -```ts +```angular-ts import {Component} from '@angular/core'; diff --git a/adev-ja/src/content/reference/extended-diagnostics/NG8105.md b/adev-ja/src/content/reference/extended-diagnostics/NG8105.md index b5c26e8f3..5c7d80c2d 100644 --- a/adev-ja/src/content/reference/extended-diagnostics/NG8105.md +++ b/adev-ja/src/content/reference/extended-diagnostics/NG8105.md @@ -2,7 +2,7 @@ This diagnostic is emitted when an expression used in `*ngFor` is missing the `let` keyword. -```typescript +```angular-ts import { Component } from '@angular/core'; @Component({ @@ -22,7 +22,7 @@ A missing `let` is indicative of a syntax error in the `*ngFor` string. It also Add the missing `let` keyword. -```typescript +```angular-ts import { Component } from '@angular/core'; @Component({ diff --git a/adev-ja/src/content/reference/extended-diagnostics/NG8107.md b/adev-ja/src/content/reference/extended-diagnostics/NG8107.md index 00c34bba2..4910b7834 100644 --- a/adev-ja/src/content/reference/extended-diagnostics/NG8107.md +++ b/adev-ja/src/content/reference/extended-diagnostics/NG8107.md @@ -2,7 +2,7 @@ This diagnostic detects when the left side of an optional chain operation (`.?`) does not include `null` or `undefined` in its type in Angular templates. -```typescript +```angular-ts import { Component } from '@angular/core'; @Component({ @@ -28,7 +28,7 @@ Double-check the type of the input and confirm whether it is actually expected t If the input should be nullable, add `null` or `undefined` to its type to indicate this. -```typescript +```angular-ts import { Component } from '@angular/core'; @Component({ @@ -43,7 +43,7 @@ class MyComponent { If the input should not be nullable, delete the `?` operator. -```typescript +```angular-ts import { Component } from '@angular/core'; @Component({ diff --git a/adev-ja/src/content/reference/extended-diagnostics/NG8108.md b/adev-ja/src/content/reference/extended-diagnostics/NG8108.md index 1302d1ec9..6a623d99c 100644 --- a/adev-ja/src/content/reference/extended-diagnostics/NG8108.md +++ b/adev-ja/src/content/reference/extended-diagnostics/NG8108.md @@ -3,7 +3,7 @@ `ngSkipHydration` is a special attribute which indicates to Angular that a particular component should be opted-out of [hydration](guide/hydration). This diagnostic ensures that this attribute `ngSkipHydration` is set statically and the value is either set to `"true"` or an empty value. -```typescript +```angular-ts import { Component } from '@angular/core'; @Component({ @@ -22,7 +22,7 @@ As a special attribute implemented by Angular, `ngSkipHydration` needs to be sta When using the `ngSkipHydration`, ensure that it's set as a static attribute (i.e. you do not use the Angular template binding syntax). -```typescript +```angular-ts import { Component } from '@angular/core'; @Component({ diff --git a/adev-ja/src/content/reference/extended-diagnostics/NG8109.md b/adev-ja/src/content/reference/extended-diagnostics/NG8109.md index 6ed6701c8..c29349c95 100644 --- a/adev-ja/src/content/reference/extended-diagnostics/NG8109.md +++ b/adev-ja/src/content/reference/extended-diagnostics/NG8109.md @@ -2,7 +2,7 @@ This diagnostic detects uninvoked signals in template interpolations. -```typescript +```angular-ts import { Component, signal, Signal } from '@angular/core'; @Component({ @@ -22,7 +22,7 @@ This means they are meant to be invoked when used in template interpolations to Ensure to invoke the signal when you use it within a template interpolation to render its value. -```typescript +```angular-ts import { Component, signal, Signal } from '@angular/core'; @Component({ diff --git a/adev-ja/src/content/reference/extended-diagnostics/NG8111.md b/adev-ja/src/content/reference/extended-diagnostics/NG8111.md index c1f58ec8a..2e54c0ddd 100644 --- a/adev-ja/src/content/reference/extended-diagnostics/NG8111.md +++ b/adev-ja/src/content/reference/extended-diagnostics/NG8111.md @@ -2,7 +2,7 @@ This diagnostic detects uninvoked functions in event bindings. -```typescript +```angular-ts import { Component, signal, Signal } from '@angular/core'; @Component({ @@ -24,7 +24,7 @@ If the function is not invoked, it will not execute when the event is triggered. Ensure to invoke the function when you use it in an event binding to execute the function when the event is triggered. -```typescript +```angular-ts import { Component } from '@angular/core'; @Component({ diff --git a/adev-ja/src/content/reference/extended-diagnostics/NG8114.md b/adev-ja/src/content/reference/extended-diagnostics/NG8114.md index 7e1bd1c9c..c74e91ea4 100644 --- a/adev-ja/src/content/reference/extended-diagnostics/NG8114.md +++ b/adev-ja/src/content/reference/extended-diagnostics/NG8114.md @@ -3,7 +3,7 @@ This diagnostic detects cases where the nullish coalescing operator (`??`) is mixed with the logical or (`||`) or logical and (`&&`) operators without parentheses to disambiguate precedence. -```typescript +```angular-ts import { Component, signal, Signal } from '@angular/core'; @Component({ @@ -31,7 +31,7 @@ Always use parentheses to disambiguate in theses situations. If you're unsure wh intent of the code was but want to keep the behavior the same, place the parentheses around the `??` operator. -```typescript +```angular-ts import { Component, signal, Signal } from '@angular/core'; @Component({ diff --git a/adev-ja/src/content/reference/extended-diagnostics/NG8115.md b/adev-ja/src/content/reference/extended-diagnostics/NG8115.md index 75144b747..a4310fcb0 100644 --- a/adev-ja/src/content/reference/extended-diagnostics/NG8115.md +++ b/adev-ja/src/content/reference/extended-diagnostics/NG8115.md @@ -2,7 +2,7 @@ This diagnostic detects when a track function is not invoked in `@for` blocks. -```typescript +```angular-ts import { Component } from '@angular/core'; @Component({ @@ -24,7 +24,7 @@ When you don't invoke the function, the reconcialiation algorithm will use the f Ensure to invoke the track function when you use it in a `@for` block to execute the function so the loop can uniquely identify items. -```typescript +```angular-ts import { Component } from '@angular/core'; @Component({ diff --git a/adev-ja/src/content/reference/extended-diagnostics/NG8116.md b/adev-ja/src/content/reference/extended-diagnostics/NG8116.md index 4c9231ff7..5664ec173 100644 --- a/adev-ja/src/content/reference/extended-diagnostics/NG8116.md +++ b/adev-ja/src/content/reference/extended-diagnostics/NG8116.md @@ -2,7 +2,7 @@ This diagnostic ensures that a standalone component using custom structural directives (e.g., `*select` or `*featureFlag`) in a template has the necessary imports for those directives. -```typescript +```angular-ts import { Component } from '@angular/core'; @Component({ @@ -21,7 +21,7 @@ Using a structural directive without importing it will fail at runtime, as Angul Make sure that the corresponding structural directive is imported into the component: -```typescript +```angular-ts import { Component } from '@angular/core'; import { SelectDirective } from 'my-directives'; diff --git a/adev-ja/src/content/reference/extended-diagnostics/NG8117.md b/adev-ja/src/content/reference/extended-diagnostics/NG8117.md index 0ecf62d6e..db38695cf 100644 --- a/adev-ja/src/content/reference/extended-diagnostics/NG8117.md +++ b/adev-ja/src/content/reference/extended-diagnostics/NG8117.md @@ -2,7 +2,7 @@ This diagnostic detects uninvoked functions in text interpolation. -```typescript +```angular-ts import { Component } from '@angular/core'; @Component({ @@ -24,7 +24,7 @@ If the function is not invoked, it will not return any value and the interpolati Ensure to invoke the function when you use it in text interpolation to return the value. -```typescript +```angular-ts import { Component } from '@angular/core'; @Component({ diff --git a/adev-ja/src/content/reference/migrations/inject-function.md b/adev-ja/src/content/reference/migrations/inject-function.md index 357b2a9cb..58dd68715 100644 --- a/adev-ja/src/content/reference/migrations/inject-function.md +++ b/adev-ja/src/content/reference/migrations/inject-function.md @@ -1,8 +1,8 @@ # Migration to the `inject` function -Angular's `inject` function offers more accurate types and better compatibility with standard decorators, compared to constructor-based injection. +Angular's [`inject`](/api/core/inject) function offers more accurate types and better compatibility with standard decorators, compared to constructor-based injection. -This schematic converts constructor-based injection in your classes to use the `inject` function instead. +This schematic converts constructor-based injection in your classes to use the [`inject`](/api/core/inject) function instead. Run the schematic using the following command: @@ -52,7 +52,7 @@ migrate the entire directory. ### `migrateAbstractClasses` Angular doesn't validate that parameters of abstract classes are injectable. This means that the -migration can't reliably migrate them to `inject` without risking breakages which is why they're +migration can't reliably migrate them to [`inject`](/api/core/inject) without risking breakages which is why they're disabled by default. Enable this option if you want abstract classes to be migrated, but note that you may have to **fix some breakages manually**. @@ -78,7 +78,7 @@ export class MyComp { #### After -```typescript +```ts import { Component } from '@angular/core'; import { MyService } from './service'; @@ -86,10 +86,10 @@ import { MyService } from './service'; export class MyComp { private service = inject(MyService); -/\*_ Inserted by Angular inject() migration for backwards compatibility _/ -constructor(...args: unknown[]); + /\*_ Inserted by Angular inject() migration for backwards compatibility _/ + constructor(...args: unknown[]); -constructor() {} + constructor() {} } ``` diff --git a/adev-ja/src/content/reference/migrations/overview.md b/adev-ja/src/content/reference/migrations/overview.md index 026e27d43..4a6b17f66 100644 --- a/adev-ja/src/content/reference/migrations/overview.md +++ b/adev-ja/src/content/reference/migrations/overview.md @@ -10,7 +10,7 @@ Learn about how you can migrate your existing angular project to the latest feat Built-in Control Flow Syntax allows you to use more ergonomic syntax which is close to JavaScript and has better type checking. It replaces the need to import `CommonModule` to use functionality like `*ngFor`, `*ngIf` and `*ngSwitch`. - Angular's `inject` function offers more accurate types and better compatibility with standard decorators, compared to constructor-based injection. + Angular's [`inject`](/api/core/inject) function offers more accurate types and better compatibility with standard decorators, compared to constructor-based injection. Convert eagerly loaded component routes to lazy loaded ones. This allows the build process to split production bundles into smaller chunks, to load less JavaScript at initial page load. diff --git a/adev-ja/src/content/reference/migrations/self-closing-tags.md b/adev-ja/src/content/reference/migrations/self-closing-tags.md index 255a5d37f..b65f72433 100644 --- a/adev-ja/src/content/reference/migrations/self-closing-tags.md +++ b/adev-ja/src/content/reference/migrations/self-closing-tags.md @@ -12,16 +12,16 @@ ng generate @angular/core:self-closing-tag #### Before - +```angular-html - +``` #### After - +```angular-html - +``` diff --git a/adev-ja/src/content/reference/migrations/signal-inputs.md b/adev-ja/src/content/reference/migrations/signal-inputs.md index c92d32929..34e5b44f9 100644 --- a/adev-ja/src/content/reference/migrations/signal-inputs.md +++ b/adev-ja/src/content/reference/migrations/signal-inputs.md @@ -25,7 +25,7 @@ See more details in the section [below](#vscode-extension). **Before** -```typescript +```angular-ts import {Component, Input} from '@angular/core'; @Component({ @@ -45,24 +45,25 @@ export class MyComponent { **After** - +```angular-ts {[[4],[7], [10,12]]} import {Component, input} from '@angular/core'; @Component({ -template: `Name: {{name() ?? ''}}` + template: `Name: {{name() ?? ''}}` }) export class MyComponent { -readonly name = input(); + readonly name = input(); + + someMethod(): number { + const name = this.name(); + if (name) { + return name.length; + } + return -1; + } -someMethod(): number { -const name = this.name(); -if (name) { -return name.length; -} -return -1; -} } - +``` ## Configuration options diff --git a/adev-ja/src/content/reference/migrations/signal-queries.md b/adev-ja/src/content/reference/migrations/signal-queries.md index df500eb60..075db95e2 100644 --- a/adev-ja/src/content/reference/migrations/signal-queries.md +++ b/adev-ja/src/content/reference/migrations/signal-queries.md @@ -26,7 +26,7 @@ See more details in the section [below](#vscode-extension). **Before** -```typescript +```angular-ts import {Component, ContentChild} from '@angular/core'; @Component({ @@ -45,7 +45,7 @@ export class MyComponent { **After** -```typescript +```angular-ts import {Component, contentChild} from '@angular/core'; @Component({ diff --git a/adev-ja/src/content/reference/migrations/standalone.md b/adev-ja/src/content/reference/migrations/standalone.md index 31d65bf04..8b17b697b 100644 --- a/adev-ja/src/content/reference/migrations/standalone.md +++ b/adev-ja/src/content/reference/migrations/standalone.md @@ -77,7 +77,7 @@ HELPFUL: The schematic ignores NgModules which bootstrap a component during this export class SharedModule {} ``` -```typescript +```angular-ts // greeter.component.ts @Component({ selector: 'greeter', @@ -100,7 +100,7 @@ export class GreeterComponent { export class SharedModule {} ``` -```typescript +```angular-ts // greeter.component.ts @Component({ selector: 'greeter', diff --git a/adev-ja/src/content/tools/cli/schematics-authoring.md b/adev-ja/src/content/tools/cli/schematics-authoring.md index 4980bf7d8..006edcd4b 100644 --- a/adev-ja/src/content/tools/cli/schematics-authoring.md +++ b/adev-ja/src/content/tools/cli/schematics-authoring.md @@ -36,19 +36,17 @@ A change can be accepted or ignored, or throw an exception. When you create a new blank schematic with the [Schematics CLI](#schematics-cli), the generated entry function is a _rule factory_. A `RuleFactory` object defines a higher-order function that creates a `Rule`. - - +```ts {header: "index.ts"} import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics'; // You don't have to export the function as default. // You can also have more than one rule factory per file. export function helloWorld(\_options: any): Rule { -return (tree: Tree,\_context: SchematicContext) => { -return tree; -}; + return (tree: Tree,\_context: SchematicContext) => { + return tree; + }; } - - +``` Your rules can make changes to your projects by calling external tools and implementing logic. You need a rule, for example, to define how a template in the schematic is to be merged into the hosting project. @@ -56,7 +54,7 @@ You need a rule, for example, to define how a template in the schematic is to be Rules can make use of utilities provided with the `@schematics/angular` package. Look for helper functions for working with modules, dependencies, TypeScript, AST, JSON, Angular CLI workspaces and projects, and more. - +```ts {header: "index.ts"} import { JsonAstObject, @@ -67,8 +65,7 @@ normalize, parseJsonAst, strings, } from '@angular-devkit/core'; - - +``` ### Defining input options with a schema and interfaces diff --git a/adev-ja/src/content/tools/libraries/creating-libraries.md b/adev-ja/src/content/tools/libraries/creating-libraries.md index 349f42c4f..9afa8fe44 100644 --- a/adev-ja/src/content/tools/libraries/creating-libraries.md +++ b/adev-ja/src/content/tools/libraries/creating-libraries.md @@ -241,7 +241,7 @@ TypeScript path mappings should _not_ point to the library source `.ts` files. ### Linking libraries for local development This section explains how to use your package manager's local linking feature -(such as [`npm link`](https://pnpm.io/cli/link) or [`pnpm link`](https://pnpm.io/cli/link)) to test a standalone Angular library with an external application during +(such as [`npm link`](https://docs.npmjs.com/cli/v11/commands/npm-link) or [`pnpm link`](https://pnpm.io/cli/link)) to test a standalone Angular library with an external application during local development, without relying on the monorepo workspace structure or publishing to the NPM registry. NOTE: If your library and application are in the same Angular workspace (a monorepo setup), the standard monorepo workflow automatically handles the linking and is generally more efficient. This local linking approach is best when: diff --git a/adev-ja/src/content/tutorials/first-app/steps/10-routing/README.md b/adev-ja/src/content/tutorials/first-app/steps/10-routing/README.md index b0e5efdb6..d4433aebb 100644 --- a/adev-ja/src/content/tutorials/first-app/steps/10-routing/README.md +++ b/adev-ja/src/content/tutorials/first-app/steps/10-routing/README.md @@ -49,7 +49,7 @@ In this lesson, you will enable routing in your application to navigate to the d 2. Add `RouterOutlet` and `RouterLink` to the `@Component` metadata imports - 3. In the `template` property, replace the `` tag with the `` directive and add a link back to the home page. Your code should match this code: + 3. In the `template` property, replace the `` tag with the `` directive and add a link back to the home page. Your code should match this code: From ad39ff0d932114215b83b4bb6bc65e87a4b55670 Mon Sep 17 00:00:00 2001 From: Suguru Inatomi Date: Wed, 3 Dec 2025 09:06:04 +0900 Subject: [PATCH 03/16] fix: migrate guide/components markdown files --- .../components/anatomy-of-components.en.md | 20 ++++++------- .../guide/components/anatomy-of-components.md | 20 ++++++------- .../guide/components/content-projection.en.md | 4 +-- .../guide/components/content-projection.md | 4 +-- .../content/guide/components/queries.en.md | 28 ++++++++++--------- .../src/content/guide/components/queries.md | 28 ++++++++++--------- .../content/guide/components/selectors.en.md | 24 ++++++++-------- .../src/content/guide/components/selectors.md | 20 ++++++------- .../content/guide/components/styling.en.md | 12 ++++---- .../src/content/guide/components/styling.md | 12 ++++---- 10 files changed, 88 insertions(+), 84 deletions(-) diff --git a/adev-ja/src/content/guide/components/anatomy-of-components.en.md b/adev-ja/src/content/guide/components/anatomy-of-components.en.md index 5a301b26a..924843ad3 100644 --- a/adev-ja/src/content/guide/components/anatomy-of-components.en.md +++ b/adev-ja/src/content/guide/components/anatomy-of-components.en.md @@ -11,13 +11,13 @@ Every component must have: You provide Angular-specific information for a component by adding a `@Component` [decorator](https://www.typescriptlang.org/docs/handbook/decorators.html) on top of the TypeScript class: - +```angular-ts {highlight: [1, 2, 3, 4]} @Component({ selector: 'profile-photo', template: `Your profile photo`, }) export class ProfilePhoto { } - +``` For full details on writing Angular templates, including data binding, event handling, and control flow, see the [Templates guide](guide/templates). @@ -25,27 +25,27 @@ The object passed to the `@Component` decorator is called the component's **meta Components can optionally include a list of CSS styles that apply to that component's DOM: - +```angular-ts {highlight: [4]} @Component({ selector: 'profile-photo', template: `Your profile photo`, styles: `img { border-radius: 50%; }`, }) export class ProfilePhoto { } - +``` By default, a component's styles only affect elements defined in that component's template. See [Styling Components](guide/components/styling) for details on Angular's approach to styling. You can alternatively choose to write your template and styles in separate files: - +```ts {highlight: [3,4]} @Component({ selector: 'profile-photo', templateUrl: 'profile-photo.html', styleUrl: 'profile-photo.css', }) export class ProfilePhoto { } - +``` This can help separate the concerns of _presentation_ from _behavior_ in your project. You can choose one approach for your entire project, or you decide which to use for each component. @@ -78,19 +78,19 @@ Important: In Angular versions before 19.0.0, the `standalone` option defaults t Every component defines a [CSS selector](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Selectors): - +```angular-ts {highlight: [2]} @Component({ selector: 'profile-photo', ... }) export class ProfilePhoto { } - +``` See [Component Selectors](guide/components/selectors) for details about which types of selectors Angular supports and guidance on choosing a selector. You show a component by creating a matching HTML element in the template of _other_ components: - +```angular-ts {highlight: [8]} @Component({ selector: 'profile-photo', }) @@ -101,7 +101,7 @@ imports: [ProfilePhoto], template: `` }) export class UserProfile { } - +``` Angular creates an instance of the component for every matching HTML element it encounters. The DOM element that matches a component's selector is referred to as that component's **host element**. The contents of a component's template are rendered inside its host element. diff --git a/adev-ja/src/content/guide/components/anatomy-of-components.md b/adev-ja/src/content/guide/components/anatomy-of-components.md index eb9597a54..8e28dda77 100644 --- a/adev-ja/src/content/guide/components/anatomy-of-components.md +++ b/adev-ja/src/content/guide/components/anatomy-of-components.md @@ -11,13 +11,13 @@ TIP: このガイドでは、すでに[基本ガイド](essentials)を読んで TypeScriptクラスの上部に `@Component` [デコレーター](https://www.typescriptlang.org/docs/handbook/decorators.html) を追加することで、コンポーネントにAngular固有の情報を与えます。 - +```angular-ts {highlight: [1, 2, 3, 4]} @Component({ selector: 'profile-photo', template: `Your profile photo`, }) export class ProfilePhoto { } - +``` データバインディング、イベント処理、制御フローなど、Angularテンプレート作成に関する詳細は、[テンプレートガイド](guide/templates)を参照してください。 @@ -25,27 +25,27 @@ export class ProfilePhoto { } コンポーネントには、オプションでそのコンポーネントのDOMに適用されるCSSスタイルのリストを含めることができます。 - +```angular-ts {highlight: [4]} @Component({ selector: 'profile-photo', template: `Your profile photo`, styles: `img { border-radius: 50%; }`, }) export class ProfilePhoto { } - +``` デフォルトでは、コンポーネントのスタイルは、そのコンポーネントのテンプレートで定義された要素にのみ影響を与えます。Angularのスタイリングアプローチの詳細については、[コンポーネントのスタイリング](guide/components/styling)を参照してください。 テンプレートとスタイルを別々のファイルにも記述できます。 - +```ts {highlight: [3,4]} @Component({ selector: 'profile-photo', templateUrl: 'profile-photo.html', styleUrl: 'profile-photo.css', }) export class ProfilePhoto { } - +``` これにより、プロジェクト内の_表示_と_動作_の懸念事項を分離できます。プロジェクト全体に対して1つのアプローチを選択するか、コンポーネントごとにどちらを使用するかを決定できます。 @@ -78,19 +78,19 @@ IMPORTANT: 19.0.0より前のAngularバージョンでは、`standalone`オプ すべてのコンポーネントは[CSSセレクター](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Selectors)を定義します。 - +```angular-ts {highlight: [2]} @Component({ selector: 'profile-photo', ... }) export class ProfilePhoto { } - +``` Angularがサポートするセレクターの種類と、セレクターの選択に関するガイダンスについては、[コンポーネントセレクター](guide/components/selectors)を参照してください。 _他の_コンポーネントのテンプレートで一致するHTML要素を作成することで、コンポーネントを表示します。 - +```angular-ts {highlight: [8]} @Component({ selector: 'profile-photo', }) @@ -101,7 +101,7 @@ imports: [ProfilePhoto], template: `` }) export class UserProfile { } - +``` Angularは、遭遇する一致するHTML要素ごとにコンポーネントのインスタンスを作成します。コンポーネントのセレクターと一致するDOM要素は、そのコンポーネントの**ホスト要素**と呼ばれます。コンポーネントのテンプレートの内容はそのホスト要素内にレンダリングされます。 diff --git a/adev-ja/src/content/guide/components/content-projection.en.md b/adev-ja/src/content/guide/components/content-projection.en.md index efa351cab..3fe55711f 100644 --- a/adev-ja/src/content/guide/components/content-projection.en.md +++ b/adev-ja/src/content/guide/components/content-projection.en.md @@ -95,7 +95,7 @@ export class CardBody {} ```angular-ts -Component({ +@Component({ selector: 'custom-card', template: `
@@ -218,7 +218,7 @@ placeholder, Angular compares against the `ngProjectAs` value instead of the ele
- +
``` diff --git a/adev-ja/src/content/guide/components/content-projection.md b/adev-ja/src/content/guide/components/content-projection.md index 91c0900a0..1e84cc6cc 100644 --- a/adev-ja/src/content/guide/components/content-projection.md +++ b/adev-ja/src/content/guide/components/content-projection.md @@ -95,7 +95,7 @@ export class CardBody {} ```angular-ts -Component({ +@Component({ selector: 'custom-card', template: `
@@ -218,7 +218,7 @@ Angularは要素のIDではなく`ngProjectAs`の値と比較します。
- +
``` diff --git a/adev-ja/src/content/guide/components/queries.en.md b/adev-ja/src/content/guide/components/queries.en.md index 075d2c738..de451090d 100644 --- a/adev-ja/src/content/guide/components/queries.en.md +++ b/adev-ja/src/content/guide/components/queries.en.md @@ -15,7 +15,7 @@ There are two categories of query: **view queries** and **content queries.** View queries retrieve results from the elements in the component's _view_ — the elements defined in the component's own template. You can query for a single result with the `viewChild` function. -```typescript {highlight: [14, 15]} +```angular-ts {highlight: [14, 15]} @Component({ selector: 'custom-card-header', /*...*/ @@ -40,7 +40,7 @@ If the query does not find a result, its value is `undefined`. This may occur if You can also query for multiple results with the `viewChildren` function. -```typescript {highlight: [17]} +```angular-ts {highlight: [17]} @Component({ selector: 'custom-card-action', /*...*/ @@ -51,13 +51,14 @@ export class CustomCardAction { @Component({ selector: 'custom-card', - template: `Save + template: ` + Save Cancel `, }) export class CustomCard { actions = viewChildren(CustomCardAction); - actionsTexts = computed(() => this.actions().map(action => action.text); + actionsTexts = computed(() => this.actions().map(action => action.text)); } ``` @@ -69,7 +70,7 @@ export class CustomCard { Content queries retrieve results from the elements in the component's _content_— the elements nested inside the component in the template where it's used. You can query for a single result with the `contentChild` function. -```typescript {highlight: [14, 15]} +```angular-ts {highlight: [14, 15]} @Component({ selector: 'custom-toggle', /*...*/ @@ -106,7 +107,7 @@ By default, content queries find only _direct_ children of the component and do You can also query for multiple results with the `contentChildren` function. -```typescript {highlight: [14, 16, 17, 18, 19, 20]} +```angular-ts {highlight: [14, 16, 17, 18, 19, 20]} @Component({ selector: 'custom-menu-item', /*...*/ @@ -147,7 +148,7 @@ If a child query (`viewChild` or `contentChild`) does not find a result, its val In some cases, especially with `viewChild`, you know with certainty that a specific child is always available. In other cases, you may want to strictly enforce that a specific child is present. For these cases, you can use a _required query_. -```angular-ts +```ts @Component({/* ... */}) export class CustomCard { header = viewChild.required(CustomCardHeader); @@ -232,7 +233,7 @@ Developers most commonly use `read` to retrieve `ElementRef` and `TemplateRef`. By default, `contentChildren` queries find only _direct_ children of the component and do not traverse into descendants. `contentChild` queries do traverse into descendants by default. -```typescript {highlight: [13, 14, 15, 16]} +```angular-ts {highlight: [13, 14, 15, 16]} @Component({ selector: 'custom-expando', /*...*/ @@ -244,7 +245,8 @@ export class CustomExpando { @Component({ selector: 'user-profile', - template: ` + template: ` + Show @@ -269,7 +271,7 @@ You can alternatively declare queries by adding the corresponding decorator to a You can query for a single result with the `@ViewChild` decorator. -```typescript {highlight: [14, 16, 17, 18]} +```angular-ts {highlight: [14, 16, 17, 18]} @Component({ selector: 'custom-card-header', /*...*/ @@ -299,7 +301,7 @@ Angular keeps the result of `@ViewChild` up to date as your application state ch You can also query for multiple results with the `@ViewChildren` decorator. -```typescript {highlight: [17, 19, 20, 21, 22, 23]} +```angular-ts {highlight: [17, 19, 20, 21, 22, 23]} @Component({ selector: 'custom-card-action', /*...*/ @@ -332,7 +334,7 @@ export class CustomCard { You can query for a single result with the `@ContentChild` decorator. -```typescript {highlight: [14, 16, 17, 18, 25]} +```angular-ts {highlight: [14, 16, 17, 18, 25]} @Component({ selector: 'custom-toggle', /*...*/ @@ -373,7 +375,7 @@ Angular keeps the result of `@ContentChild` up to date as your application state You can also query for multiple results with the `@ContentChildren` decorator. -```typescript {highlight: [15, 17, 18, 19, 20, 21]} +```angular-ts {highlight: [15, 17, 18, 19, 20, 21]} @Component({ selector: 'custom-menu-item', /*...*/ diff --git a/adev-ja/src/content/guide/components/queries.md b/adev-ja/src/content/guide/components/queries.md index 4dfb5cff1..283d7d2a8 100644 --- a/adev-ja/src/content/guide/components/queries.md +++ b/adev-ja/src/content/guide/components/queries.md @@ -15,7 +15,7 @@ TIP: このガイドでは、[基本概念のガイド](essentials)を読んで ビュークエリは、コンポーネントの_ビュー_（コンポーネント自身のテンプレートで定義された要素）内の要素から結果を取得します。`viewChild`関数を使用して単一の結果をクエリできます。 -```typescript {highlight: [14, 15]} +```angular-ts {highlight: [14, 15]} @Component({ selector: 'custom-card-header', /* ... */ @@ -40,7 +40,7 @@ export class CustomCard { `viewChildren`関数を使用して、複数結果をクエリできます。 -```typescript {highlight: [17]} +```angular-ts {highlight: [17]} @Component({ selector: 'custom-card-action', /* ... */ @@ -51,13 +51,14 @@ export class CustomCardAction { @Component({ selector: 'custom-card', - template: `Save + template: ` + Save Cancel `, }) export class CustomCard { actions = viewChildren(CustomCardAction); - actionsTexts = computed(() => this.actions().map(action => action.text); + actionsTexts = computed(() => this.actions().map(action => action.text)); } ``` @@ -69,7 +70,7 @@ export class CustomCard { コンテンツクエリは、コンポーネントの_コンテンツ_（コンポーネントが使用されているテンプレート内でコンポーネントの中にネストされた要素）内の要素から結果を取得します。`contentChild`関数を使用して単一の結果をクエリできます。 -```typescript {highlight: [14, 15]} +```angular-ts {highlight: [14, 15]} @Component({ selector: 'custom-toggle', /* ... */ @@ -106,7 +107,7 @@ export class UserProfile { } `contentChildren`関数を使用して、複数結果をクエリできます。 -```typescript {highlight: [14, 16, 17, 18, 19, 20]} +```angular-ts {highlight: [14, 16, 17, 18, 19, 20]} @Component({ selector: 'custom-menu-item', /* ... */ @@ -147,7 +148,7 @@ export class UserProfile { } 場合によっては、特に`viewChild`を使用する場合、特定の子が常に利用可能であることが確実な場合があります。他の場合では、特定の子が存在することを厳格に適用したい場合があります。これらの場合、_必須クエリ_を使用できます。 -```angular-ts +```ts @Component({/* ... */}) export class CustomCard { header = viewChild.required(CustomCardHeader); @@ -232,7 +233,7 @@ export class CustomExpando { デフォルトでは、`contentChildren`クエリはコンポーネントの直接の子要素のみを検索し、子孫要素にはトラバースしません。 一方、`contentChild`クエリはデフォルトで子孫要素も検索します。 -```typescript {highlight: [13, 14, 15, 16]} +```angular-ts {highlight: [13, 14, 15, 16]} @Component({ selector: 'custom-expando', /* ... */ @@ -244,7 +245,8 @@ export class CustomExpando { @Component({ selector: 'user-profile', - template: ` + template: ` + Show @@ -269,7 +271,7 @@ TIP: Angularチームは新規プロジェクトにはシグナルベースの `@ViewChild`デコレーターを使用して、単一の結果をクエリできます。 -```typescript {highlight: [14, 16, 17, 18]} +```angular-ts {highlight: [14, 16, 17, 18]} @Component({ selector: 'custom-card-header', /* ... */ @@ -299,7 +301,7 @@ Angularは、アプリケーションの状態が変化するにつれて`@ViewC `@ViewChildren`デコレーターを使用して、複数の結果をクエリできます。 -```typescript {highlight: [17, 19, 20, 21, 22, 23]} +```angular-ts {highlight: [17, 19, 20, 21, 22, 23]} @Component({ selector: 'custom-card-action', /* ... */ @@ -332,7 +334,7 @@ export class CustomCard { `@ContentChild`デコレーターを使用して、単一の結果をクエリできます。 -```typescript {highlight: [14, 16, 17, 18, 25]} +```angular-ts {highlight: [14, 16, 17, 18, 25]} @Component({ selector: 'custom-toggle', /* ... */ @@ -373,7 +375,7 @@ Angularは、アプリケーションの状態が変化するにつれて`@Conte `@ContentChildren`デコレーターを使用して、複数の結果をクエリできます。 -```typescript {highlight: [15, 17, 18, 19, 20, 21]} +```angular-ts {highlight: [15, 17, 18, 19, 20, 21]} @Component({ selector: 'custom-menu-item', /* ... */ diff --git a/adev-ja/src/content/guide/components/selectors.en.md b/adev-ja/src/content/guide/components/selectors.en.md index b473b4d14..8539c7f18 100644 --- a/adev-ja/src/content/guide/components/selectors.en.md +++ b/adev-ja/src/content/guide/components/selectors.en.md @@ -6,17 +6,17 @@ Every component defines a [CSS selector](https://developer.mozilla.org/docs/Web/CSS/CSS_selectors) that determines how the component is used: - +```angular-ts {highlight: [2]} @Component({ selector: 'profile-photo', ... }) export class ProfilePhoto { } - +``` You use a component by creating a matching HTML element in the templates of _other_ components: - +```angular-ts {highlight: [3]} @Component({ template: ` @@ -24,7 +24,7 @@ You use a component by creating a matching HTML element in the templates of _oth ..., }) export class UserProfile { } - +``` **Angular matches selectors statically at compile-time**. Changing the DOM at run-time, either via Angular bindings or with DOM APIs, does not affect the components rendered. @@ -63,13 +63,13 @@ You can append this pseudo-class to any other selector to narrow which elements selector matches. For example, you could define a `[dropzone]` attribute selector and prevent matching `textarea` elements: - +```angular-ts {highlight: [2]} @Component({ selector: '[dropzone]:not(textarea)', ... }) export class DropZone { } - +``` Angular does not support any other pseudo-classes or pseudo-elements in component selectors. @@ -78,23 +78,23 @@ Angular does not support any other pseudo-classes or pseudo-elements in componen You can combine multiple selectors by concatenating them. For example, you can match `
@@ -269,7 +269,7 @@ import type { ValidationError, DisabledReason } from '@angular/forms/signals'; `, changeDetection: ChangeDetectionStrategy.OnPush, @@ -422,7 +422,9 @@ accountForm = form(this.accountModel, schemaPath => { This guide covered building custom controls that integrate with Signal Forms. Related guides explore other aspects of Signal Forms: -- [Form Models guide](guide/forms/signals/models) - Creating and updating form models - - - + + + + + + diff --git a/adev-ja/src/content/guide/forms/signals/custom-controls.md b/adev-ja/src/content/guide/forms/signals/custom-controls.md index bb06b4479..269d1498e 100644 --- a/adev-ja/src/content/guide/forms/signals/custom-controls.md +++ b/adev-ja/src/content/guide/forms/signals/custom-controls.md @@ -25,7 +25,7 @@ import { FormValueControl } from '@angular/forms/signals';
@@ -269,7 +269,7 @@ import type { ValidationError, DisabledReason } from '@angular/forms/signals'; `, changeDetection: ChangeDetectionStrategy.OnPush, @@ -422,7 +422,9 @@ accountForm = form(this.accountModel, schemaPath => { このガイドでは、シグナルフォームと連携するカスタムコントロールの構築について説明しました。関連ガイドでは、シグナルフォームの他の側面について探求します: -- [フォームモデルガイド](guide/forms/signals/models) - フォームモデルの作成と更新 - - - + + + + + + diff --git a/adev-ja/src/content/guide/forms/signals/field-state-management.en.md b/adev-ja/src/content/guide/forms/signals/field-state-management.en.md index be707bdbe..ad82aa290 100644 --- a/adev-ja/src/content/guide/forms/signals/field-state-management.en.md +++ b/adev-ja/src/content/guide/forms/signals/field-state-management.en.md @@ -74,7 +74,7 @@ These signals enable you to build responsive form user experiences that react to Validation state signals tell you whether a field is valid and what errors it contains. -NOTE: This guide focuses on **using** validation state in your templates and logic (such as reading `valid()`, `invalid()`, `errors()` to display feedback). For information on **defining** validation rules and creating custom validators, see the Validation guide (coming soon). +NOTE: This guide focuses on **using** validation state in your templates and logic (such as reading `valid()`, `invalid()`, `errors()` to display feedback). For information on **defining** validation rules and creating custom validators, see the [Validation guide](guide/forms/signals/validation). ### Checking validity @@ -610,7 +610,7 @@ export class Registration { }) onSubmit() { - submit(this.registrationForm, () => { + submit(this.registrationForm, async () => { this.submitToServer() }) } @@ -689,7 +689,12 @@ Checking both `touched()` and validation state ensures styles only appear after ## Next steps -Here are other related guides on Signal Forms: +This guide covered validation and availability status handling, interaction tracking and field state propagation. Related guides explore other aspects of Signal Forms: -- [Form Models guide](guide/forms/signals/models) - Creating models and updating values -- Validation guide - Defining validation rules and custom validators (coming soon) + + + + + + + diff --git a/adev-ja/src/content/guide/forms/signals/field-state-management.md b/adev-ja/src/content/guide/forms/signals/field-state-management.md index 9eead5b42..647babbb7 100644 --- a/adev-ja/src/content/guide/forms/signals/field-state-management.md +++ b/adev-ja/src/content/guide/forms/signals/field-state-management.md @@ -74,7 +74,7 @@ console.log(emailValue) // Current email string バリデーション状態シグナルは、フィールドが有効かどうか、またどのようなエラーを含んでいるかを示します。 -NOTE: このガイドでは、テンプレートやロジックでバリデーション状態を**使用する**こと（フィードバックを表示するために`valid()`、`invalid()`、`errors()`を読み取るなど）に焦点を当てています。バリデーションルールを**定義**したり、カスタムバリデーターを作成したりする方法については、バリデーションガイド（近日、公開予定）を参照してください。 +NOTE: このガイドでは、テンプレートやロジックでバリデーション状態を**使用する**こと（フィードバックを表示するために`valid()`、`invalid()`、`errors()`を読み取るなど）に焦点を当てています。バリデーションルールを**定義**したり、カスタムバリデーターを作成したりする方法については、[バリデーションガイド](guide/forms/signals/validation)を参照してください。 ### 有効性のチェック {#checking-validity} @@ -610,7 +610,7 @@ export class Registration { }) onSubmit() { - submit(this.registrationForm, () => { + submit(this.registrationForm, async () => { this.submitToServer() }) } @@ -689,7 +689,12 @@ export class StyleExample { ## 次のステップ {#next-steps} -シグナルフォームに関するその他の関連ガイドは次のとおりです: +このガイドでは、バリデーションと可用性ステータスの処理、インタラクションの追跡、フィールド状態の伝播について説明しました。関連ガイドでは、シグナルフォームの他の側面について探求します: -- [フォームモデルガイド](guide/forms/signals/models) - モデルの作成と値の更新 -- バリデーションガイド - バリデーションルールの定義とカスタムバリデーター (近日公開の予定) + + + + + + + diff --git a/adev-ja/src/content/guide/forms/signals/models.en.md b/adev-ja/src/content/guide/forms/signals/models.en.md index 64cd1dabd..835aabaf7 100644 --- a/adev-ja/src/content/guide/forms/signals/models.en.md +++ b/adev-ja/src/content/guide/forms/signals/models.en.md @@ -108,22 +108,6 @@ const userModel = signal({ Fields set to `undefined` are excluded from the field tree. A model with `{value: undefined}` behaves identically to `{}` - accessing the field returns `undefined` rather than a `FieldTree`. -### Dynamic field addition - -You can dynamically add fields by updating the model with new properties. The field tree automatically updates to include new fields when they appear in the model value. - -```ts -// Start with just email -const model = signal({ email: '' }) -const myForm = form(model) - -// Later, add a password field -model.update(current => ({ ...current, password: '' })) -// myForm.password is now available -``` - -This pattern is useful when fields become relevant based on user choices or loaded data. - ## Reading model values You can access form values in two ways: directly from the model signal, or through individual fields. Each approach serves a different purpose. @@ -176,12 +160,6 @@ TIP: Field state includes many more signals beyond `value()`, such as validation ## Updating form models programmatically -Form models update through programmatic mechanisms: - -1. [Replace the entire form model](#replacing-form-models-with-set) with `set()` -2. [Update one or more fields](#update-one-or-more-fields-with-update) with `update()` -3. [Update a single field directly](#update-a-single-field-directly-with-set) through field state - ### Replacing form models with `set()` Use `set()` on the form model to replace the entire value: @@ -206,21 +184,6 @@ resetForm() { This approach works well when loading data from an API or resetting the entire form. -### Update one or more fields with `update()` - -Use `update()` to modify specific fields while preserving others: - -```ts -updateEmail(newEmail: string) { - this.userModel.update(current => ({ - ...current, - email: newEmail, - })); -} -``` - -This pattern is useful when you need to change one or more fields based on the current model state. - ### Update a single field directly with `set()` Use `set()` on individual field values to directly update the field state: @@ -305,7 +268,7 @@ export class UserComponent { userForm = form(this.userModel) setName(name: string) { - this.userModel.update(current => ({ ...current, name })) + this.userForm.name().value.set(name); // Input automatically displays 'Bob' } } @@ -526,11 +489,14 @@ async loadExistingUser() { For forms that always start with existing data, you might wait to render the form until data loads in order to avoid a flash of empty fields. - - - + - - --> + + + diff --git a/adev-ja/src/content/guide/forms/signals/models.md b/adev-ja/src/content/guide/forms/signals/models.md index 8db1f3472..33676b5e1 100644 --- a/adev-ja/src/content/guide/forms/signals/models.md +++ b/adev-ja/src/content/guide/forms/signals/models.md @@ -108,22 +108,6 @@ const userModel = signal({ `undefined`に設定されたフィールドは、フィールドツリーから除外されます。`{value: undefined}`を持つモデルは`{}`と全く同じように動作し、そのフィールドにアクセスすると`FieldTree`ではなく`undefined`が返されます。 -### 動的なフィールドの追加 {#dynamic-field-addition} - -新しいプロパティでモデルを更新することで、動的にフィールドを追加できます。フィールドツリーは、モデルの値に新しいフィールドが現れると、それらを含むように自動的に更新されます。 - -```ts -// Start with just email -const model = signal({ email: '' }) -const myForm = form(model) - -// Later, add a password field -model.update(current => ({ ...current, password: '' })) -// myForm.password is now available -``` - -このパターンは、ユーザーの選択やロードされたデータに基づいてフィールドが関連性を持つようになる場合に役立ちます。 - ## モデルの値を読み取る {#reading-model-values} フォームの値には、モデルのシグナルから直接アクセスする方法と、個々のフィールドを介してアクセスする方法の2つがあります。それぞれのアプローチは異なる目的を果たします。 @@ -176,12 +160,6 @@ TIP: フィールドの状態には、`value()`以外にも、バリデーショ ## フォームモデルをプログラム的に更新する {#updating-form-models-programmatically} -フォームモデルは、プログラム的なメカニズムを通じて更新されます: - -1. `set()`で[フォームモデル全体を置き換える](#replacing-form-models-with-set) -2. `update()`で[1つ以上のフィールドを更新する](#update-one-or-more-fields-with-update) -3. フィールドの状態を通じて[単一のフィールドを直接更新する](#update-a-single-field-directly-with-set) - ### `set()`でフォームモデルを置き換える {#replacing-form-models-with-set} フォームモデルで`set()`を使用して、値全体を置き換えます: @@ -206,21 +184,6 @@ resetForm() { このアプローチは、APIからデータを読み込む場合や、フォーム全体をリセットする場合に適しています。 -### `update()`で1つ以上のフィールドを更新する {#update-one-or-more-fields-with-update} - -`update()`を使用して、他のフィールドを保持しながら特定のフィールドを変更します: - -```ts -updateEmail(newEmail: string) { - this.userModel.update(current => ({ - ...current, - email: newEmail, - })); -} -``` - -このパターンは、現在のモデルの状態に基づいて1つ以上のフィールドを変更する必要がある場合に便利です。 - ### `set()`で単一のフィールドを直接更新する {#update-a-single-field-directly-with-set} 個々のフィールドの値に`set()`を使用して、フィールドの状態を直接更新します: @@ -305,7 +268,7 @@ export class UserComponent { userForm = form(this.userModel) setName(name: string) { - this.userModel.update(current => ({ ...current, name })) + this.userForm.name().value.set(name); // Input automatically displays 'Bob' } } @@ -526,11 +489,14 @@ async loadExistingUser() { 常に既存のデータで始まるフォームの場合、空のフィールドが一瞬表示されるのを避けるために、データが読み込まれるまでフォームのレンダリングを待つことができます。 - - - + - - --> + + + diff --git a/adev-ja/src/content/guide/forms/signals/overview.en.md b/adev-ja/src/content/guide/forms/signals/overview.en.md index 73102a101..924c6e651 100644 --- a/adev-ja/src/content/guide/forms/signals/overview.en.md +++ b/adev-ja/src/content/guide/forms/signals/overview.en.md @@ -45,15 +45,16 @@ The `Field` directive must be imported into any component that binds form fields }) ``` - - - --> + + diff --git a/adev-ja/src/content/guide/forms/signals/overview.md b/adev-ja/src/content/guide/forms/signals/overview.md index 9c80e9478..37acc1dbe 100644 --- a/adev-ja/src/content/guide/forms/signals/overview.md +++ b/adev-ja/src/content/guide/forms/signals/overview.md @@ -45,15 +45,16 @@ import { form, Field, required, email } from '@angular/forms/signals' }) ``` - - - --> + + diff --git a/adev-ja/src/content/guide/forms/signals/validation.en.md b/adev-ja/src/content/guide/forms/signals/validation.en.md index 63ba327a9..ec577af52 100644 --- a/adev-ja/src/content/guide/forms/signals/validation.en.md +++ b/adev-ja/src/content/guide/forms/signals/validation.en.md @@ -624,6 +624,10 @@ The `valid()` signal returns `false` while validation is pending, even if there This guide covered creating and applying validation rules. Related guides explore other aspects of Signal Forms: -- [Form Models guide](guide/forms/signals/models) - Creating and updating form models - - + + + + + + + diff --git a/adev-ja/src/content/guide/forms/signals/validation.md b/adev-ja/src/content/guide/forms/signals/validation.md index 9f9d45e77..f4cd0399a 100644 --- a/adev-ja/src/content/guide/forms/signals/validation.md +++ b/adev-ja/src/content/guide/forms/signals/validation.md @@ -624,6 +624,10 @@ export class UsernameFormComponent { このガイドでは、バリデーションルールの作成と適用について説明しました。関連ガイドでは、シグナルフォームの他の側面について解説します: -- [フォームモデルガイド](guide/forms/signals/models) - フォームモデルの作成と更新 - - + + + + + + + From 7ae3aa44b7c8c35687c357aaf9c32c83e4b53338 Mon Sep 17 00:00:00 2001 From: Suguru Inatomi Date: Wed, 3 Dec 2025 09:25:21 +0900 Subject: [PATCH 08/16] fix: migrate small changes in guide markdown files - guide/http/interceptors.md: update inject API reference - guide/routing/route-guards.md: capitalize NOTE callout - guide/signals/overview.md: update inject API reference - guide/templates/ng-container.md: use self-closing tag --- adev-ja/src/content/guide/http/interceptors.md | 2 +- adev-ja/src/content/guide/routing/route-guards.md | 2 +- adev-ja/src/content/guide/signals/overview.md | 2 +- adev-ja/src/content/guide/templates/ng-container.md | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/adev-ja/src/content/guide/http/interceptors.md b/adev-ja/src/content/guide/http/interceptors.md index 0f33e6d59..2fab80bf5 100644 --- a/adev-ja/src/content/guide/http/interceptors.md +++ b/adev-ja/src/content/guide/http/interceptors.md @@ -85,7 +85,7 @@ CRITICAL: リクエストまたはレスポンスの本文は、深い変更か ## インターセプターでの依存性の注入 -インターセプターは、インターセプターを登録したインジェクターの _注入コンテキスト_ で実行され、Angularの`inject` APIを使用して依存関係を取得できます。 +インターセプターは、インターセプターを登録したインジェクターの _注入コンテキスト_ で実行され、Angularの[`inject`](/api/core/inject) APIを使用して依存関係を取得できます。 たとえば、アプリケーションに `AuthService` というサービスがあり、このサービスが送信リクエストの認証トークンを作成するとします。インターセプターは、このサービスを注入して使用できます。 diff --git a/adev-ja/src/content/guide/routing/route-guards.md b/adev-ja/src/content/guide/routing/route-guards.md index 4b849490a..c4d690202 100644 --- a/adev-ja/src/content/guide/routing/route-guards.md +++ b/adev-ja/src/content/guide/routing/route-guards.md @@ -26,7 +26,7 @@ TIP: Angularプロジェクトで個別のTypeScriptファイルを作成する | `UrlTree` or `RedirectCommand` | ブロックする代わりに別のルートにリダイレクトします | | `Promise` or `Observable` | ルーターは最初に発行された値を使用し、その後購読を解除します | -Note: `CanMatch` は異なる動作をします — `false` を返すと、Angularはナビゲーションを完全にブロックする代わりに、他のマッチするルートを試行します。 +NOTE: `CanMatch` は異なる動作をします — `false` を返すと、Angularはナビゲーションを完全にブロックする代わりに、他のマッチするルートを試行します。 ## ルートガードの種類 {#types-of-route-guards} diff --git a/adev-ja/src/content/guide/signals/overview.md b/adev-ja/src/content/guide/signals/overview.md index b77270bb1..7987083f4 100644 --- a/adev-ja/src/content/guide/signals/overview.md +++ b/adev-ja/src/content/guide/signals/overview.md @@ -124,7 +124,7 @@ effect(() => { ### 注入コンテキスト -デフォルトでは、[インジェクションコンテキスト](guide/di/dependency-injection-context)内（`inject`関数にアクセスできる場所）でのみ`effect()`を作成できます。この要件を満たす最も簡単な方法は、コンポーネント、ディレクティブ、またはサービスの`constructor`内で`effect`を呼び出すことです。 +デフォルトでは、[インジェクションコンテキスト](guide/di/dependency-injection-context)内（[`inject`](/api/core/inject)関数にアクセスできる場所）でのみ`effect()`を作成できます。この要件を満たす最も簡単な方法は、コンポーネント、ディレクティブ、またはサービスの`constructor`内で`effect`を呼び出すことです。 ```ts @Component({...}) diff --git a/adev-ja/src/content/guide/templates/ng-container.md b/adev-ja/src/content/guide/templates/ng-container.md index 9ee1a7ad1..2bbd85772 100644 --- a/adev-ja/src/content/guide/templates/ng-container.md +++ b/adev-ja/src/content/guide/templates/ng-container.md @@ -80,7 +80,7 @@ NgTemplateOutletの詳細については、[NgTemplateOutlets API ドキュメ ```angular-html

Admin Dashboard

- + From 767bb01830f0aeff1f1eafba2c8b781ae466d217 Mon Sep 17 00:00:00 2001 From: Suguru Inatomi Date: Wed, 3 Dec 2025 09:26:54 +0900 Subject: [PATCH 09/16] fix: migrate guide/routing markdown files - define-routes.md: update inject API reference and capitalize NOTE - lifecycle-and-events.md: update imports and fix analytics tracking - show-routes-with-outlets.md: use self-closing tags in example --- adev-ja/src/content/guide/routing/define-routes.md | 4 ++-- adev-ja/src/content/guide/routing/lifecycle-and-events.md | 5 +++-- .../src/content/guide/routing/show-routes-with-outlets.md | 8 ++++---- 3 files changed, 9 insertions(+), 8 deletions(-) diff --git a/adev-ja/src/content/guide/routing/define-routes.md b/adev-ja/src/content/guide/routing/define-routes.md index c3a85afdc..205820e64 100644 --- a/adev-ja/src/content/guide/routing/define-routes.md +++ b/adev-ja/src/content/guide/routing/define-routes.md @@ -231,7 +231,7 @@ export const routes: Routes = [ ### 注入コンテキストでの遅延読み込み {#injection-context-lazy-loading} -ルーターは`loadComponent`と`loadChildren`を**現在のルートの注入コンテキスト**内で実行します。これにより、これらのローダー関数内で`inject`を呼び出して、そのルートで宣言されたプロバイダー、階層的な依存性の注入を介して親ルートから継承されたプロバイダー、またはグローバルに利用可能なプロバイダーにアクセスできます。これにより、コンテキストを認識した遅延読み込みが可能になります。 +ルーターは`loadComponent`と`loadChildren`を**現在のルートの注入コンテキスト**内で実行します。これにより、これらのローダー関数内で[`inject`](/api/core/inject)を呼び出して、そのルートで宣言されたプロバイダー、階層的な依存性の注入を介して親ルートから継承されたプロバイダー、またはグローバルに利用可能なプロバイダーにアクセスできます。これにより、コンテキストを認識した遅延読み込みが可能になります。 ```ts import { Routes } from '@angular/router'; @@ -258,7 +258,7 @@ export const routes: Routes = [ 一般的に、プライマリランディングページには即時読み込みが推奨され、他のページは遅延読み込みされます。 -Note: 遅延ルートは、ユーザーが要求する初期データの量を減らすという先行的なパフォーマンス上の利点がありますが、望ましくない可能性のある将来のデータ要求を追加します。これは、複数のレベルでのネストされた遅延読み込みを扱う場合に特に当てはまり、パフォーマンスに大きな影響を与える可能性があります。 +NOTE: 遅延ルートは、ユーザーが要求する初期データの量を減らすという先行的なパフォーマンス上の利点がありますが、望ましくない可能性のある将来のデータ要求を追加します。これは、複数のレベルでのネストされた遅延読み込みを扱う場合に特に当てはまり、パフォーマンスに大きな影響を与える可能性があります。 ## リダイレクト {#redirects} diff --git a/adev-ja/src/content/guide/routing/lifecycle-and-events.md b/adev-ja/src/content/guide/routing/lifecycle-and-events.md index b09d50b02..ad96d693e 100644 --- a/adev-ja/src/content/guide/routing/lifecycle-and-events.md +++ b/adev-ja/src/content/guide/routing/lifecycle-and-events.md @@ -117,7 +117,8 @@ export class AppComponent { アナリティクス用にページビューを追跡します。 ```ts -import { Component, inject, signal, effect } from '@angular/core'; +import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; +import { inject, Injectable, DestroyRef } from '@angular/core'; import { Router, NavigationEnd } from '@angular/router'; @Injectable({ providedIn: 'root' }) @@ -131,7 +132,7 @@ export class AnalyticsService { // Track page views when URL changes if (event instanceof NavigationEnd) { // Send page view to analytics - this.analytics.trackPageView(url); + this.analytics.trackPageView(event.url); } }); } diff --git a/adev-ja/src/content/guide/routing/show-routes-with-outlets.md b/adev-ja/src/content/guide/routing/show-routes-with-outlets.md index bbae0c52e..15a74f920 100644 --- a/adev-ja/src/content/guide/routing/show-routes-with-outlets.md +++ b/adev-ja/src/content/guide/routing/show-routes-with-outlets.md @@ -69,10 +69,10 @@ const routes: Routes = [ ```angular-html -... - -... -... + + + + ``` ## 子ルートでルートをネストする {#nesting-routes-with-child-routes} From 9e120d52079cb552c1c2310a3d91a5cf63651cbf Mon Sep 17 00:00:00 2001 From: Suguru Inatomi Date: Fri, 5 Dec 2025 11:48:58 +0900 Subject: [PATCH 10/16] fix: migrate remaining markdown files - best-practices/runtime-performance/skipping-subtrees.md: add blank line after import - best-practices/style-guide.md: update inject API references - guide/aria/combobox.md: capitalize NOTE callout - guide/aria/grid.md: update example path from table/basic to overview/basic - guide/aria/listbox.md: update selection modes section structure --- .../runtime-performance/skipping-subtrees.md | 1 + adev-ja/src/content/best-practices/style-guide.md | 6 +++--- adev-ja/src/content/guide/aria/combobox.md | 2 +- adev-ja/src/content/guide/aria/grid.md | 8 ++++---- adev-ja/src/content/guide/aria/listbox.md | 13 +++++++++---- 5 files changed, 18 insertions(+), 12 deletions(-) diff --git a/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md b/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md index 326d6e249..2be97dc83 100644 --- a/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md +++ b/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md @@ -17,6 +17,7 @@ OnPush変更検知は、Angularにコンポーネントのサブツリーの変 ```ts import { ChangeDetectionStrategy, Component } from '@angular/core'; + @Component({ changeDetection: ChangeDetectionStrategy.OnPush, }) diff --git a/adev-ja/src/content/best-practices/style-guide.md b/adev-ja/src/content/best-practices/style-guide.md index 71379d4ff..db5149736 100644 --- a/adev-ja/src/content/best-practices/style-guide.md +++ b/adev-ja/src/content/best-practices/style-guide.md @@ -110,11 +110,11 @@ src/ ### コンストラクターパラメーターインジェクションよりも`inject`関数を推奨 {#prefer-the-inject-function-over-constructor-parameter-injection} -コンストラクターパラメーターインジェクションよりも`inject`関数を使用することを推奨します。`inject`関数はコンストラクターパラメーターインジェクションと同じように機能しますが、いくつかのスタイルの利点があります。 +コンストラクターパラメーターインジェクションよりも[`inject`](/api/core/inject)関数を使用することを推奨します。[`inject`](/api/core/inject)関数はコンストラクターパラメーターインジェクションと同じように機能しますが、いくつかのスタイルの利点があります。 -- `inject`は、特にクラスが多くの依存性を注入する場合に、一般的に読みやすくなります。 +- [`inject`](/api/core/inject)は、特にクラスが多くの依存性を注入する場合に、一般的に読みやすくなります。 - 注入された依存性へのコメント追加が、構文的に見てより簡単です。 -- `inject`はより優れた型推論を提供します。 +- [`inject`](/api/core/inject)はより優れた型推論を提供します。 - [`useDefineForClassFields`](https://www.typescriptlang.org/tsconfig/#useDefineForClassFields)を使用してES2022+をターゲットにする場合、注入された依存性でフィールドを読み取る際に、フィールド宣言と初期化を分離することを回避できます。 [既存のコードを自動ツールで`inject`にリファクタリングできます](reference/migrations/inject-function)。 diff --git a/adev-ja/src/content/guide/aria/combobox.md b/adev-ja/src/content/guide/aria/combobox.md index 2e4640ec2..ec81b2ee0 100644 --- a/adev-ja/src/content/guide/aria/combobox.md +++ b/adev-ja/src/content/guide/aria/combobox.md @@ -51,7 +51,7 @@ - 単一選択のドロップダウンが必要な場合 - 完全なドロップダウンの実装については、[Selectパターン](guide/aria/select)を参照してください - 複数選択のドロップダウンが必要な場合 - コンパクトな表示の複数選択については、[Multiselectパターン](guide/aria/multiselect)を参照してください -Note: [Autocomplete](guide/aria/autocomplete)、[Select](guide/aria/select)、[Multiselect](guide/aria/multiselect)のガイドでは、このディレクティブを特定のユースケースのために[Listbox](guide/aria/listbox)と組み合わせた、ドキュメント化されたパターンが示されています。 +NOTE: [Autocomplete](guide/aria/autocomplete)、[Select](guide/aria/select)、[Multiselect](guide/aria/multiselect)のガイドでは、このディレクティブを特定のユースケースのために[Listbox](guide/aria/listbox)と組み合わせた、ドキュメント化されたパターンが示されています。 ## 機能 {#features} diff --git a/adev-ja/src/content/guide/aria/grid.md b/adev-ja/src/content/guide/aria/grid.md index b19d46234..88aa28ebf 100644 --- a/adev-ja/src/content/guide/aria/grid.md +++ b/adev-ja/src/content/guide/aria/grid.md @@ -10,10 +10,10 @@ グリッドを使用すると、ユーザーは方向矢印キー、Home、End、Page Up/Downを使用して2次元データやインタラクティブな要素をナビゲートできます。グリッドは、データテーブル、カレンダー、スプレッドシート、および関連するインタラクティブな要素をグループ化するレイアウトパターンで機能します。 - - - - + + + + ## 使用法 {#usage} diff --git a/adev-ja/src/content/guide/aria/listbox.md b/adev-ja/src/content/guide/aria/listbox.md index 3696517f8..e16c3ec50 100644 --- a/adev-ja/src/content/guide/aria/listbox.md +++ b/adev-ja/src/content/guide/aria/listbox.md @@ -108,14 +108,19 @@ Angularのリストボックスは、以下の機能を備えた完全にアク ### 選択モード {#selection-modes} -リストボックスは、アイテムがいつ選択されるかを制御する2つの選択モードをサポートしています。インターフェースのインタラクションパターンに合ったモードを選択してください。 +リストボックスは、アイテムがいつ選択されるかを制御する2つの選択モードをサポートしています。 - + + +| モード | 説明 | +| ------------ | -------------------------------------------------------------------------------------- | +| `'follow'` | フォーカスされたアイテムを自動的に選択し、選択が頻繁に変わる場合に、より速いインタラクションを提供します | +| `'explicit'` | 選択を確定するためにSpaceキーまたはEnterキーが必要で、ナビゲーション中の意図しない変更を防ぎます | -`'follow'`モードはフォーカスされたアイテムを自動的に選択し、選択が頻繁に変わる場合に、より速いインタラクションを提供します。`'explicit'`モードでは、選択を確定するためにSpaceキーまたはEnterキーが必要で、ナビゲーション中の意図しない変更を防ぎます。ドロップダウンパターンでは、通常、単一選択のために`'follow'`モードが使用されます。 +TIP: ドロップダウンパターンでは、通常、単一選択のために`'follow'`モードが使用されます。 ## API From b5e843c2c1d982155a2b191a8a12ac8979fea02f Mon Sep 17 00:00:00 2001 From: Suguru Inatomi Date: Fri, 5 Dec 2025 11:49:05 +0900 Subject: [PATCH 11/16] chore: update English source files from origin Updated English source files (.en.md, .en.html) from origin commit 29223c440fcd313066e62332e855ee7ec1189713 --- .../table-of-contents.component.en.html | 2 +- .../skipping-subtrees.en.md | 1 + .../content/best-practices/style-guide.en.md | 6 +- adev-ja/src/content/guide/aria/combobox.en.md | 2 +- adev-ja/src/content/guide/aria/grid.en.md | 8 +-- adev-ja/src/content/guide/aria/listbox.en.md | 13 ++-- adev-ja/src/content/guide/aria/overview.en.md | 2 +- .../directives/attribute-directives.en.md | 39 +++++----- .../content/guide/forms/reactive-forms.en.md | 31 ++++++++ .../src/content/guide/http/interceptors.en.md | 2 +- .../content/guide/routing/define-routes.en.md | 4 +- .../guide/routing/lifecycle-and-events.en.md | 7 +- .../content/guide/routing/route-guards.en.md | 2 +- .../routing/show-routes-with-outlets.en.md | 8 +-- .../src/content/guide/signals/overview.en.md | 2 +- adev-ja/src/content/guide/ssr.en.md | 71 +++++++++++++++++++ .../guide/templates/ng-container.en.md | 2 +- .../component-harnesses-overview.en.md | 4 +- .../guide/testing/components-scenarios.en.md | 6 +- .../essentials/dependency-injection.en.md | 4 +- .../src/content/reference/errors/NG0300.en.md | 2 +- .../src/content/reference/errors/NG0500.en.md | 2 +- .../src/content/reference/errors/NG0503.en.md | 2 +- .../src/content/reference/errors/NG0504.en.md | 4 +- .../src/content/reference/errors/NG0910.en.md | 12 ++-- .../src/content/reference/errors/NG0955.en.md | 4 +- .../src/content/reference/errors/NG0956.en.md | 4 +- .../src/content/reference/errors/NG3003.en.md | 24 +++---- .../1-components-in-angular/README.en.md | 2 +- .../steps/10-deferrable-views/README.en.md | 2 +- .../steps/11-optimizing-images/README.en.md | 2 +- .../steps/12-enable-routing/README.en.md | 2 +- .../steps/13-define-a-route/README.en.md | 2 +- .../steps/14-routerLink/README.en.md | 2 +- .../learn-angular/steps/15-forms/README.en.md | 2 +- .../steps/16-form-control-values/README.en.md | 2 +- .../steps/17-reactive-forms/README.en.md | 2 +- .../steps/18-forms-validation/README.en.md | 2 +- .../README.en.md | 2 +- .../README.en.md | 2 +- .../learn-angular/steps/22-pipes/README.en.md | 2 +- .../steps/23-pipes-format-data/README.en.md | 2 +- .../steps/24-create-a-pipe/README.en.md | 2 +- .../steps/3-composing-components/README.en.md | 2 +- .../steps/4-control-flow-if/README.en.md | 2 +- .../steps/5-control-flow-for/README.en.md | 2 +- .../steps/6-property-binding/README.en.md | 2 +- .../steps/7-event-handling/README.en.md | 2 +- .../learn-angular/steps/8-input/README.en.md | 2 +- .../learn-angular/steps/9-output/README.en.md | 2 +- .../README.en.md | 2 +- 51 files changed, 213 insertions(+), 103 deletions(-) diff --git a/adev-ja/shared-docs/components/table-of-contents/table-of-contents.component.en.html b/adev-ja/shared-docs/components/table-of-contents/table-of-contents.component.en.html index 08540b5e4..7eecf0af4 100644 --- a/adev-ja/shared-docs/components/table-of-contents/table-of-contents.component.en.html +++ b/adev-ja/shared-docs/components/table-of-contents/table-of-contents.component.en.html @@ -9,7 +9,7 @@

On this page

  • - + {{ item.title }}
    • diff --git a/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.en.md b/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.en.md index 39313fb00..05160e1ce 100644 --- a/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.en.md +++ b/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.en.md @@ -17,6 +17,7 @@ You can set the change detection strategy of a component to `OnPush` in the `@Co ```ts import { ChangeDetectionStrategy, Component } from '@angular/core'; + @Component({ changeDetection: ChangeDetectionStrategy.OnPush, }) diff --git a/adev-ja/src/content/best-practices/style-guide.en.md b/adev-ja/src/content/best-practices/style-guide.en.md index 5cffdd32a..a43a95f98 100644 --- a/adev-ja/src/content/best-practices/style-guide.en.md +++ b/adev-ja/src/content/best-practices/style-guide.en.md @@ -110,11 +110,11 @@ When in doubt, go with the approach that leads to smaller files. ### Prefer the `inject` function over constructor parameter injection -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: +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: -- `inject` is generally more readable, especially when a class injects many dependencies. +- [`inject`](/api/core/inject) is generally more readable, especially when a class injects many dependencies. - It's more syntactically straightforward to add comments to injected dependencies -- `inject` offers better type inference. +- [`inject`](/api/core/inject) offers better type inference. - 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. [You can refactor existing code to `inject` with an automatic tool](reference/migrations/inject-function). diff --git a/adev-ja/src/content/guide/aria/combobox.en.md b/adev-ja/src/content/guide/aria/combobox.en.md index 71390217c..38681f5d8 100644 --- a/adev-ja/src/content/guide/aria/combobox.en.md +++ b/adev-ja/src/content/guide/aria/combobox.en.md @@ -51,7 +51,7 @@ Use documented patterns instead when: - Single-selection dropdowns are needed - See the [Select pattern](guide/aria/select) for complete dropdown implementation - Multiple-selection dropdowns are needed - See the [Multiselect pattern](guide/aria/multiselect) for multi-select with compact display -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. +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. ## Features diff --git a/adev-ja/src/content/guide/aria/grid.en.md b/adev-ja/src/content/guide/aria/grid.en.md index ee511b3cc..2b162aee1 100644 --- a/adev-ja/src/content/guide/aria/grid.en.md +++ b/adev-ja/src/content/guide/aria/grid.en.md @@ -10,10 +10,10 @@ 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. - - - - + + + + ## Usage diff --git a/adev-ja/src/content/guide/aria/listbox.en.md b/adev-ja/src/content/guide/aria/listbox.en.md index a1863dc15..d7a753a2d 100644 --- a/adev-ja/src/content/guide/aria/listbox.en.md +++ b/adev-ja/src/content/guide/aria/listbox.en.md @@ -108,14 +108,19 @@ With `orientation="horizontal"`, left and right arrow keys navigate between opti ### Selection modes -Listbox supports two selection modes that control when items become selected. Choose the mode that matches your interface's interaction pattern. +Listbox supports two selection modes that control when items become selected. - + + +| Mode | Description | +| ------------ | ------------------------------------------------------------------------------------------------------ | +| `'follow'` | Automatically selects the focused item, providing faster interaction when selection changes frequently | +| `'explicit'` | Requires Space or Enter to confirm selection, preventing accidental changes while navigating | -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. +TIP: Dropdown patterns typically use `'follow'` mode for single selection. ## APIs diff --git a/adev-ja/src/content/guide/aria/overview.en.md b/adev-ja/src/content/guide/aria/overview.en.md index 5b3808324..9536e598e 100644 --- a/adev-ja/src/content/guide/aria/overview.en.md +++ b/adev-ja/src/content/guide/aria/overview.en.md @@ -3,7 +3,7 @@ ## What is Angular Aria? -Building accessible components seems straightforward, but implementing them according to the W3 Accessibility Guidelines requires significant effort and accessibility expertise. +Building accessible components seems straightforward, but implementing them according to the W3C Accessibility Guidelines requires significant effort and accessibility expertise. 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! diff --git a/adev-ja/src/content/guide/directives/attribute-directives.en.md b/adev-ja/src/content/guide/directives/attribute-directives.en.md index 4d39ac941..a286dfa33 100644 --- a/adev-ja/src/content/guide/directives/attribute-directives.en.md +++ b/adev-ja/src/content/guide/directives/attribute-directives.en.md @@ -33,7 +33,7 @@ HELPFUL: Directives _do not_ support namespaces. ## Applying an attribute directive -1. To use the `HighlightDirective`, add a `

    ` element to the HTML template with the directive as an attribute. +To use the `HighlightDirective`, add a `

    ` element to the HTML template with the directive as an attribute. @@ -45,11 +45,11 @@ This section shows you how to detect when a user mouses into or out of the eleme 1. Configure host event bindings using the `host` property in the `@Directive()` decorator. - + 1. Add two event handler methods, and map host element events to them via the `host` property. - + Subscribe to events of the DOM element that hosts an attribute directive (the `

    ` in this case) by configuring event listeners on the directive's [`host` property](guide/components/host-elements#binding-to-the-host-element). @@ -69,19 +69,19 @@ This section walks you through setting the highlight color while applying the `H 1. In `highlight.directive.ts`, import `Input` from `@angular/core`. - + -2. Add an `appHighlight` `input` property. +1. Add an `appHighlight` `input` property. The `input()` function adds metadata to the class that makes the directive's `appHighlight` property available for binding. -3. In `app.component.ts`, add a `color` property to the `AppComponent`. +1. In `app.component.ts`, add a `color` property to the `AppComponent`. - + -4. To simultaneously apply the directive and the color, use property binding with the `appHighlight` directive selector, setting it equal to `color`. +1. To simultaneously apply the directive and the color, use property binding with the `appHighlight` directive selector, setting it equal to `color`. @@ -95,19 +95,18 @@ This section guides you through adding radio buttons to bind your color choice t 1. Add markup to `app.component.html` for choosing a color as follows: - + -1. Revise the `AppComponent.color` so that it has no initial value. +2. Revise the `AppComponent.color` so that it has no initial value. - + -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`. +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. -1. Serve your application to verify that the user can choose the color with the radio buttons. - -Animated gif of the refactored highlight directive changing color according to the radio button the user selects + Animated gif of the refactored highlight directive changing color according to the radio button the user selects ## Binding to a second property @@ -115,13 +114,13 @@ This section guides you through configuring your application so the developer ca 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`. +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`. - + -1. To bind to the `AppComponent.color` and fall back to "violet" as the default color, add the following HTML. +3. To bind to the `AppComponent.color` and fall back to "violet" as the default color, add the following HTML. In this case, the `defaultColor` binding doesn't use square brackets, `[]`, because it is static. diff --git a/adev-ja/src/content/guide/forms/reactive-forms.en.md b/adev-ja/src/content/guide/forms/reactive-forms.en.md index b88663d4b..c3f7f4b43 100644 --- a/adev-ja/src/content/guide/forms/reactive-forms.en.md +++ b/adev-ja/src/content/guide/forms/reactive-forms.en.md @@ -381,6 +381,36 @@ Each time a new alias instance is added, the new form array instance is provided +### Using `FormArrayDirective` for top-level form arrays + +You can bind a `FormArray` directly to a `

    ` element by using the `FormArrayDirective`. +This is useful when the form does not use a top-level `FormGroup`, and the array itself represents the full form model. + +```angular-ts +import { Component } from '@angular/core'; +import { FormArray, FormControl } from '@angular/forms'; + +@Component({ + selector: 'form-array-example', + template: ` + + @for (control of form.controls; track $index) { + + } +
    + `, +}) +export class FormArrayExampleComponent { + controls = [ + new FormControl('fish'), + new FormControl('cat'), + new FormControl('dog'), + ]; + + form = new FormArray(this.controls); +} +``` + 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 | `FormGroupDirective` | Syncs an existing `FormGroup` instance to a DOM element. | | `FormGroupName` | Syncs a nested `FormGroup` instance to a DOM element. | | `FormArrayName` | Syncs a nested `FormArray` instance to a DOM element. | +| `FormArrayDirective` | Syncs a standalone `FormArray` instance to a DOM element. | diff --git a/adev-ja/src/content/guide/http/interceptors.en.md b/adev-ja/src/content/guide/http/interceptors.en.md index 5f0d7953c..7b43b3e88 100644 --- a/adev-ja/src/content/guide/http/interceptors.en.md +++ b/adev-ja/src/content/guide/http/interceptors.en.md @@ -85,7 +85,7 @@ CRITICAL: The body of a request or response is **not** protected from deep mutat ## Dependency injection in interceptors -Interceptors are run in the _injection context_ of the injector which registered them, and can use Angular's `inject` API to retrieve dependencies. +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. 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: diff --git a/adev-ja/src/content/guide/routing/define-routes.en.md b/adev-ja/src/content/guide/routing/define-routes.en.md index a06ba21fd..1570aeb1f 100644 --- a/adev-ja/src/content/guide/routing/define-routes.en.md +++ b/adev-ja/src/content/guide/routing/define-routes.en.md @@ -231,7 +231,7 @@ Lazily loading routes can significantly improve the load speed of your Angular a ### Injection context lazy loading -The Router executes `loadComponent` and `loadChildren` within the **injection context of the current route**, allowing you to call `inject` inside these loader functions to access providers declared on that route, inherited from parent routes through hierarchical dependency injection, or available globally. This enables context-aware lazy loading. +The Router executes `loadComponent` and `loadChildren` within the **injection context of the current route**, allowing you to call [`inject`](/api/core/inject)inside these loader functions to access providers declared on that route, inherited from parent routes through hierarchical dependency injection, or available globally. This enables context-aware lazy loading. ```ts import { Routes } from '@angular/router'; @@ -258,7 +258,7 @@ There are many factors to consider when deciding on whether a route should be ea In general, eager loading is recommended for primary landing page(s) while other pages would be lazy-loaded. -Note: While lazy routes have the upfront performance benefit of reducing the amount of initial data requested by the user, it adds future data requests that could be undesirable. This is particularly true when dealing with nested lazy loading at multiple levels, which can significantly impact performance. +NOTE: While lazy routes have the upfront performance benefit of reducing the amount of initial data requested by the user, it adds future data requests that could be undesirable. This is particularly true when dealing with nested lazy loading at multiple levels, which can significantly impact performance. ## Redirects diff --git a/adev-ja/src/content/guide/routing/lifecycle-and-events.en.md b/adev-ja/src/content/guide/routing/lifecycle-and-events.en.md index c0b507f51..1d998ac28 100644 --- a/adev-ja/src/content/guide/routing/lifecycle-and-events.en.md +++ b/adev-ja/src/content/guide/routing/lifecycle-and-events.en.md @@ -55,7 +55,7 @@ export class RouterEventsComponent { } ``` -Note: The [`Event`](api/router/Event) type from `@angular/router` is named the same as the regular global [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event) type, but it is different from the [`RouterEvent`](api/router/RouterEvent) type. +NOTE: The [`Event`](api/router/Event) type from `@angular/router` is named the same as the regular global [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event) type, but it is different from the [`RouterEvent`](api/router/RouterEvent) type. ## How to debug routing events @@ -117,7 +117,8 @@ export class AppComponent { Track page views for analytics: ```ts -import { Component, inject, signal, effect } from '@angular/core'; +import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; +import { inject, Injectable, DestroyRef } from '@angular/core'; import { Router, NavigationEnd } from '@angular/router'; @Injectable({ providedIn: 'root' }) @@ -131,7 +132,7 @@ export class AnalyticsService { // Track page views when URL changes if (event instanceof NavigationEnd) { // Send page view to analytics - this.analytics.trackPageView(url); + this.analytics.trackPageView(event.url); } }); } diff --git a/adev-ja/src/content/guide/routing/route-guards.en.md b/adev-ja/src/content/guide/routing/route-guards.en.md index 774e5f912..01d58af07 100644 --- a/adev-ja/src/content/guide/routing/route-guards.en.md +++ b/adev-ja/src/content/guide/routing/route-guards.en.md @@ -26,7 +26,7 @@ All route guards share the same possible return types. This gives you flexibilit | `UrlTree` or `RedirectCommand` | Redirects to another route instead of blocking | | `Promise` or `Observable` | Router uses the first emitted value and then unsubscribes | -Note: `CanMatch` behaves differently— when it returns `false`, Angular tries other matching routes instead of completely blocking navigation. +NOTE: `CanMatch` behaves differently— when it returns `false`, Angular tries other matching routes instead of completely blocking navigation. ## Types of route guards diff --git a/adev-ja/src/content/guide/routing/show-routes-with-outlets.en.md b/adev-ja/src/content/guide/routing/show-routes-with-outlets.en.md index 3b74649c2..8588e5996 100644 --- a/adev-ja/src/content/guide/routing/show-routes-with-outlets.en.md +++ b/adev-ja/src/content/guide/routing/show-routes-with-outlets.en.md @@ -69,10 +69,10 @@ When displaying a route, the `` element remains present in the DO ```angular-html -... - -... -... + + + + ``` ## Nesting routes with child routes diff --git a/adev-ja/src/content/guide/signals/overview.en.md b/adev-ja/src/content/guide/signals/overview.en.md index 3fcc0e3a9..e4e3368e5 100644 --- a/adev-ja/src/content/guide/signals/overview.en.md +++ b/adev-ja/src/content/guide/signals/overview.en.md @@ -124,7 +124,7 @@ Instead, use `computed` signals to model state that depends on other state. ### Injection context -By default, you can only create an `effect()` within an [injection context](guide/di/dependency-injection-context) (where you have access to the `inject` function). The easiest way to satisfy this requirement is to call `effect` within a component, directive, or service `constructor`: +By default, you can only create an `effect()` within an [injection context](guide/di/dependency-injection-context) (where you have access to the [`inject`](/api/core/inject) function). The easiest way to satisfy this requirement is to call `effect` within a component, directive, or service `constructor`: ```ts @Component({...}) diff --git a/adev-ja/src/content/guide/ssr.en.md b/adev-ja/src/content/guide/ssr.en.md index bd88fbd42..9376b6790 100644 --- a/adev-ja/src/content/guide/ssr.en.md +++ b/adev-ja/src/content/guide/ssr.en.md @@ -267,6 +267,10 @@ export class MyComponent { } ``` +NOTE: Prefer [platform-specific providers](guide/ssr#providing-platform-specific-implementations) over runtime checks with `isPlatformBrowser` or `isPlatformServer`. + +IMPORTANT: Avoid using `isPlatformBrowser` in templates with `@if` or other conditionals to render different content on server and client. This causes hydration mismatches and layout shifts, negatively impacting user experience and [Core Web Vitals](https://web.dev/learn-core-web-vitals/). Instead, use `afterNextRender` for browser-specific initialization and keep rendered content consistent across platforms. + ## Setting providers on the server On the server side, top level provider values are set once when the application code is initially parsed and evaluated. @@ -274,6 +278,73 @@ This means that providers configured with `useValue` will keep their value acros If you want to generate a new value for each request, use a factory provider with `useFactory`. The factory function will run for every incoming request, ensuring that a new value is created and assigned to the token each time. +## Providing platform-specific implementations + +When your application needs different behavior on the browser and server, provide separate service implementations for each platform. This approach centralizes platform logic in dedicated services. + +```ts +export abstract class AnalyticsService { + abstract trackEvent(name: string): void; +} +``` + +Create the browser implementation: + +```ts +@Injectable() +export class BrowserAnalyticsService implements AnalyticsService { + trackEvent(name: string): void { + // Sends the event to the browser-based third-party analytics provider + } +} +``` + +Create the server implementation: + +```ts +@Injectable() +export class ServerAnalyticsService implements AnalyticsService { + trackEvent(name: string): void { + // Records the event on the server + } +} +``` + +Register the browser implementation in your main application configuration: + +```ts +// app.config.ts +export const appConfig: ApplicationConfig = { + providers: [ + { provide: AnalyticsService, useClass: BrowserAnalyticsService }, + ] +}; +``` + +Override with the server implementation in your server configuration: + +```ts +// app.config.server.ts +const serverConfig: ApplicationConfig = { + providers: [ + { provide: AnalyticsService, useClass: ServerAnalyticsService }, + ] +}; +``` + +Inject and use the service in your components: + +```ts +@Component({/* ... */}) +export class Checkout { + private analytics = inject(AnalyticsService); + + onAction() { + this.analytics.trackEvent('action'); + } +} +``` + ## Accessing Document via DI When working with server-side rendering, you should avoid directly referencing browser-specific globals like `document`. Instead, use the [`DOCUMENT`](api/core/DOCUMENT) token to access the document object in a platform-agnostic way. diff --git a/adev-ja/src/content/guide/templates/ng-container.en.md b/adev-ja/src/content/guide/templates/ng-container.en.md index d63d593fa..22895c151 100644 --- a/adev-ja/src/content/guide/templates/ng-container.en.md +++ b/adev-ja/src/content/guide/templates/ng-container.en.md @@ -80,7 +80,7 @@ You can also apply structural directives to `` elements. Common ex ```angular-html

    Admin Dashboard

    - +     diff --git a/adev-ja/src/content/guide/testing/component-harnesses-overview.en.md b/adev-ja/src/content/guide/testing/component-harnesses-overview.en.md index a1cc469c9..48d4f2710 100644 --- a/adev-ja/src/content/guide/testing/component-harnesses-overview.en.md +++ b/adev-ja/src/content/guide/testing/component-harnesses-overview.en.md @@ -8,13 +8,13 @@ Harnesses offer several benefits: - They make tests become more readable and easier to maintain - They can be used across multiple testing environments - +```ts // Example of test with a harness for a component called MyButtonComponent it('should load button with exact text', async () => { const button = await loader.getHarness(MyButtonComponentHarness); expect(await button.getText()).toBe('Confirm'); }); - +``` Component harnesses are especially useful for shared UI widgets. Developers often write tests that depend on private implementation details of widgets, such as DOM structure and CSS classes. Those dependencies make tests brittle and hard to maintain. Harnesses offer an alternative— a supported API that interacts with the widget the same way an end-user does. Widget implementation changes now become less likely to break user tests. For example, [Angular Material](https://material.angular.dev/components/categories) provides a test harness for each component in the library. diff --git a/adev-ja/src/content/guide/testing/components-scenarios.en.md b/adev-ja/src/content/guide/testing/components-scenarios.en.md index 4e95d35ae..210748d61 100644 --- a/adev-ja/src/content/guide/testing/components-scenarios.en.md +++ b/adev-ja/src/content/guide/testing/components-scenarios.en.md @@ -304,12 +304,10 @@ To enable it, set a global flag before importing `zone-testing`. If you use the Angular CLI, configure this flag in `src/test.ts`. - - +```ts [window as any]('__zone_symbol__fakeAsyncPatchLock') = true; import 'zone.js/testing'; - - +``` diff --git a/adev-ja/src/content/introduction/essentials/dependency-injection.en.md b/adev-ja/src/content/introduction/essentials/dependency-injection.en.md index 606fb5efb..9f9519735 100644 --- a/adev-ja/src/content/introduction/essentials/dependency-injection.en.md +++ b/adev-ja/src/content/introduction/essentials/dependency-injection.en.md @@ -31,7 +31,7 @@ export class Calculator { When you want to use a service in a component, you need to: 1. Import the service -2. Declare a class field where the service is injected. Assign the class field to the result of the call of the built-in function `inject` which creates the service +2. Declare a class field where the service is injected. Assign the class field to the result of the call of the built-in function [`inject`](/api/core/inject) which creates the service Here’s what it might look like in the `Receipt` component: @@ -50,7 +50,7 @@ export class Receipt { } ``` -In this example, the `Calculator` is being used by calling the Angular function `inject` and passing in the service to it. +In this example, the `Calculator` is being used by calling the Angular function [`inject`](/api/core/inject) and passing in the service to it. ## Next Step diff --git a/adev-ja/src/content/reference/errors/NG0300.en.md b/adev-ja/src/content/reference/errors/NG0300.en.md index 0c802ac84..18d2f261d 100644 --- a/adev-ja/src/content/reference/errors/NG0300.en.md +++ b/adev-ja/src/content/reference/errors/NG0300.en.md @@ -6,7 +6,7 @@ Two or more [components](guide/components) use the same element selector. Becaus This error occurs at runtime when you apply two selectors to a single node, each of which matches a different component, or when you apply a single selector to a node and it matches more than one component. -```ts +```angular-ts import {Component} from '@angular/core'; @Component({ diff --git a/adev-ja/src/content/reference/errors/NG0500.en.md b/adev-ja/src/content/reference/errors/NG0500.en.md index 3c5d6b012..6e12d348e 100644 --- a/adev-ja/src/content/reference/errors/NG0500.en.md +++ b/adev-ja/src/content/reference/errors/NG0500.en.md @@ -8,7 +8,7 @@ More information about hydration can be found in [this guide](guide/hydration). The following example will trigger the error. -```typescript +```angular-ts @Component({ selector: 'app-example', template: '
    world
    ', diff --git a/adev-ja/src/content/reference/errors/NG0503.en.md b/adev-ja/src/content/reference/errors/NG0503.en.md index 950821aeb..51a8b8d76 100644 --- a/adev-ja/src/content/reference/errors/NG0503.en.md +++ b/adev-ja/src/content/reference/errors/NG0503.en.md @@ -6,7 +6,7 @@ More information about hydration can be found in [this guide](guide/hydration). The following examples will trigger the error. -```typescript +```angular-ts @Component({ selector: 'dynamic', template: ` diff --git a/adev-ja/src/content/reference/errors/NG0504.en.md b/adev-ja/src/content/reference/errors/NG0504.en.md index b45b1c334..61a9ecbd3 100644 --- a/adev-ja/src/content/reference/errors/NG0504.en.md +++ b/adev-ja/src/content/reference/errors/NG0504.en.md @@ -10,7 +10,7 @@ The following examples will trigger the error. In this example, the `ngSkipHydration` attribute is applied to a `
    ` using host bindings of a directive. Since the `
    ` doesn't act as a component host node, Angular will throw an error. -```typescript +```angular-ts @Directive({ selector: '[dir]', host: {ngSkipHydration: 'true'}, @@ -34,7 +34,7 @@ class SimpleComponent { In this example, the `ngSkipHydration` is applied to a `
    ` as an attribute via a template. Since the `
    ` doesn't act as a component host node, Angular will throw an error. -```typescript +```angular-ts @Component({ selector: 'app', template: ` diff --git a/adev-ja/src/content/reference/errors/NG0910.en.md b/adev-ja/src/content/reference/errors/NG0910.en.md index 8345f7c5b..75bd044ce 100644 --- a/adev-ja/src/content/reference/errors/NG0910.en.md +++ b/adev-ja/src/content/reference/errors/NG0910.en.md @@ -52,10 +52,14 @@ The recommended solution is to use the mentioned attributes as static ones, for ``` If you need to have different values for these attributes (depending on various conditions), -you can use an `*ngIf` or an `*ngSwitch` on an ` - - +@if (someConditionA) { + +} @else if (someConditionB) { + +} @else { + +} ``` diff --git a/adev-ja/src/content/reference/errors/NG0955.en.md b/adev-ja/src/content/reference/errors/NG0955.en.md index c74dae0f6..82359d94c 100644 --- a/adev-ja/src/content/reference/errors/NG0955.en.md +++ b/adev-ja/src/content/reference/errors/NG0955.en.md @@ -2,7 +2,7 @@ A track expression specified in the `@for` loop evaluated to duplicated keys for a given collection, ex.: -```typescript +```angular-ts @Component({ template: `@for (item of items; track item.value) {{{item.value}}}`, }) @@ -21,7 +21,7 @@ There is also performance penalty associated with duplicated keys - internally A Change the tracking expression such that it uniquely identifies an item in a collection. In the discussed example the correct track expression would use the unique `key` property (`item.key`): -```typescript +```angular-ts @Component({ template: `@for (item of items; track item.key) {{{item.value}}}`, }) diff --git a/adev-ja/src/content/reference/errors/NG0956.en.md b/adev-ja/src/content/reference/errors/NG0956.en.md index 3d1faadbf..2fd046c05 100644 --- a/adev-ja/src/content/reference/errors/NG0956.en.md +++ b/adev-ja/src/content/reference/errors/NG0956.en.md @@ -2,7 +2,7 @@ The identity track expression specified in the `@for` loop caused re-creation of the DOM corresponding to _all_ items. This is a very expensive operation that commonly occurs when working with immutable data structures. For example: -```typescript +```angular-ts @Component({ template: ` @@ -33,7 +33,7 @@ Apart from having a high performance penalty, re-creating the DOM tree results i Change the tracking expression such that it uniquely identifies an item in a collection, regardless of its object identity. In the discussed example, the correct track expression would use the unique `id` property (`item.id`): -```typescript +```angular-ts @Component({ template: ` diff --git a/adev-ja/src/content/reference/errors/NG3003.en.md b/adev-ja/src/content/reference/errors/NG3003.en.md index 3a1593c7c..6588e1b93 100644 --- a/adev-ja/src/content/reference/errors/NG3003.en.md +++ b/adev-ja/src/content/reference/errors/NG3003.en.md @@ -3,30 +3,30 @@ A component, directive, or pipe that is referenced by this component would require the compiler to add an import that would lead to a cycle of imports. For example, consider a scenario where a `ParentComponent` references a `ChildComponent` in its template: - +```angular-ts {header:"parent.component.ts"} import {Component} from '@angular/core'; import {ChildComponent} from './child.component'; @Component({ -selector: 'app-parent', -imports: [ChildComponent], -template: '', + selector: 'app-parent', + imports: [ChildComponent], + template: '', }) export class ParentComponent {} - +``` - +```angular-ts {header:"child.component.ts"} import {Component, inject} from '@angular/core'; import {ParentComponent} from './parent.component'; @Component({ -selector: 'app-child', -template: 'The child!', + selector: 'app-child', + template: 'The child!', }) export class ChildComponent { -private parent = inject(ParentComponent); + private parent = inject(ParentComponent); } - +``` There is already an import from `child.component.ts` to `parent.component.ts` since the `ChildComponent` references the `ParentComponent` in its constructor. @@ -34,11 +34,11 @@ HELPFUL: The parent component's template contains ``. The generated code for this template must therefore contain a reference to the `ChildComponent` class. In order to make this reference, the compiler would have to add an import from `parent.component.ts` to `child.component.ts`, which would cause an import cycle: - +```text parent.component.ts -> child.component.ts -> parent.component.ts - +``` ## Remote Scoping diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/1-components-in-angular/README.en.md b/adev-ja/src/content/tutorials/learn-angular/steps/1-components-in-angular/README.en.md index f67cf24b7..52178220a 100644 --- a/adev-ja/src/content/tutorials/learn-angular/steps/1-components-in-angular/README.en.md +++ b/adev-ja/src/content/tutorials/learn-angular/steps/1-components-in-angular/README.en.md @@ -6,7 +6,7 @@ Components are the foundational building blocks for any Angular application. Eac - HTML template - CSS styles -Note: Learn more about [components in the essentials guide](/essentials/components). +NOTE: Learn more about [components in the essentials guide](/essentials/components). In this activity, you'll learn how to update the template and styles of a component. diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/10-deferrable-views/README.en.md b/adev-ja/src/content/tutorials/learn-angular/steps/10-deferrable-views/README.en.md index fc0a17410..e80d301fc 100644 --- a/adev-ja/src/content/tutorials/learn-angular/steps/10-deferrable-views/README.en.md +++ b/adev-ja/src/content/tutorials/learn-angular/steps/10-deferrable-views/README.en.md @@ -4,7 +4,7 @@ Sometimes in app development, you end up with a lot of components that you need Maybe they are below the visible fold or are heavy components that aren't interacted with until later. In that case, we can load some of those resources later with deferrable views. -Note: Learn more about [deferred loading with @defer in the in-depth guide](/guide/templates/defer). +NOTE: Learn more about [deferred loading with @defer in the in-depth guide](/guide/templates/defer). In this activity, you'll learn how to use deferrable views to defer load a section of your component template. diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/11-optimizing-images/README.en.md b/adev-ja/src/content/tutorials/learn-angular/steps/11-optimizing-images/README.en.md index 6c085fe92..d93a5b4b5 100644 --- a/adev-ja/src/content/tutorials/learn-angular/steps/11-optimizing-images/README.en.md +++ b/adev-ja/src/content/tutorials/learn-angular/steps/11-optimizing-images/README.en.md @@ -4,7 +4,7 @@ Images are a big part of many applications, and can be a major contributor to ap Image optimization can be a complex topic, but Angular handles most of it for you, with the `NgOptimizedImage` directive. -Note: Learn more about [image optimization with NgOptimizedImage in the in-depth guide](/guide/image-optimization). +NOTE: Learn more about [image optimization with NgOptimizedImage in the in-depth guide](/guide/image-optimization). In this activity, you'll learn how to use `NgOptimizedImage` to ensure your images are loaded efficiently. diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/12-enable-routing/README.en.md b/adev-ja/src/content/tutorials/learn-angular/steps/12-enable-routing/README.en.md index 3009baa31..064e0d71f 100644 --- a/adev-ja/src/content/tutorials/learn-angular/steps/12-enable-routing/README.en.md +++ b/adev-ja/src/content/tutorials/learn-angular/steps/12-enable-routing/README.en.md @@ -2,7 +2,7 @@ For most apps, there comes a point where the app requires more than a single page. When that time inevitably comes, routing becomes a big part of the performance story for users. -Note: Learn more about [routing in the in-depth guide](/guide/routing). +NOTE: Learn more about [routing in the in-depth guide](/guide/routing). In this activity, you'll learn how to set up and configure your app to use Angular Router. diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/13-define-a-route/README.en.md b/adev-ja/src/content/tutorials/learn-angular/steps/13-define-a-route/README.en.md index 861a4f25b..92519ddbe 100644 --- a/adev-ja/src/content/tutorials/learn-angular/steps/13-define-a-route/README.en.md +++ b/adev-ja/src/content/tutorials/learn-angular/steps/13-define-a-route/README.en.md @@ -2,7 +2,7 @@ Now that you've set up the app to use Angular Router, you need to define the routes. -Note: Learn more about [defining a basic route in the in-depth guide](/guide/routing/common-router-tasks#defining-a-basic-route). +NOTE: Learn more about [defining a basic route in the in-depth guide](/guide/routing/common-router-tasks#defining-a-basic-route). In this activity, you'll learn how to add and configure routes with your app. diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/14-routerLink/README.en.md b/adev-ja/src/content/tutorials/learn-angular/steps/14-routerLink/README.en.md index 4d4032dff..523135ebb 100644 --- a/adev-ja/src/content/tutorials/learn-angular/steps/14-routerLink/README.en.md +++ b/adev-ja/src/content/tutorials/learn-angular/steps/14-routerLink/README.en.md @@ -2,7 +2,7 @@ In the app's current state, the entire page refreshes when we click on an internal link that exists within the app. While this may not seem significant with a small app, this can have performance implications for larger pages with more content where users have to redownload assets and run calculations again. -Note: Learn more about [adding routes to your application in the in-depth guide](/guide/routing/common-router-tasks#add-your-routes-to-your-application). +NOTE: Learn more about [adding routes to your application in the in-depth guide](/guide/routing/common-router-tasks#add-your-routes-to-your-application). In this activity, you'll learn how to leverage the `RouterLink` directive to make the most use of Angular Router. diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/15-forms/README.en.md b/adev-ja/src/content/tutorials/learn-angular/steps/15-forms/README.en.md index e58201ad6..bef019e6b 100644 --- a/adev-ja/src/content/tutorials/learn-angular/steps/15-forms/README.en.md +++ b/adev-ja/src/content/tutorials/learn-angular/steps/15-forms/README.en.md @@ -4,7 +4,7 @@ Forms are a big part of many apps because they enable your app to accept user in In Angular, there are two types of forms: template-driven and reactive. You'll learn about both over the next few activities. -Note: Learn more about [forms in Angular in the in-depth guide](/guide/forms). +NOTE: Learn more about [forms in Angular in the in-depth guide](/guide/forms). In this activity, you'll learn how to set up a form using a template-driven approach. diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/16-form-control-values/README.en.md b/adev-ja/src/content/tutorials/learn-angular/steps/16-form-control-values/README.en.md index c8ac0f1f8..757efa1c5 100644 --- a/adev-ja/src/content/tutorials/learn-angular/steps/16-form-control-values/README.en.md +++ b/adev-ja/src/content/tutorials/learn-angular/steps/16-form-control-values/README.en.md @@ -2,7 +2,7 @@ Now that your forms are set up with Angular, the next step is to access the values from the form controls. -Note: Learn more about [adding a basic form control in the in-depth guide](/guide/forms/reactive-forms#adding-a-basic-form-control). +NOTE: Learn more about [adding a basic form control in the in-depth guide](/guide/forms/reactive-forms#adding-a-basic-form-control). In this activity, you'll learn how to get the value from your form input. diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/17-reactive-forms/README.en.md b/adev-ja/src/content/tutorials/learn-angular/steps/17-reactive-forms/README.en.md index 067b7482c..418f478b5 100644 --- a/adev-ja/src/content/tutorials/learn-angular/steps/17-reactive-forms/README.en.md +++ b/adev-ja/src/content/tutorials/learn-angular/steps/17-reactive-forms/README.en.md @@ -2,7 +2,7 @@ When you want to manage your forms programmatically instead of relying purely on the template, reactive forms are the answer. -Note: Learn more about [reactive forms in the in-depth guide](/guide/forms/reactive-forms). +NOTE: Learn more about [reactive forms in the in-depth guide](/guide/forms/reactive-forms). In this activity, you'll learn how to set up reactive forms. diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/18-forms-validation/README.en.md b/adev-ja/src/content/tutorials/learn-angular/steps/18-forms-validation/README.en.md index 0fa8efc70..6d3a1fe9b 100644 --- a/adev-ja/src/content/tutorials/learn-angular/steps/18-forms-validation/README.en.md +++ b/adev-ja/src/content/tutorials/learn-angular/steps/18-forms-validation/README.en.md @@ -2,7 +2,7 @@ Another common scenario when working with forms is the need to validate the inputs to ensure the correct data is submitted. -Note: Learn more about [validating form input in the in-depth guide](/guide/forms/reactive-forms#validating-form-input). +NOTE: Learn more about [validating form input in the in-depth guide](/guide/forms/reactive-forms#validating-form-input). In this activity, you'll learn how to validate forms with reactive forms. diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/19-creating-an-injectable-service/README.en.md b/adev-ja/src/content/tutorials/learn-angular/steps/19-creating-an-injectable-service/README.en.md index 88aafe5cd..cda89cf01 100644 --- a/adev-ja/src/content/tutorials/learn-angular/steps/19-creating-an-injectable-service/README.en.md +++ b/adev-ja/src/content/tutorials/learn-angular/steps/19-creating-an-injectable-service/README.en.md @@ -2,7 +2,7 @@ Dependency injection (DI) in Angular is one of the framework's most powerful features. Consider dependency injection to be the ability for Angular to _provide_ resources you need for your application at runtime. A dependency could be a service or some other resources. -Note: Learn more about [dependency injection in the essentials guide](/essentials/dependency-injection). +NOTE: Learn more about [dependency injection in the essentials guide](/essentials/dependency-injection). In this activity, you'll learn how to create an `injectable` service. diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/2-updating-the-component-class/README.en.md b/adev-ja/src/content/tutorials/learn-angular/steps/2-updating-the-component-class/README.en.md index 9ad79e7c1..e3692f3a0 100644 --- a/adev-ja/src/content/tutorials/learn-angular/steps/2-updating-the-component-class/README.en.md +++ b/adev-ja/src/content/tutorials/learn-angular/steps/2-updating-the-component-class/README.en.md @@ -2,7 +2,7 @@ In Angular, the component's logic and behavior are defined in the component's TypeScript class. -Note: Learn more about [showing dynamic text in the essentials guide](/essentials/templates#showing-dynamic-text). +NOTE: Learn more about [showing dynamic text in the essentials guide](/essentials/templates#showing-dynamic-text). In this activity, you'll learn how to update the component class and how to use [interpolation](/guide/templates/binding#render-dynamic-text-with-text-interpolation). diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/22-pipes/README.en.md b/adev-ja/src/content/tutorials/learn-angular/steps/22-pipes/README.en.md index 7d784318c..e23edfce8 100644 --- a/adev-ja/src/content/tutorials/learn-angular/steps/22-pipes/README.en.md +++ b/adev-ja/src/content/tutorials/learn-angular/steps/22-pipes/README.en.md @@ -2,7 +2,7 @@ Pipes are functions that are used to transform data in templates. In general, pipes are "pure" functions that don't cause side effects. Angular has a number of helpful built-in pipes you can import and use in your components. You can also create a custom pipe. -Note: Learn more about [pipes in the in-depth guide](/guide/templates/pipes). +NOTE: Learn more about [pipes in the in-depth guide](/guide/templates/pipes). In this activity, you will import a pipe and use it in the template. diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/23-pipes-format-data/README.en.md b/adev-ja/src/content/tutorials/learn-angular/steps/23-pipes-format-data/README.en.md index 07cfe9e69..e60c079ff 100644 --- a/adev-ja/src/content/tutorials/learn-angular/steps/23-pipes-format-data/README.en.md +++ b/adev-ja/src/content/tutorials/learn-angular/steps/23-pipes-format-data/README.en.md @@ -2,7 +2,7 @@ You can take your use of pipes even further by configuring them. Pipes can be configured by passing options to them. -Note: Learn more about [formatting data with pipes in the in-depth guide](/guide/templates/pipes). +NOTE: Learn more about [formatting data with pipes in the in-depth guide](/guide/templates/pipes). In this activity, you will work with some pipes and pipe parameters. diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/24-create-a-pipe/README.en.md b/adev-ja/src/content/tutorials/learn-angular/steps/24-create-a-pipe/README.en.md index 100ffbf8d..10a84733a 100644 --- a/adev-ja/src/content/tutorials/learn-angular/steps/24-create-a-pipe/README.en.md +++ b/adev-ja/src/content/tutorials/learn-angular/steps/24-create-a-pipe/README.en.md @@ -2,7 +2,7 @@ You can create custom pipes in Angular to fit your data transformation needs. -Note: Learn more about [creating custom pipes in the in-depth guide](/guide/templates/pipes#creating-custom-pipes). +NOTE: Learn more about [creating custom pipes in the in-depth guide](/guide/templates/pipes#creating-custom-pipes). In this activity, you will create a custom pipe and use it in your template. diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/3-composing-components/README.en.md b/adev-ja/src/content/tutorials/learn-angular/steps/3-composing-components/README.en.md index 8d207f7c7..2e3616923 100644 --- a/adev-ja/src/content/tutorials/learn-angular/steps/3-composing-components/README.en.md +++ b/adev-ja/src/content/tutorials/learn-angular/steps/3-composing-components/README.en.md @@ -4,7 +4,7 @@ You've learned to update the component template, component logic, and component The `selector` property of the component configuration gives you a name to use when referencing the component in another template. You use the `selector` like an HTML tag, for example `app-user` would be `` in the template. -Note: Learn more about [using components in the essentials guide](/essentials/components#using-components). +NOTE: Learn more about [using components in the essentials guide](/essentials/components#using-components). In this activity, you'll learn how to compose components. diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/4-control-flow-if/README.en.md b/adev-ja/src/content/tutorials/learn-angular/steps/4-control-flow-if/README.en.md index 4d668d26a..bf9b5724b 100644 --- a/adev-ja/src/content/tutorials/learn-angular/steps/4-control-flow-if/README.en.md +++ b/adev-ja/src/content/tutorials/learn-angular/steps/4-control-flow-if/README.en.md @@ -4,7 +4,7 @@ Deciding what to display on the screen for a user is a common task in applicatio To express conditional displays in templates, Angular uses the `@if` template syntax. -Note: Learn more about [control flow in the essentials guide](/essentials/templates#control-flow-with-if-and-for). +NOTE: Learn more about [control flow in the essentials guide](/essentials/templates#control-flow-with-if-and-for). In this activity, you'll learn how to use conditionals in templates. diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/5-control-flow-for/README.en.md b/adev-ja/src/content/tutorials/learn-angular/steps/5-control-flow-for/README.en.md index 57ca07d76..c66230b45 100644 --- a/adev-ja/src/content/tutorials/learn-angular/steps/5-control-flow-for/README.en.md +++ b/adev-ja/src/content/tutorials/learn-angular/steps/5-control-flow-for/README.en.md @@ -2,7 +2,7 @@ Often when building web applications, you need to repeat some code a specific number of times - for example, given an array of names, you may want to display each name in a `

    ` tag. -Note: Learn more about [control flow in the essentials guide](/essentials/templates#control-flow-with-if-and-for). +NOTE: Learn more about [control flow in the essentials guide](/essentials/templates#control-flow-with-if-and-for). In this activity, you'll learn how to use `@for` to repeat elements in a template. diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/6-property-binding/README.en.md b/adev-ja/src/content/tutorials/learn-angular/steps/6-property-binding/README.en.md index fd72fb0a2..e4d4670fe 100644 --- a/adev-ja/src/content/tutorials/learn-angular/steps/6-property-binding/README.en.md +++ b/adev-ja/src/content/tutorials/learn-angular/steps/6-property-binding/README.en.md @@ -4,7 +4,7 @@ Property binding in Angular enables you to set values for properties of HTML ele Use property binding to dynamically set values for properties and attributes. You can do things such as toggle button features, set image paths programmatically, and share values between components. -Note: Learn more about [setting dynamic properties and attributes in the essentials guide](/essentials/templates#setting-dynamic-properties-and-attributes). +NOTE: Learn more about [setting dynamic properties and attributes in the essentials guide](/essentials/templates#setting-dynamic-properties-and-attributes). In this activity, you'll learn how to use property binding in templates. diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/7-event-handling/README.en.md b/adev-ja/src/content/tutorials/learn-angular/steps/7-event-handling/README.en.md index a1ba9dfd2..f36da4ae0 100644 --- a/adev-ja/src/content/tutorials/learn-angular/steps/7-event-handling/README.en.md +++ b/adev-ja/src/content/tutorials/learn-angular/steps/7-event-handling/README.en.md @@ -2,7 +2,7 @@ Event handling enables interactive features on web apps. It gives you the ability as a developer to respond to user actions like button presses, form submissions and more. -Note: Learn more about [handling user interaction in the essentials guide](/essentials/templates#handling-user-interaction). +NOTE: Learn more about [handling user interaction in the essentials guide](/essentials/templates#handling-user-interaction). In this activity, you'll learn how to add an event handler. diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/8-input/README.en.md b/adev-ja/src/content/tutorials/learn-angular/steps/8-input/README.en.md index 78e13a05e..a27bbb423 100644 --- a/adev-ja/src/content/tutorials/learn-angular/steps/8-input/README.en.md +++ b/adev-ja/src/content/tutorials/learn-angular/steps/8-input/README.en.md @@ -4,7 +4,7 @@ Sometimes app development requires you to send data into a component. This data Angular uses a concept called `input`. This is similar to `props` in other frameworks. To create an `input` property, use the `input()` function. -Note: Learn more about [accepting data with input properties in the inputs guide](/guide/components/inputs). +NOTE: Learn more about [accepting data with input properties in the inputs guide](/guide/components/inputs). In this activity, you'll learn how to use the `input()` function to send information to components. diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/9-output/README.en.md b/adev-ja/src/content/tutorials/learn-angular/steps/9-output/README.en.md index c9ee88609..a09914226 100644 --- a/adev-ja/src/content/tutorials/learn-angular/steps/9-output/README.en.md +++ b/adev-ja/src/content/tutorials/learn-angular/steps/9-output/README.en.md @@ -4,7 +4,7 @@ When working with components it may be required to notify other components that Angular uses the `output()` function to enable this type of behavior. -Note: Learn more about [custom events in the outputs guide](/guide/components/outputs). +NOTE: Learn more about [custom events in the outputs guide](/guide/components/outputs). In this activity, you'll learn how to use the `output()` function to communicate with components. diff --git a/adev-ja/src/content/tutorials/signals/steps/7-using-signals-with-services/README.en.md b/adev-ja/src/content/tutorials/signals/steps/7-using-signals-with-services/README.en.md index 15cc22683..7dcb21eeb 100644 --- a/adev-ja/src/content/tutorials/signals/steps/7-using-signals-with-services/README.en.md +++ b/adev-ja/src/content/tutorials/signals/steps/7-using-signals-with-services/README.en.md @@ -78,7 +78,7 @@ import {CartDisplay} from './cart-display';

    - +
    `, From 3ed4956ff5a4be2afa3dbaf41b99edf638adc73a Mon Sep 17 00:00:00 2001 From: Suguru Inatomi Date: Fri, 5 Dec 2025 11:49:59 +0900 Subject: [PATCH 12/16] fix: apply textlint fixes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fixed terminology: Signal Forms -> シグナルフォーム --- adev-ja/src/content/guide/forms/signals/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/adev-ja/src/content/guide/forms/signals/overview.md b/adev-ja/src/content/guide/forms/signals/overview.md index 37acc1dbe..0d83abb69 100644 --- a/adev-ja/src/content/guide/forms/signals/overview.md +++ b/adev-ja/src/content/guide/forms/signals/overview.md @@ -47,7 +47,7 @@ import { form, Field, required, email } from '@angular/forms/signals' ## Next steps -To learn more about how Signal Forms work, check out the following guides: +To learn more about how シグナルフォーム work, check out the following guides: From 23808f59fd3e6829d2c32bb03b642bd3e77e7033 Mon Sep 17 00:00:00 2001 From: Suguru Inatomi Date: Fri, 5 Dec 2025 16:23:51 +0900 Subject: [PATCH 13/16] fix: complete Japanese translation in overview.md Fully translated the 'Next steps' section to fix ja-spacing lint errors --- adev-ja/src/content/guide/forms/signals/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/adev-ja/src/content/guide/forms/signals/overview.md b/adev-ja/src/content/guide/forms/signals/overview.md index 0d83abb69..005d9a6af 100644 --- a/adev-ja/src/content/guide/forms/signals/overview.md +++ b/adev-ja/src/content/guide/forms/signals/overview.md @@ -47,7 +47,7 @@ import { form, Field, required, email } from '@angular/forms/signals' ## Next steps -To learn more about how シグナルフォーム work, check out the following guides: +シグナルフォームの仕組みについて詳しく知るには、以下のガイドを確認してください。 From cdffbf21267acdc149fb39730edbb5a75289065b Mon Sep 17 00:00:00 2001 From: Suguru Inatomi Date: Fri, 5 Dec 2025 16:35:07 +0900 Subject: [PATCH 14/16] fix: add title attribute to table-of-contents links Synced with origin change that adds tooltip support for truncated TOC items --- .../table-of-contents/table-of-contents.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/adev-ja/shared-docs/components/table-of-contents/table-of-contents.component.html b/adev-ja/shared-docs/components/table-of-contents/table-of-contents.component.html index ec84bc089..fbc4da2ca 100644 --- a/adev-ja/shared-docs/components/table-of-contents/table-of-contents.component.html +++ b/adev-ja/shared-docs/components/table-of-contents/table-of-contents.component.html @@ -9,7 +9,7 @@

    目次

  • - + {{ item.title }}
    • From ec348eaf1d2da7a40e71753145114f9d69393bcc Mon Sep 17 00:00:00 2001 From: Suguru Inatomi Date: Fri, 5 Dec 2025 16:39:07 +0900 Subject: [PATCH 15/16] fix: migrate ssr.md with platform-specific providers section MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Added: - NOTE about preferring platform-specific providers - IMPORTANT warning about isPlatformBrowser in templates - New section: Providing platform-specific implementations (71 lines) Fixed lint errors: - ユーザーエクスペリエンス -> ユーザー体験 - Removed doubled joshi particle --- adev-ja/src/content/guide/ssr.md | 71 ++++++++++++++++++++++++++++++++ 1 file changed, 71 insertions(+) diff --git a/adev-ja/src/content/guide/ssr.md b/adev-ja/src/content/guide/ssr.md index 954ecbc8c..c497febc1 100644 --- a/adev-ja/src/content/guide/ssr.md +++ b/adev-ja/src/content/guide/ssr.md @@ -267,6 +267,10 @@ export class MyComponent { } ``` +NOTE: `isPlatformBrowser` や `isPlatformServer` を使用したランタイムチェックよりも、[プラットフォーム固有のプロバイダー](guide/ssr#providing-platform-specific-implementations)を推奨します。 + +IMPORTANT: テンプレートで `isPlatformBrowser` を `@if` やその他の条件と共に使用して、サーバーとクライアントで異なるコンテンツをレンダリングすることは避けてください。これはハイドレーションの不一致やレイアウトシフトを引き起こし、ユーザー体験と[Core Web Vitals](https://web.dev/learn-core-web-vitals/)に悪影響を与えます。代わりに、ブラウザ固有の初期化には `afterNextRender` を使用し、レンダリングされるコンテンツをプラットフォーム間で一貫性のあるものに保ちます。 + ## サーバーでプロバイダーを設定する {#setting-providers-on-the-server} サーバー側では、トップレベルのプロバイダー値は、アプリケーションコードが最初に解析および評価されたときに一度設定されます。 @@ -274,6 +278,73 @@ export class MyComponent { リクエストごとに新しい値を生成したい場合は、`useFactory` を使用してファクトリープロバイダーを使用します。ファクトリー関数は、受信リクエストごとに実行され、毎回新しい値が作成されてトークンに割り当てられることを保証します。 +## プラットフォーム固有の実装を提供する {#providing-platform-specific-implementations} + +アプリケーションがブラウザとサーバーで異なる動作を必要とする場合、各プラットフォーム用に個別のサービス実装を提供します。このアプローチにより、プラットフォームロジックを専用のサービスに集中させることができます。 + +```ts +export abstract class AnalyticsService { + abstract trackEvent(name: string): void; +} +``` + +ブラウザ実装を作成します。 + +```ts +@Injectable() +export class BrowserAnalyticsService implements AnalyticsService { + trackEvent(name: string): void { + // ブラウザベースのサードパーティ分析プロバイダーにイベントを送信します + } +} +``` + +サーバー実装を作成します。 + +```ts +@Injectable() +export class ServerAnalyticsService implements AnalyticsService { + trackEvent(name: string): void { + // サーバーでイベントを記録します + } +} +``` + +メインアプリケーション構成でブラウザ実装を登録します。 + +```ts +// app.config.ts +export const appConfig: ApplicationConfig = { + providers: [ + { provide: AnalyticsService, useClass: BrowserAnalyticsService }, + ] +}; +``` + +サーバー構成でサーバー実装をオーバーライドします。 + +```ts +// app.config.server.ts +const serverConfig: ApplicationConfig = { + providers: [ + { provide: AnalyticsService, useClass: ServerAnalyticsService }, + ] +}; +``` + +コンポーネントでサービスを注入して使用します。 + +```ts +@Component({/* ... */}) +export class Checkout { + private analytics = inject(AnalyticsService); + + onAction() { + this.analytics.trackEvent('action'); + } +} +``` + ## DIを介したDocumentへのアクセス {#accessing-document-via-di} サーバーサイドレンダリングを使用する場合、`document` のようなブラウザ固有のグローバルを直接参照することは避けるべきです。代わりに、[`DOCUMENT`](api/core/DOCUMENT) トークンを使用して、プラットフォームに依存しない方法でdocumentオブジェクトにアクセスします。 From 391de76c7432ba80fd35d92f9343287ab1bd59df Mon Sep 17 00:00:00 2001 From: Suguru Inatomi Date: Fri, 5 Dec 2025 16:41:27 +0900 Subject: [PATCH 16/16] fix: improve wording in ssr.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Changed '構成において、サービスを' to '構成の中で、' for better clarity --- adev-ja/src/content/guide/ssr.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/adev-ja/src/content/guide/ssr.md b/adev-ja/src/content/guide/ssr.md index c497febc1..7b6fbf230 100644 --- a/adev-ja/src/content/guide/ssr.md +++ b/adev-ja/src/content/guide/ssr.md @@ -321,7 +321,7 @@ export const appConfig: ApplicationConfig = { }; ``` -サーバー構成でサーバー実装をオーバーライドします。 +サーバー構成の中で、サーバー実装でオーバーライドします。 ```ts // app.config.server.ts