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 08540b5e4a..7eecf0af44 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/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 ec84bc089a..fbc4da2cad 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 }}
    • 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 39313fb006..05160e1ce5 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/runtime-performance/skipping-subtrees.md b/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md index 326d6e2496..2be97dc837 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.en.md b/adev-ja/src/content/best-practices/style-guide.en.md index 5cffdd32a5..a43a95f981 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/best-practices/style-guide.md b/adev-ja/src/content/best-practices/style-guide.md index 71379d4ff3..db51497367 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.en.md b/adev-ja/src/content/guide/aria/combobox.en.md index 71390217ca..38681f5d81 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/combobox.md b/adev-ja/src/content/guide/aria/combobox.md index 2e4640ec25..ec81b2ee04 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.en.md b/adev-ja/src/content/guide/aria/grid.en.md index ee511b3cc4..2b162aee15 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/grid.md b/adev-ja/src/content/guide/aria/grid.md index b19d462344..88aa28ebf5 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.en.md b/adev-ja/src/content/guide/aria/listbox.en.md index a1863dc151..d7a753a2d9 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/listbox.md b/adev-ja/src/content/guide/aria/listbox.md index 3696517f80..e16c3ec507 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 diff --git a/adev-ja/src/content/guide/aria/overview.en.md b/adev-ja/src/content/guide/aria/overview.en.md index 5b3808324f..9536e598e9 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/components/anatomy-of-components.en.md b/adev-ja/src/content/guide/components/anatomy-of-components.en.md index 5a301b26aa..924843ad34 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 eb9597a548..8e28dda770 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 efa351cabf..3fe55711f9 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 91c0900a00..1e84cc6cc2 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 075d2c738a..de451090de 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 4dfb5cff18..283d7d2a88 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 b473b4d14a..8539c7f18c 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 bb06b4479d..269d1498e1 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 be707bdbec..ad82aa290e 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 9eead5b424..647babbb70 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 64cd1dabd7..835aabaf78 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 8db1f34724..33676b5e10 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 73102a101f..924c6e6513 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 9c80e94782..005d9a6af2 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 63ba327a94..ec577af52b 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 9f9d45e773..f4cd0399a5 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) - フォームモデルの作成と更新 - - + + + + + + + diff --git a/adev-ja/src/content/guide/http/interceptors.en.md b/adev-ja/src/content/guide/http/interceptors.en.md index 5f0d7953cd..7b43b3e88e 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/http/interceptors.md b/adev-ja/src/content/guide/http/interceptors.md index 0f33e6d59e..2fab80bf52 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/i18n/format-data-locale.md b/adev-ja/src/content/guide/i18n/format-data-locale.md index 2e70eb9c70..8f90ef869f 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 5735ae5ed7..07308749ed 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/guide/routing/define-routes.en.md b/adev-ja/src/content/guide/routing/define-routes.en.md index a06ba21fd6..1570aeb1fc 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/define-routes.md b/adev-ja/src/content/guide/routing/define-routes.md index c3a85afdc6..205820e646 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.en.md b/adev-ja/src/content/guide/routing/lifecycle-and-events.en.md index c0b507f515..1d998ac28b 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/lifecycle-and-events.md b/adev-ja/src/content/guide/routing/lifecycle-and-events.md index b09d50b026..ad96d693eb 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/route-guards.en.md b/adev-ja/src/content/guide/routing/route-guards.en.md index 774e5f9129..01d58af072 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/route-guards.md b/adev-ja/src/content/guide/routing/route-guards.md index 4b849490a0..c4d690202c 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/routing/show-routes-with-outlets.en.md b/adev-ja/src/content/guide/routing/show-routes-with-outlets.en.md index 3b74649c23..8588e5996b 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/routing/show-routes-with-outlets.md b/adev-ja/src/content/guide/routing/show-routes-with-outlets.md index bbae0c52e6..15a74f9201 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} diff --git a/adev-ja/src/content/guide/signals/overview.en.md b/adev-ja/src/content/guide/signals/overview.en.md index 3fcc0e3a9d..e4e3368e52 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/signals/overview.md b/adev-ja/src/content/guide/signals/overview.md index b77270bb12..7987083f44 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/ssr.en.md b/adev-ja/src/content/guide/ssr.en.md index bd88fbd42d..9376b6790c 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/ssr.md b/adev-ja/src/content/guide/ssr.md index 954ecbc8c4..7b6fbf230b 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オブジェクトにアクセスします。 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 d63d593fa1..22895c151b 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/templates/ng-container.md b/adev-ja/src/content/guide/templates/ng-container.md index 9ee1a7ad10..2bbd857720 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

    - +     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 a1cc469c9d..48d4f27109 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 4e95d35ae5..210748d619 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 606fb5efbe..9f95197355 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 0c802ac84d..18d2f261dd 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 3c5d6b0122..6e12d348ea 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 950821aeb9..51a8b8d76e 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 b45b1c3343..61a9ecbd3a 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 8345f7c5b7..75bd044cec 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 c74dae0f6e..82359d94cf 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 3d1faadbf9..2fd046c055 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 3a1593c7cb..6588e1b93b 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/reference/extended-diagnostics/NG8101.md b/adev-ja/src/content/reference/extended-diagnostics/NG8101.md index af36e4e0a0..43799f403f 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 3a774ad6dd..15133eb4a4 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 b5c26e8f37..5c7d80c2d1 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 00c34bba29..4910b7834d 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 1302d1ec99..6a623d99ce 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 6ed6701c86..c29349c95e 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 c1f58ec8a0..2e54c0ddd9 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 7e1bd1c9c7..c74e91ea42 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 75144b747d..a4310fcb06 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 4c9231ff7f..5664ec1734 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 0ecf62d6ea..db38695cf5 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 357b2a9cbe..58dd687152 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 026e27d434..4a6b17f668 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 255a5d37f2..b65f724333 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 c92d329291..34e5b44f9d 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 df500eb606..075db95e2f 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 31d65bf04d..8b17b697b8 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 4980bf7d8c..006edcd4b2 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 349f42c4fe..9afa8fe448 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 b0e5efdb66..d4433aebb2 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: 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 f67cf24b79..52178220a2 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 fc0a174101..e80d301fc7 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 6c085fe927..d93a5b4b55 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 3009baa314..064e0d71f7 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 861a4f25ba..92519ddbe3 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 4d4032dff7..523135ebb4 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 e58201ad60..bef019e6bc 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 c8ac0f1f84..757efa1c52 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 067b7482cf..418f478b5d 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 0fa8efc709..6d3a1fe9b0 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 88aafe5cde..cda89cf016 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 9ad79e7c11..e3692f3a04 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 7d784318c7..e23edfce8b 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 07cfe9e69a..e60c079ff2 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 100ffbf8db..10a84733a2 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 8d207f7c75..2e3616923c 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 4d668d26af..bf9b5724be 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 57ca07d765..c66230b452 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 fd72fb0a23..e4d4670feb 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 a1ba9dfd2c..f36da4ae02 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 78e13a05e5..a27bbb4233 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 c9ee886097..a099142263 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 15cc226833..7dcb21eeba 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';

    - +
    `, diff --git a/origin b/origin index 51ebe9a4fc..29223c440f 160000 --- a/origin +++ b/origin @@ -1 +1 @@ -Subproject commit 51ebe9a4fcc158e11acc9a5ce25746b70a505b96 +Subproject commit 29223c440fcd313066e62332e855ee7ec1189713