diff --git a/adev-ja/src/app/routing/sub-navigation-data.en.ts b/adev-ja/src/app/routing/sub-navigation-data.en.ts index b472670444..a859ab2e1a 100644 --- a/adev-ja/src/app/routing/sub-navigation-data.en.ts +++ b/adev-ja/src/app/routing/sub-navigation-data.en.ts @@ -960,6 +960,11 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [ path: 'tools/devtools/profiler', contentPath: 'tools/devtools/profiler', }, + { + label: 'Injectors', + path: 'tools/devtools/injectors', + contentPath: 'tools/devtools/injectors', + }, // TODO: create those guides // The signal debugging docs should also be added to the signal section // { diff --git a/adev-ja/src/app/routing/sub-navigation-data.ts b/adev-ja/src/app/routing/sub-navigation-data.ts index f08a7ea773..0723dcb883 100644 --- a/adev-ja/src/app/routing/sub-navigation-data.ts +++ b/adev-ja/src/app/routing/sub-navigation-data.ts @@ -960,6 +960,11 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [ path: 'tools/devtools/profiler', contentPath: 'tools/devtools/profiler', }, + { + label: 'インジェクター', + path: 'tools/devtools/injectors', + contentPath: 'tools/devtools/injectors', + }, // TODO: create those guides // The signal debugging docs should also be added to the signal section // { diff --git a/adev-ja/src/content/best-practices/a11y.en.md b/adev-ja/src/content/best-practices/a11y.en.md index bb51ce5c35..9fb674e44a 100644 --- a/adev-ja/src/content/best-practices/a11y.en.md +++ b/adev-ja/src/content/best-practices/a11y.en.md @@ -19,15 +19,15 @@ Use attribute binding template syntax to control the values of accessibility-rel When binding to ARIA attributes in Angular, you can use them directly like any other HTML attribute. - +```html - +``` Static ARIA attributes work as regular HTML attributes. - +```html - +``` HELPFUL: By convention, HTML attributes use lowercase names \(`tabindex`\), while properties use camelCase names \(`tabIndex`\). diff --git a/adev-ja/src/content/best-practices/a11y.md b/adev-ja/src/content/best-practices/a11y.md index b7a8a8ced6..b1172870a3 100644 --- a/adev-ja/src/content/best-practices/a11y.md +++ b/adev-ja/src/content/best-practices/a11y.md @@ -19,15 +19,15 @@ AngularでARIA属性にバインドする場合、他のHTML属性と同様に直接使用できます。 - +```html - +``` 静的ARIA属性は通常のHTML属性として機能します。 - +```html - +``` HELPFUL: 慣習的に、HTML属性は小文字の名前を使用します (`tabindex`)、一方プロパティはcamelCaseの名前を使用します (`tabIndex`)。 diff --git a/adev-ja/src/content/ecosystem/rxjs-interop/take-until-destroyed.md b/adev-ja/src/content/ecosystem/rxjs-interop/take-until-destroyed.md index 17dc37a821..19e8a4294b 100644 --- a/adev-ja/src/content/ecosystem/rxjs-interop/take-until-destroyed.md +++ b/adev-ja/src/content/ecosystem/rxjs-interop/take-until-destroyed.md @@ -25,7 +25,7 @@ export class UserProfile { } ``` -The `takeUntilDestroyed` operator accepts a single optional [`DestroyRef`](https://angular.dev/api/core/DestroyRef) argument. The operator uses `DestroyRef` to know when the component or directive has been destroyed. You can omit this argument when calling `takeUntilDestroyed` in an [injection context](https://angular.dev/guide/di/dependency-injection-context), typically the constructor of a component or directive. Always provide a `DestroyRef` if your code may call `takeUntilDestroyed` outside of an injection context. +The `takeUntilDestroyed` operator accepts a single optional [`DestroyRef`](/api/core/DestroyRef) argument. The operator uses `DestroyRef` to know when the component or directive has been destroyed. You can omit this argument when calling `takeUntilDestroyed` in an [injection context](/guide/di/dependency-injection-context), typically the constructor of a component or directive. Always provide a `DestroyRef` if your code may call `takeUntilDestroyed` outside of an injection context. ```typescript @Component(/* ... */) diff --git a/adev-ja/src/content/guide/aria/accordion.en.md b/adev-ja/src/content/guide/aria/accordion.en.md index 990da2c19c..2588aeeb47 100644 --- a/adev-ja/src/content/guide/aria/accordion.en.md +++ b/adev-ja/src/content/guide/aria/accordion.en.md @@ -10,10 +10,10 @@ An accordion organizes related content into expandable and collapsible sections, reducing page scrolling and helping users focus on relevant information. Each section has a trigger button and a content panel. Clicking a trigger toggles the visibility of its associated panel. - - - - + + + + ## Usage @@ -52,24 +52,24 @@ Set `[multiExpandable]="false"` to allow only one panel to be open at a time. Op - - - - + + + + - - - - + + + + - - - - + + + + @@ -82,24 +82,24 @@ Set `[multiExpandable]="true"` to allow multiple panels to be open simultaneousl - - - - + + + + - - - - + + + + - - - - + + + + @@ -114,24 +114,24 @@ Disable specific triggers using the `disabled` input. Control how disabled items - - - - + + + + - - - - + + + + - - - - + + + + diff --git a/adev-ja/src/content/guide/aria/accordion.md b/adev-ja/src/content/guide/aria/accordion.md index 269530307f..8c7ec06118 100644 --- a/adev-ja/src/content/guide/aria/accordion.md +++ b/adev-ja/src/content/guide/aria/accordion.md @@ -10,10 +10,10 @@ アコーディオンは、関連するコンテンツを展開・折りたたみ可能なセクションに整理し、ページのスクロールを減らし、ユーザーが関連情報に集中するのを助けます。各セクションには、トリガーボタンとコンテンツパネルがあります。トリガーをクリックすると、関連するパネルの表示/非表示が切り替わります。 - - - - + + + + ## 使い方 {#usage} @@ -52,24 +52,24 @@ - - - - + + + + - - - - + + + + - - - - + + + + @@ -82,24 +82,24 @@ - - - - + + + + - - - - + + + + - - - - + + + + @@ -114,24 +114,24 @@ NOTE: `multiExpandable`入力はデフォルトで`true`です。単一展開の - - - - + + + + - - - - + + + + - - - - + + + + diff --git a/adev-ja/src/content/guide/aria/autocomplete.en.md b/adev-ja/src/content/guide/aria/autocomplete.en.md index f1fd46946e..73f2ab7a44 100644 --- a/adev-ja/src/content/guide/aria/autocomplete.en.md +++ b/adev-ja/src/content/guide/aria/autocomplete.en.md @@ -7,26 +7,26 @@ An accessible input field that filters and suggests options as users type, helpi - - - - + + + + - - - - + + + + - - - - + + + + @@ -65,26 +65,26 @@ Users typing partial text expect immediate confirmation that their input matches - - - - + + + + - - - - + + + + - - - - + + + + @@ -95,26 +95,26 @@ Manual selection mode keeps the typed text unchanged while users navigate the su - - - - + + + + - - - - + + + + - - - - + + + + @@ -125,26 +125,26 @@ Highlight mode allows the user to navigate options with arrow keys without chang - - - - + + + + - - - - + + + + - - - - + + + + diff --git a/adev-ja/src/content/guide/aria/autocomplete.md b/adev-ja/src/content/guide/aria/autocomplete.md index 70661aeffe..79d1b8d688 100644 --- a/adev-ja/src/content/guide/aria/autocomplete.md +++ b/adev-ja/src/content/guide/aria/autocomplete.md @@ -7,26 +7,26 @@ - - - - + + + + - - - - + + + + - - - - + + + + @@ -65,26 +65,26 @@ Angularのオートコンプリートは、以下の機能を備えた、完全 - - - - + + + + - - - - + + + + - - - - + + + + @@ -95,26 +95,26 @@ Angularのオートコンプリートは、以下の機能を備えた、完全 - - - - + + + + - - - - + + + + - - - - + + + + @@ -125,26 +125,26 @@ Angularのオートコンプリートは、以下の機能を備えた、完全 - - - - + + + + - - - - + + + + - - - - + + + + diff --git a/adev-ja/src/content/guide/aria/combobox.en.md b/adev-ja/src/content/guide/aria/combobox.en.md index a743fd2a42..71390217ca 100644 --- a/adev-ja/src/content/guide/aria/combobox.en.md +++ b/adev-ja/src/content/guide/aria/combobox.en.md @@ -12,26 +12,26 @@ A directive that coordinates a text input with a popup, providing the primitive - - - - + + + + - - - - + + + + - - - - + + + + @@ -72,26 +72,26 @@ An accessible input field that filters and suggests options as users type, helpi - - - - + + + + - - - - + + + + - - - - + + + + diff --git a/adev-ja/src/content/guide/aria/combobox.md b/adev-ja/src/content/guide/aria/combobox.md index 317130f0a4..2e4640ec25 100644 --- a/adev-ja/src/content/guide/aria/combobox.md +++ b/adev-ja/src/content/guide/aria/combobox.md @@ -12,26 +12,26 @@ - - - - + + + + - - - - + + + + - - - - + + + + @@ -72,26 +72,26 @@ Angularのコンボボックスは、完全にアクセシブルな入力とポ - - - - + + + + - - - - + + + + - - - - + + + + diff --git a/adev-ja/src/content/guide/aria/grid.en.md b/adev-ja/src/content/guide/aria/grid.en.md index e690118ae9..ee511b3cc4 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 @@ -53,17 +53,17 @@ Use a grid for interactive tables where users need to navigate between cells usi - - - - + + + + - - - - + + + + @@ -76,24 +76,24 @@ Calendars are a common use case for grids. This example shows a month view where - - - - + + + + - - - - + + + + - - - - + + + + @@ -106,24 +106,24 @@ Use a layout grid to group interactive elements and reduce tab stops. This examp - - - - + + + + - - - - + + + + - - - - + + + + diff --git a/adev-ja/src/content/guide/aria/grid.md b/adev-ja/src/content/guide/aria/grid.md index a7a3d15b8d..b19d462344 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} @@ -53,17 +53,17 @@ - - - - + + + + - - - - + + + + @@ -76,24 +76,24 @@ - - - - + + + + - - - - + + + + - - - - + + + + @@ -106,24 +106,24 @@ - - - - + + + + - - - - + + + + - - - - + + + + diff --git a/adev-ja/src/content/guide/aria/toolbar.en.md b/adev-ja/src/content/guide/aria/toolbar.en.md index 5e187194bc..3f204d5cc0 100644 --- a/adev-ja/src/content/guide/aria/toolbar.en.md +++ b/adev-ja/src/content/guide/aria/toolbar.en.md @@ -133,7 +133,7 @@ In the examples above, the alignment buttons are wrapped in `ngToolbarWidgetGrou The `multi` input controls whether multiple widgets within a group can be selected simultaneously: - +```html {highlight: [15]}
Italic
- +``` ### Disabled widgets diff --git a/adev-ja/src/content/guide/aria/toolbar.md b/adev-ja/src/content/guide/aria/toolbar.md index f1ee27aaa5..280ca3a99b 100644 --- a/adev-ja/src/content/guide/aria/toolbar.md +++ b/adev-ja/src/content/guide/aria/toolbar.md @@ -133,7 +133,7 @@ Angularのツールバーは、以下の機能を備えた完全にアクセシ `multi`入力は、グループ内の複数のウィジェットを同時に選択できるかどうかを制御します: - +```html {highlight: [15]}
Italic
- +``` ### 無効化されたウィジェット {#disabled-widgets} diff --git a/adev-ja/src/content/guide/aria/tree.en.md b/adev-ja/src/content/guide/aria/tree.en.md index 4119a887d4..712ab9cc4d 100644 --- a/adev-ja/src/content/guide/aria/tree.en.md +++ b/adev-ja/src/content/guide/aria/tree.en.md @@ -10,10 +10,10 @@ A tree displays hierarchical data where items can expand to reveal children or collapse to hide them. Users navigate with arrow keys, expand and collapse nodes, and optionally select items for navigation or data selection scenarios. - - - - + + + + ## Usage @@ -55,10 +55,10 @@ Use a tree for navigation where clicking items triggers actions rather than sele - - - - + + + + @@ -71,17 +71,17 @@ Enable single selection for scenarios where users choose one item from the tree. - - - - + + + + - - - - + + + + @@ -94,17 +94,17 @@ Allow users to select multiple items from the tree. - - - - + + + + - - - - + + + + @@ -117,17 +117,17 @@ When selection follows focus, the focused item is automatically selected. This s - - - - + + + + - - - - + + + + @@ -140,17 +140,17 @@ Disable specific tree nodes to prevent interaction. Control whether disabled ite - - - - + + + + - - - - + + + + diff --git a/adev-ja/src/content/guide/aria/tree.md b/adev-ja/src/content/guide/aria/tree.md index 20aa7544bf..32e8f9ed57 100644 --- a/adev-ja/src/content/guide/aria/tree.md +++ b/adev-ja/src/content/guide/aria/tree.md @@ -10,10 +10,10 @@ ツリーは、アイテムを展開して子を表示したり、折りたたんで非表示にしたりできる階層データを表示します。ユーザーは矢印キーで移動し、ノードを展開・折りたたみ、ナビゲーションやデータ選択のシナリオのためにアイテムを選択できます。 - - - - + + + + ## 使用法 {#usage} @@ -55,10 +55,10 @@ - - - - + + + + @@ -71,17 +71,17 @@ - - - - + + + + - - - - + + + + @@ -94,17 +94,17 @@ - - - - + + + + - - - - + + + + @@ -117,17 +117,17 @@ - - - - + + + + - - - - + + + + @@ -140,17 +140,17 @@ - - - - + + + + - - - - + + + + diff --git a/adev-ja/src/content/guide/components/inputs.en.md b/adev-ja/src/content/guide/components/inputs.en.md index 3f1df7bd43..73651d7573 100644 --- a/adev-ja/src/content/guide/components/inputs.en.md +++ b/adev-ja/src/content/guide/components/inputs.en.md @@ -10,7 +10,7 @@ When you use a component, you commonly want to pass some data to it. A component ```ts {highlight:[5]} import {Component, input} from '@angular/core'; -@Component({/_..._/}) +@Component({/*...*/}) export class CustomSlider { // Declare an input named 'value' with a default value of zero. value = input(0); @@ -60,7 +60,7 @@ The `input` function returns an `InputSignal`. You can read the value by calling ```ts {highlight:[5]} import {Component, input, computed} from '@angular/core'; -@Component({/_..._/}) +@Component({/*...*/}) export class CustomSlider { // Declare an input named 'value' with a default value of zero. value = input(0); @@ -146,7 +146,7 @@ Angular includes two built-in transform functions for the two most common scenar ```ts import {Component, input, booleanAttribute, numberAttribute} from '@angular/core'; -@Component({/_..._/}) +@Component({/*...*/}) export class CustomSlider { disabled = input(false, {transform: booleanAttribute}); value = input(0, {transform: numberAttribute}); @@ -220,7 +220,7 @@ See [Two-way binding](guide/templates/two-way-binding) for more details on two-w You can bind a plain JavaScript property to a model input. -```ts +```angular-ts @Component({ /* ... */ // `value` is a model input. diff --git a/adev-ja/src/content/guide/components/inputs.md b/adev-ja/src/content/guide/components/inputs.md index 72d439abd5..5a995abc4a 100644 --- a/adev-ja/src/content/guide/components/inputs.md +++ b/adev-ja/src/content/guide/components/inputs.md @@ -10,7 +10,7 @@ TIP: 他のウェブフレームワークに精通している場合は、入力 ```ts {highlight:[5]} import {Component, input} from '@angular/core'; -@Component({/_..._/}) +@Component({/*...*/}) export class CustomSlider { // Declare an input named 'value' with a default value of zero. value = input(0); @@ -60,7 +60,7 @@ export class CustomSlider { ```ts {highlight:[5]} import {Component, input, computed} from '@angular/core'; -@Component({/_..._/}) +@Component({/*...*/}) export class CustomSlider { // Declare an input named 'value' with a default value of zero. value = input(0); @@ -146,7 +146,7 @@ Angularには、最も一般的な2つのシナリオのための2つの組み ```ts import {Component, input, booleanAttribute, numberAttribute} from '@angular/core'; -@Component({/_..._/}) +@Component({/*...*/}) export class CustomSlider { disabled = input(false, {transform: booleanAttribute}); value = input(0, {transform: numberAttribute}); @@ -220,7 +220,7 @@ export class MediaControls { プレーンなJavaScriptプロパティをモデル入力にバインドできます。 -```ts +```angular-ts @Component({ /* ... */ // `value`はモデル入力です。 diff --git a/adev-ja/src/content/guide/components/lifecycle.en.md b/adev-ja/src/content/guide/components/lifecycle.en.md index 47b6a9ea2c..6f07542753 100644 --- a/adev-ja/src/content/guide/components/lifecycle.en.md +++ b/adev-ja/src/content/guide/components/lifecycle.en.md @@ -292,8 +292,8 @@ There are four phases, run in the following order: | Phase | Description | | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `earlyRead` | Use this phase to read any layout-affecting DOM properties and styles that are strictly necessary for subsequent calculation. Avoid this phase if possible, preferring the `write` and `read` phases. | -| `mixedReadWrite` | Default phase. Use for any operations need to both read and write layout-affecting properties and styles. Avoid this phase if possible, preferring the explicit `write` and `read` phases. | | `write` | Use this phase to write layout-affecting DOM properties and styles. | +| `mixedReadWrite` | Default phase. Use for any operations need to both read and write layout-affecting properties and styles. Avoid this phase if possible, preferring the explicit `write` and `read` phases. | | `read` | Use this phase to read any layout-affecting DOM properties. | ## Lifecycle interfaces diff --git a/adev-ja/src/content/guide/components/lifecycle.md b/adev-ja/src/content/guide/components/lifecycle.md index f6229665e5..4a0cd077c1 100644 --- a/adev-ja/src/content/guide/components/lifecycle.md +++ b/adev-ja/src/content/guide/components/lifecycle.md @@ -292,8 +292,8 @@ export class UserProfile { | フェーズ | 説明 | | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `earlyRead` | このフェーズを使用して、その後の計算に厳密に必要な、レイアウトに影響を与えるDOMプロパティとスタイルを読み取ります。可能な限り、このフェーズを避け、`write` フェーズと `read` フェーズを優先します。 | -| `mixedReadWrite` | デフォルトのフェーズ。レイアウトに影響を与えるプロパティとスタイルを読み書きする必要がある操作に使用します。可能な限り、このフェーズを避け、明示的な `write` フェーズと `read` フェーズを優先します。 | | `write` | このフェーズを使用して、レイアウトに影響を与えるDOMプロパティとスタイルを書き込みます。 | +| `mixedReadWrite` | デフォルトのフェーズ。レイアウトに影響を与えるプロパティとスタイルを読み書きする必要がある操作に使用します。可能な限り、このフェーズを避け、明示的な `write` フェーズと `read` フェーズを優先します。 | | `read` | このフェーズを使用して、レイアウトに影響を与えるDOMプロパティを読み取ります。 | ## ライフサイクルインターフェース diff --git a/adev-ja/src/content/guide/di/lightweight-injection-tokens.en.md b/adev-ja/src/content/guide/di/lightweight-injection-tokens.en.md index 2475a4b99a..bb28b41ab9 100644 --- a/adev-ja/src/content/guide/di/lightweight-injection-tokens.en.md +++ b/adev-ja/src/content/guide/di/lightweight-injection-tokens.en.md @@ -22,13 +22,12 @@ To prevent the retention of unused components, your library should use the light To better explain the condition under which token retention occurs, consider a library that provides a library-card component. This component contains a body and can contain an optional header: - +```angular-html ; …; ; - - +``` In a likely implementation, the `` component uses `@ContentChild()` or `@ContentChildren()` to get `` and ``, as in the following: diff --git a/adev-ja/src/content/guide/di/lightweight-injection-tokens.md b/adev-ja/src/content/guide/di/lightweight-injection-tokens.md index e06c77ec37..94aba8b184 100644 --- a/adev-ja/src/content/guide/di/lightweight-injection-tokens.md +++ b/adev-ja/src/content/guide/di/lightweight-injection-tokens.md @@ -22,13 +22,12 @@ Angularがインジェクショントークンを格納する方法により、 トークン保持が発生する状況をより明確に説明するために、ライブラリカードコンポーネントを提供するライブラリを検討してください。 このコンポーネントには本体が含まれており、オプションでヘッダーを含めることができます。 - +```angular-html ; …; ; - - +``` 一般的な実装では、 `` コンポーネントは、次の例のように `@ContentChild()` または `@ContentChildren()` を使用して `` と `` を取得します。 diff --git a/adev-ja/src/content/guide/drag-drop.md b/adev-ja/src/content/guide/drag-drop.md index 48a902b0ab..9962c92e9e 100644 --- a/adev-ja/src/content/guide/drag-drop.md +++ b/adev-ja/src/content/guide/drag-drop.md @@ -63,7 +63,7 @@ The drag and drop directives don't update your data model. To update the data mo -You can use the `CDK_DROP_LIST` injection token that can be used to reference instances of `cdkDropList`. For more information see the [dependency injection guide](https://angular.dev/guide/di) and the [drop list injection token API](api/cdk/drag-drop/CDK_DROP_LIST). +You can use the `CDK_DROP_LIST` injection token that can be used to reference instances of `cdkDropList`. For more information see the [dependency injection guide](/guide/di) and the [drop list injection token API](api/cdk/drag-drop/CDK_DROP_LIST). ## Transfer draggable elements between lists @@ -74,7 +74,7 @@ The `cdkDropList` directive supports transferring draggable elements between con The `cdkDropListConnectedTo` directive works both with a direct reference to another `cdkDropList` or by referencing the id of another drop container. - +```html
@@ -82,7 +82,7 @@ The `cdkDropListConnectedTo` directive works both with a direct reference to ano
- +``` @@ -92,14 +92,14 @@ The `cdkDropListConnectedTo` directive works both with a direct reference to ano Use the `cdkDropListGroup` directive if you have an unknown number of connected drop lists to set up the connection automatically. Any new `cdkDropList` that is added under a group automatically connects to all other lists. - +```html
@for (list of lists; track list) {
}
- +``` @@ -107,7 +107,7 @@ Use the `cdkDropListGroup` directive if you have an unknown number of connected -You can use the `CDK_DROP_LIST_GROUP` injection token that can be used to reference instances of `cdkDropListGroup`. For more information see the [dependency injection guide](https://angular.dev/guide/di) and the [drop list group injection token API](api/cdk/drag-drop/CDK_DROP_LIST_GROUP). +You can use the `CDK_DROP_LIST_GROUP` injection token that can be used to reference instances of `cdkDropListGroup`. For more information see the [dependency injection guide](/guide/di) and the [drop list group injection token API](api/cdk/drag-drop/CDK_DROP_LIST_GROUP). ### Selective dragging @@ -123,7 +123,7 @@ By default, a user can move `cdkDrag` elements from one container into another c You can associate some arbitrary data with both `cdkDrag` and `cdkDropList` by setting `cdkDragData` or `cdkDropListData`, respectively. You can bind to the events fired from both directives that will include this data, allowing you to easily identify the origin of the drag or drop interaction. - +```html @for (list of lists; track list) {
@for (item of list; track item) { @@ -131,7 +131,7 @@ You can associate some arbitrary data with both `cdkDrag` and `cdkDropList` by s }
} - +``` ## Dragging customizations @@ -145,7 +145,7 @@ By default, the user can drag the entire `cdkDrag` element to move it around. To -You can use the `CDK_DRAG_HANDLE` injection token that can be used to reference instances of `cdkDragHandle`. For more information see the [dependency injection guide](https://angular.dev/guide/di) and the [drag handle injection token API](api/cdk/drag-drop/CDK_DRAG_HANDLE). +You can use the `CDK_DRAG_HANDLE` injection token that can be used to reference instances of `cdkDragHandle`. For more information see the [dependency injection guide](/guide/di) and the [drag handle injection token API](api/cdk/drag-drop/CDK_DRAG_HANDLE). ### Customize drag preview @@ -161,7 +161,7 @@ The cloned element removes its id attribute in order to avoid having multiple el -You can use the `CDK_DRAG_PREVIEW` injection token that can be used to reference instances of `cdkDragPreview`. For more information see the [dependency injection guide](https://angular.dev/guide/di) and the [drag preview injection token API](api/cdk/drag-drop/CDK_DRAG_PREVIEW). +You can use the `CDK_DRAG_PREVIEW` injection token that can be used to reference instances of `cdkDragPreview`. For more information see the [dependency injection guide](/guide/di) and the [drag preview injection token API](api/cdk/drag-drop/CDK_DRAG_PREVIEW). ### Customize drag insertion point @@ -175,7 +175,7 @@ You can change where Angular inserts the preview using the `cdkDragPreviewContai | `parent` | Angular inserts the preview inside the parent of the element that is being dragged. | Preview inherits the same styles as the dragged element. | Preview may be clipped by `overflow: hidden` or be placed under other elements due to `z-index`. Furthermore, it can affect `:nth-child` selectors and some flex layouts. | | `ElementRef` or `HTMLElement` | Angular inserts the preview into the specified element. | Preview inherits styles from the specified container element. | Preview may be clipped by `overflow: hidden` or be placed under other elements due to `z-index`. Furthermore, it can affect `:nth-child` selectors and some flex layouts. | -Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update `previewContainer` within the config if the value is `global` or `parent`. For more information see the [dependency injection guide](https://angular.dev/guide/di), [drag config injection token API](api/cdk/drag-drop/CDK_DRAG_CONFIG), and the [drag drop config API](api/cdk/drag-drop/DragDropConfig). +Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update `previewContainer` within the config if the value is `global` or `parent`. For more information see the [dependency injection guide](/guide/di), [drag config injection token API](api/cdk/drag-drop/CDK_DRAG_CONFIG), and the [drag drop config API](api/cdk/drag-drop/DragDropConfig). ### Customize drag placeholder @@ -187,7 +187,7 @@ While a `cdkDrag` element is being dragged, the directive creates a placeholder -You can use the `CDK_DRAG_PLACEHOLDER` injection token that can be used to reference instances of `cdkDragPlaceholder`. For more information see the [dependency injection guide](https://angular.dev/guide/di) and the [drag placeholder injection token API](api/cdk/drag-drop/CDK_DRAG_PLACEHOLDER). +You can use the `CDK_DRAG_PLACEHOLDER` injection token that can be used to reference instances of `cdkDragPlaceholder`. For more information see the [dependency injection guide](/guide/di) and the [drag placeholder injection token API](api/cdk/drag-drop/CDK_DRAG_PLACEHOLDER). ### Customize drag root element @@ -201,7 +201,7 @@ The attribute accepts a selector and looks up the DOM until it finds an element -Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update `rootElementSelector` within the config. For more information see the [dependency injection guide](https://angular.dev/guide/di), [drag config injection token API](api/cdk/drag-drop/CDK_DRAG_CONFIG), and the [drag drop config API](api/cdk/drag-drop/DragDropConfig). +Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update `rootElementSelector` within the config. For more information see the [dependency injection guide](/guide/di), [drag config injection token API](api/cdk/drag-drop/CDK_DRAG_CONFIG), and the [drag drop config API](api/cdk/drag-drop/DragDropConfig). ### Set DOM position of a draggable element @@ -223,7 +223,7 @@ To stop the user from being able to drag a `cdkDrag` element outside of another -Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update boundaryElement within the config. For more information see the [dependency injection guide](https://angular.dev/guide/di), [drag config injection token API](api/cdk/drag-drop/CDK_DRAG_CONFIG), and the [drag drop config API](api/cdk/drag-drop/DragDropConfig). +Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update boundaryElement within the config. For more information see the [dependency injection guide](/guide/di), [drag config injection token API](api/cdk/drag-drop/CDK_DRAG_CONFIG), and the [drag drop config API](api/cdk/drag-drop/DragDropConfig). ### Restrict movement along an axis @@ -235,7 +235,7 @@ By default, `cdkDrag` allows free movement in all directions. To restrict draggi -Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update `lockAxis` within the config. For more information see the [dependency injection guide](https://angular.dev/guide/di), [drag config injection token API](api/cdk/drag-drop/CDK_DRAG_CONFIG), and the [drag drop config API](api/cdk/drag-drop/DragDropConfig). +Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update `lockAxis` within the config. For more information see the [dependency injection guide](/guide/di), [drag config injection token API](api/cdk/drag-drop/CDK_DRAG_CONFIG), and the [drag drop config API](api/cdk/drag-drop/DragDropConfig). ### Delay dragging @@ -249,7 +249,7 @@ You can delay the dragging sequence using the `cdkDragStartDelay` input. The inp -Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update dragStartDelay within the config. For more information see the [dependency injection guide](https://angular.dev/guide/di), [drag config injection token API](api/cdk/drag-drop/CDK_DRAG_CONFIG), and the [drag drop config API](api/cdk/drag-drop/DragDropConfig). +Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update dragStartDelay within the config. For more information see the [dependency injection guide](/guide/di), [drag config injection token API](api/cdk/drag-drop/CDK_DRAG_CONFIG), and the [drag drop config API](api/cdk/drag-drop/DragDropConfig). ### Disable dragging @@ -261,7 +261,7 @@ If you want to disable dragging for a particular drag item, set the `cdkDragDisa -Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update `draggingDisabled` within the config. For more information see the [dependency injection guide](https://angular.dev/guide/di), [drag config injection token API](api/cdk/drag-drop/CDK_DRAG_CONFIG), and the [drag drop config API](api/cdk/drag-drop/DragDropConfig). +Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update `draggingDisabled` within the config. For more information see the [dependency injection guide](/guide/di), [drag config injection token API](api/cdk/drag-drop/CDK_DRAG_CONFIG), and the [drag drop config API](api/cdk/drag-drop/DragDropConfig). ## Sorting customizations @@ -275,7 +275,7 @@ By default, the `cdkDropList` directive assumes lists are vertical. This can be -Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update `listOrientation` within the config. For more information see the [dependency injection guide](https://angular.dev/guide/di), [drag config injection token API](api/cdk/drag-drop/CDK_DRAG_CONFIG), and the [drag drop config API](api/cdk/drag-drop/DragDropConfig). +Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update `listOrientation` within the config. For more information see the [dependency injection guide](/guide/di), [drag config injection token API](api/cdk/drag-drop/CDK_DRAG_CONFIG), and the [drag drop config API](api/cdk/drag-drop/DragDropConfig). ### List wrapping @@ -309,7 +309,7 @@ There are cases where draggable elements can be dragged out of one `cdkDropList` -Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update sortingDisabled within the config. For more information see the [dependency injection guide](https://angular.dev/guide/di), [drag config injection token API](api/cdk/drag-drop/CDK_DRAG_CONFIG), and the [drag drop config API](api/cdk/drag-drop/DragDropConfig). +Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update sortingDisabled within the config. For more information see the [dependency injection guide](/guide/di), [drag config injection token API](api/cdk/drag-drop/CDK_DRAG_CONFIG), and the [drag drop config API](api/cdk/drag-drop/DragDropConfig). ### Copying items between lists diff --git a/adev-ja/src/content/guide/forms/template-driven-forms.en.md b/adev-ja/src/content/guide/forms/template-driven-forms.en.md index e1fbd215b1..9f15b1a68f 100644 --- a/adev-ja/src/content/guide/forms/template-driven-forms.en.md +++ b/adev-ja/src/content/guide/forms/template-driven-forms.en.md @@ -196,11 +196,10 @@ To see how the classes are added and removed by the framework, open the browser' 1. When you first bring it up, the classes indicate that it has a valid value, that the value has not been changed since initialization or reset, and that the control has not been visited since initialization or reset. - + ```html ; - - + ``` 1. Take the following actions on the **Name** `` box, and observe which classes appear. - Look but don't touch. diff --git a/adev-ja/src/content/guide/forms/template-driven-forms.md b/adev-ja/src/content/guide/forms/template-driven-forms.md index 103ed44090..25ed0a1974 100644 --- a/adev-ja/src/content/guide/forms/template-driven-forms.md +++ b/adev-ja/src/content/guide/forms/template-driven-forms.md @@ -72,7 +72,7 @@ Angularテンプレートを使用して、ログインフォーム、コンタ このデモでは、`model`と`skills`のダミーデータを使用しています。 - 実際のアプリでは、データサービスを注入して実際のデータを取得して保存するか、これらのプロパティを入力と出力として公開します。 + 実際のアプリケーションでは、データサービスを注入して実際のデータを取得して保存するか、これらのプロパティを入力と出力として公開します。 1. コンポーネントは、`FormsModule`モジュールをインポートすることでフォーム機能を有効にします。 @@ -196,11 +196,10 @@ Angularは、`form`要素に`ng-submitted`クラスを適用しますが、 1. 最初に表示すると、クラスは、値が有効であり、初期化またはリセット以降値が変更されていないこと、初期化またはリセット以降コントロールが訪問されていないことを示しています。 - + ```html ; - - + ``` 1. **Name** ``ボックスで次のように操作し、表示されるクラスを観察します。 - 見るだけで触れずにいます。 diff --git a/adev-ja/src/content/guide/i18n/locale-id.md b/adev-ja/src/content/guide/i18n/locale-id.md index 929df60486..34eea840a5 100644 --- a/adev-ja/src/content/guide/i18n/locale-id.md +++ b/adev-ja/src/content/guide/i18n/locale-id.md @@ -14,9 +14,9 @@ Angular uses the Unicode _locale identifier_ \(Unicode locale ID\) to find the c A locale ID specifies the language, country, and an optional code for further variants or subdivisions. A locale ID consists of the language identifier, a hyphen \(`-`\) character, and the locale extension. - +```html {language_id}-{locale_extension} - +``` HELPFUL: To accurately translate your Angular project, you must decide which languages and locales you are targeting for internationalization. diff --git a/adev-ja/src/content/guide/i18n/prepare.md b/adev-ja/src/content/guide/i18n/prepare.md index 9031c486ea..115813de89 100644 --- a/adev-ja/src/content/guide/i18n/prepare.md +++ b/adev-ja/src/content/guide/i18n/prepare.md @@ -10,9 +10,9 @@ To prepare your project for translation, complete the following actions. In a component template, the i18n metadata is the value of the `i18n` attribute. - +```html {string_to_translate} - +``` Use the `i18n` attribute to mark a static text message in your component templates for translation. Place it on every element tag that contains fixed text you want to translate. @@ -52,9 +52,9 @@ The following example shows the `` element transformed into a non- In a component template, the i18n metadata is the value of the `i18n-{attribute_name}` attribute. - +```html - +``` The attributes of HTML elements include text that should be translated along with the rest of the displayed text in the component template. @@ -63,9 +63,9 @@ Use the following syntax to assign a meaning, description, and custom ID. - +```html i18n-{attribute_name}="{meaning}|{description}@@{id}" - +``` ### `i18n-title` example @@ -128,9 +128,9 @@ return this.show ? $localize`Show Tabs` : $localize`Hide tabs`; - +```html {meaning}|{description}@@{custom_id} - +``` The following parameters provide context and additional information to reduce confusion for your translator. @@ -214,11 +214,10 @@ An ICU expression includes a component property, an ICU clause, and the case sta - +```html { component_property, icu_clause, case_statements } - - +``` The component property defines the variable. An ICU clause defines the type of conditional text. @@ -240,21 +239,19 @@ Use the `plural` clause to mark expressions that may not be meaningful if transl - +```html { component_property, plural, pluralization_categories } - - +``` After the pluralization category, enter the default text \(English\) surrounded by open curly brace \(`{`\) and close curly brace \(`}`\) characters. - +```html pluralization_category { } - - +``` The following pluralization categories are available for English and may change based on the locale. @@ -271,11 +268,10 @@ If none of the pluralization categories match, Angular uses `other` to match the - +```html other { default_quantity } - - +``` HELPFUL: For more information about pluralization categories, see [Choosing plural category names][UnicodeCldrIndexCldrSpecPluralRulesTocChoosingPluralCategoryNames] in the [CLDR - Unicode Common Locale Data Repository][UnicodeCldrMain]. @@ -299,29 +295,26 @@ If you want to display the following phrase in English, where `x` is a number. - +```html updated x minutes ago - - +``` And you also want to display the following phrases based on the cardinality of `x`. - +```html updated just now - - +``` - +```html updated one minute ago - - +``` Use HTML markup and [interpolations](guide/templates/binding#render-dynamic-text-with-text-interpolation). The following code example shows how to use the `plural` clause to express the previous three situations in a `` element. @@ -346,11 +339,10 @@ The `select` clause marks choices for alternate text based on your defined strin - +```html { component_property, select, selection_categories } - - +``` Translate all of the alternates to display alternate text based on the value of a variable. @@ -358,11 +350,10 @@ After the selection category, enter the text \(English\) surrounded by open curl - +```html selection_category { text } - - +``` Different locales have different grammatical constructions that increase the difficulty of translation. Use HTML markup. @@ -370,11 +361,10 @@ If none of the selection categories match, Angular uses `other` to match the sta - +```html other { default_value } - - +``` #### `gender` example @@ -382,29 +372,26 @@ If you want to display the following phrase in English. - +```html The author is other - - +``` And you also want to display the following phrases based on the `gender` property of the component. - +```html The author is female - - +``` - +```html The author is male - - +``` The following code example shows how to bind the `gender` property of the component and use the `select` clause to express the previous three situations in a `` element. diff --git a/adev-ja/src/content/guide/ssr.en.md b/adev-ja/src/content/guide/ssr.en.md index 81128388c5..bd88fbd42d 100644 --- a/adev-ja/src/content/guide/ssr.en.md +++ b/adev-ja/src/content/guide/ssr.en.md @@ -1,6 +1,6 @@ # Server and hybrid rendering -Angular ships all applications as client-side rendered (CSR) by default. While this approach delivers a initial payload that's lightweight, it introduces trade-offs including slower load times, degraded performance metrics, and higher resource demands since the user's device performs most of the computations. As a result, many applications achieve significant performance improvements by integrating server-side rendering (SSR) into a hybrid rendering strategy. +Angular ships all applications as client-side rendered (CSR) by default. While this approach delivers an initial payload that's lightweight, it introduces trade-offs including slower load times, degraded performance metrics, and higher resource demands since the user's device performs most of the computations. As a result, many applications achieve significant performance improvements by integrating server-side rendering (SSR) into a hybrid rendering strategy. ## What is hybrid rendering? diff --git a/adev-ja/src/content/guide/tailwind.en.md b/adev-ja/src/content/guide/tailwind.en.md index 86b9cb87a6..b0b6e85ba1 100644 --- a/adev-ja/src/content/guide/tailwind.en.md +++ b/adev-ja/src/content/guide/tailwind.en.md @@ -86,11 +86,11 @@ You can now start using Tailwind's utility classes in your component templates t For example, you can add the following to your `app.html` file: - +```html

Hello world!

- +``` ## Additional Resources diff --git a/adev-ja/src/content/guide/tailwind.md b/adev-ja/src/content/guide/tailwind.md index 1ca5de382c..879fddc693 100644 --- a/adev-ja/src/content/guide/tailwind.md +++ b/adev-ja/src/content/guide/tailwind.md @@ -86,11 +86,11 @@ SCSSを使用している場合は、`@use`を`./src/styles.scss`に追加しま たとえば、次の内容を`app.html`ファイルに追加できます: - +```html

Hello world!

- +``` ## その他のリソース {#additional-resources} diff --git a/adev-ja/src/content/reference/extended-diagnostics/NG8101.md b/adev-ja/src/content/reference/extended-diagnostics/NG8101.md index cc759d531e..af36e4e0a0 100644 --- a/adev-ja/src/content/reference/extended-diagnostics/NG8101.md +++ b/adev-ja/src/content/reference/extended-diagnostics/NG8101.md @@ -2,11 +2,10 @@ This diagnostic detects a backwards "banana-in-box" syntax for [two-way bindings](guide/templates/two-way-binding). - +``` - - +``` ## What's wrong with that? @@ -19,11 +18,10 @@ Fix the typo. As the name suggests, the banana `(` should go _inside_ the box `[]`. In this case: - +``` - - +``` ## Configuration requirements diff --git a/adev-ja/src/content/reference/extended-diagnostics/NG8104.md b/adev-ja/src/content/reference/extended-diagnostics/NG8104.md index d0d593b787..e5279497c5 100644 --- a/adev-ja/src/content/reference/extended-diagnostics/NG8104.md +++ b/adev-ja/src/content/reference/extended-diagnostics/NG8104.md @@ -3,11 +3,10 @@ This diagnostic ensures that attributes which have the "special" Angular binding prefix (`attr.`, `style.`, and `class.`) are interpreted as bindings. - +```html
- - +``` ## What's wrong with that? @@ -19,13 +18,11 @@ Instead, the intent is likely to set the `id` attribute (`
When binding to `attr.`, `class.`, or `style.`, ensure you use the Angular template binding syntax (`[]`). - - +```html
- - +``` ## Configuration requirements diff --git a/adev-ja/src/content/reference/extended-diagnostics/NG8106.md b/adev-ja/src/content/reference/extended-diagnostics/NG8106.md index dd6b653499..b2deac26bc 100644 --- a/adev-ja/src/content/reference/extended-diagnostics/NG8106.md +++ b/adev-ja/src/content/reference/extended-diagnostics/NG8106.md @@ -3,11 +3,9 @@ This diagnostic detects when the `.px`, `.%`, and `.em` suffixes are used with an attribute binding. - - +```html - - +``` ## What's wrong with that? @@ -18,11 +16,9 @@ These suffixes are only available for style bindings. They do not have any meani Rather than using the `.px`, `.%`, or `.em` suffixes that are only supported in style bindings, move this to the value assignment of the binding. - - +```html - - +``` ## Configuration requirements diff --git a/adev-ja/src/content/reference/extended-diagnostics/NG8108.md b/adev-ja/src/content/reference/extended-diagnostics/NG8108.md index 9bb36c06a7..1302d1ec99 100644 --- a/adev-ja/src/content/reference/extended-diagnostics/NG8108.md +++ b/adev-ja/src/content/reference/extended-diagnostics/NG8108.md @@ -36,7 +36,7 @@ class MyComponent {} If a conditional is necessary, you can wrap the component in an `*ngIf`. - +```html import {Component} from '@angular/core'; @@ -55,7 +55,7 @@ template: ` }) class MyComponent {} - +``` ## Configuration requirements diff --git a/adev-ja/src/content/reference/releases.en.md b/adev-ja/src/content/reference/releases.en.md index 55429d05f6..e8eef849be 100644 --- a/adev-ja/src/content/reference/releases.en.md +++ b/adev-ja/src/content/reference/releases.en.md @@ -116,11 +116,11 @@ When the Angular team intends to remove an API or feature, it will be marked as To help ensure that you have sufficient time and a clear path to update, this is our deprecation policy: -| Deprecation stages | Details | -| :----------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| Announcement | We announce deprecated APIs and features in the [change log](https://github.com/angular/angular/blob/main/CHANGELOG.md 'Angular change log'). Deprecated APIs appear in the [documentation](api?status=deprecated) with ~~strikethrough~~. When we announce a deprecation, we also announce a recommended update path. Additionally, all deprecated APIs are annotated with `@deprecated` in the corresponding documentation, which enables text editors and IDEs to provide hints if your project depends on them. | -| Deprecation period | When an API or a feature is deprecated, it is still present in at least the next two major releases (period of at least 12 months). After that, deprecated APIs and features are candidates for removal. A deprecation can be announced in any release, but the removal of a deprecated API or feature happens only in major release. Until a deprecated API or feature is removed, it is maintained according to the LTS support policy, meaning that only critical and security issues are fixed. | -| npm dependencies | We only make npm dependency updates that require changes to your applications in a major release. In minor releases, we update peer dependencies by expanding the supported versions, but we do not require projects to update these dependencies until a future major version. This means that during minor Angular releases, npm dependency updates within Angular applications and libraries are optional. | +| Deprecation stages | Details | +| :----------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Announcement | We announce deprecated APIs and features in the [change log](https://github.com/angular/angular/blob/main/CHANGELOG.md 'Angular change log'). Deprecated APIs appear in the [documentation](api?status=8) with ~~strikethrough~~. When we announce a deprecation, we also announce a recommended update path. Additionally, all deprecated APIs are annotated with `@deprecated` in the corresponding documentation, which enables text editors and IDEs to provide hints if your project depends on them. | +| Deprecation period | When an API or a feature is deprecated, it is still present in at least the next two major releases (period of at least 12 months). After that, deprecated APIs and features are candidates for removal. A deprecation can be announced in any release, but the removal of a deprecated API or feature happens only in major release. Until a deprecated API or feature is removed, it is maintained according to the LTS support policy, meaning that only critical and security issues are fixed. | +| npm dependencies | We only make npm dependency updates that require changes to your applications in a major release. In minor releases, we update peer dependencies by expanding the supported versions, but we do not require projects to update these dependencies until a future major version. This means that during minor Angular releases, npm dependency updates within Angular applications and libraries are optional. | ## Compatibility policy diff --git a/adev-ja/src/content/reference/releases.md b/adev-ja/src/content/reference/releases.md index b52b8e8a75..ca83690aa5 100644 --- a/adev-ja/src/content/reference/releases.md +++ b/adev-ja/src/content/reference/releases.md @@ -118,7 +118,7 @@ AngularチームがAPIや機能を削除する場合は、_非推奨_ とマー | 非推奨のステージ | 詳細 | | :--------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| 発表 | [変更ログ](https://github.com/angular/angular/blob/main/CHANGELOG.md 'Angular 変更ログ')で、非推奨のAPIと機能を発表します。非推奨のAPIは、[ドキュメント](api?status=deprecated)に~~取り消し線~~で表示されます。非推奨をアナウンスするときは、推奨される更新パスもアナウンスします。さらに、すべての非推奨のAPIには、対応するドキュメントに`@deprecated`が注釈付きで付けられています。これにより、テキストエディターやIDEは、プロジェクトがそれらに依存している場合にヒントを提供できます。 | +| 発表 | [変更ログ](https://github.com/angular/angular/blob/main/CHANGELOG.md 'Angular 変更ログ')で、非推奨のAPIと機能を発表します。非推奨のAPIは、[ドキュメント](api?status=8)に~~取り消し線~~で表示されます。非推奨をアナウンスするときは、推奨される更新パスもアナウンスします。さらに、すべての非推奨のAPIには、対応するドキュメントに`@deprecated`が注釈付きで付けられています。これにより、テキストエディターやIDEは、プロジェクトがそれらに依存している場合にヒントを提供できます。 | | 非推奨期間 | APIや機能が非推奨になると、少なくとも次の2つのメジャーリリース（少なくとも12か月間）は引き続き存在します。その後、非推奨のAPIと機能は削除の対象となります。非推奨はどのリリースでも発表できますが、非推奨のAPIや機能の削除は、メジャーリリースでのみ行われます。非推奨のAPIや機能が削除されるまでは、LTSサポートポリシーに従って維持されます。つまり、重要な問題とセキュリティ問題のみが修正されます。 | | npm依存関係 | アプリケーションを変更する必要があるnpm依存関係の更新は、メジャーリリースでのみ行います。マイナーリリースでは、サポートされるバージョンを拡張することによってピア依存関係を更新しますが、将来のメジャーバージョンまでプロジェクトでこれらの依存関係を更新する必要はありません。つまり、マイナーなAngularリリース中は、Angularアプリケーションとライブラリ内のnpm依存関係の更新はオプションです。 | diff --git a/adev-ja/src/content/tools/devtools/component.md b/adev-ja/src/content/tools/devtools/component.md index 2003bd4309..3c93452fba 100644 --- a/adev-ja/src/content/tools/devtools/component.md +++ b/adev-ja/src/content/tools/devtools/component.md @@ -53,26 +53,24 @@ The extension recognizes the associated directives and/or components and lets yo A screenshot of the 'Components' tab with an Angular todo application visible. In the very top-left corner of Angular DevTools, an icon of a screen with a mouse icon inside it is selected. The mouse rests on a todo element in the Angular application UI. The element is highlighted with a `<TodoComponent>` label displayed in an adjacent tooltip. -## Inspect your injectors +### Inspect Deferrable views -NOTE: The Injector Tree is available for Angular Applications built with version 17 or higher. +Alongside the directives, the directive tree also includes [`@defer` blocks](/guide/templates/defer). -### View the injector hierarchy of your application + -The **Injector Tree** tab lets you explore the structure of the Injectors configured in your application. Here you will see two trees representing the [injector hierarchy](guide/di/hierarchical-dependency-injection) of your application. One tree is your environment hierarchy, the other is your element hierarchy. +Clicking a defer block shows more details in the properties sidebar: the different optional blocks (for example `@loading`, `@placeholder`, and `@error`), the configured triggers (defer triggers, prefetch triggers, and hydrate triggers), and timing options such as the `minimum` and `after` values. -A screenshot of the 'Profiler' tab displaying the injector tree tab in Angular Devtools visualizing the injector graph for an example application. +### Hydration -### Visualize resolution paths +When [hydration](/guide/hydration) is enabled on your SSR/SSG application, the directive tree shows the hydration status of each component. -When a specific injector is selected, the path that Angular's dependency injection algorithm traverses from that injector to the root is highlighted. For element injectors, this includes highlighting the environment injectors that the dependency injection algorithm jumps to when a dependency cannot be resolved in the element hierarchy. +In case of errors, an error message is displayed on the affected component. -See [resolution rules](guide/di/hierarchical-dependency-injection#resolution-rules) for more details about how Angular resolves resolution paths. + -A screenshot of the 'Profiler' tab displaying how the injector tree visualize highlights resolution paths when an injector is selected. +The hydration status can also be visualized on the application itself by enabling the overlay. -### View injector providers + -Clicking an injector that has configured providers will display those providers in a list on the right of the injector tree view. Here you can view the provided token and it's type. - -A screenshot of the 'Profiler' tab displaying how providers are made visible when an injector is selected. +Here is an illustration of the hydration overlays on a Angular e-shop example app. diff --git a/adev-ja/src/content/tools/devtools/injectors.md b/adev-ja/src/content/tools/devtools/injectors.md new file mode 100644 index 0000000000..f84a95aa05 --- /dev/null +++ b/adev-ja/src/content/tools/devtools/injectors.md @@ -0,0 +1,23 @@ +## Inspect your injectors + +NOTE: The Injector Tree is available for Angular Applications built with version 17 or higher. + +### View the injector hierarchy of your application + +The **Injector Tree** tab lets you explore the structure of the Injectors configured in your application. Here you will see two trees representing the [injector hierarchy](guide/di/hierarchical-dependency-injection) of your application. One tree is your environment hierarchy, the other is your element hierarchy. + +A screenshot of the 'Profiler' tab displaying the injector tree tab in Angular Devtools visualizing the injector graph for an example application. + +### Visualize resolution paths + +When a specific injector is selected, the path that Angular's dependency injection algorithm traverses from that injector to the root is highlighted. For element injectors, this includes highlighting the environment injectors that the dependency injection algorithm jumps to when a dependency cannot be resolved in the element hierarchy. + +See [resolution rules](guide/di/hierarchical-dependency-injection#resolution-rules) for more details about how Angular resolves resolution paths. + +A screenshot of the 'Profiler' tab displaying how the injector tree visualize highlights resolution paths when an injector is selected. + +### View injector providers + +Clicking an injector that has configured providers will display those providers in a list on the right of the injector tree view. Here you can view the provided token and it's type. The button on the right of each provider allows you to log the provider in the console. + +A screenshot of the 'Profiler' tab displaying how providers are made visible when an injector is selected. diff --git a/adev-ja/src/content/tools/devtools/overview.md b/adev-ja/src/content/tools/devtools/overview.md index 272d30263f..40cf26bcfc 100644 --- a/adev-ja/src/content/tools/devtools/overview.md +++ b/adev-ja/src/content/tools/devtools/overview.md @@ -15,18 +15,22 @@ HELPFUL: Chrome's new tab page does not run installed extensions, so the Angular ## Open your application -When you open the extension, you'll see two additional tabs: +When you open the extension, you'll see three additional tabs: -| Tabs | Details | -| :------------------------------------- | :--------------------------------------------------------------------------------------------------------------------- | -| [Components](tools/devtools/component) | Lets you explore the components and directives in your application and preview or edit their state. | -| [Profiler](tools/devtools/profiler) | Lets you profile your application and understand what the performance bottleneck is during change detection execution. | +| Tabs | Details | +| :---------------------------------------- | :--------------------------------------------------------------------------------------------------------------------- | +| [Components](tools/devtools/component) | Lets you explore the components and directives in your application and preview or edit their state. | +| [Profiler](tools/devtools/profiler) | Lets you profile your application and understand what the performance bottleneck is during change detection execution. | +| [Injector Tree](tools/devtools/injectors) | Lets you visualize the Environment and Element Injector hierarchy | - +Other tabs like `Router Tree` or `Transfer State` are experimental and can be enabled via the devtools settings and are not documented yet. + +HELPFUL: For users of Chromium based browsers, you might be interested in the [Performance panel integration](/best-practices/profiling-with-chrome-devtools). A screenshot of the top of Angular DevTools illustrating two tabs in the upper-left corner, one labeled 'Components' and another labeled 'Profiler'. -In the top-right corner of Angular DevTools you'll find which version of Angular is running on the page as well as the latest commit hash for the extension. +In the top-right corner of Angular DevTools you'll find the information button which open a popover. +The information popover contains among others what version of Angular is running on the page as well as the devtools version. ### Angular application not detected diff --git a/adev-ja/src/content/tools/devtools/profiler.md b/adev-ja/src/content/tools/devtools/profiler.md index 0b893d4649..34ce43d71d 100644 --- a/adev-ja/src/content/tools/devtools/profiler.md +++ b/adev-ja/src/content/tools/devtools/profiler.md @@ -27,8 +27,7 @@ When you select a bar, DevTools displays useful information about it including: - A bar chart with all the components and directives that it captured during this cycle - How much time Angular spent running change detection in this cycle. -- An estimated frame rate as experienced by the user. -- The source which triggered change detection. +- An estimated frame rate as experienced by the user (if below 60fps) A screenshot of the 'Profiler' tab. A single bar has been selected by the user and a nearby dropdown menu displays 'Bar chart`, showing a second bar chart underneath it. The new chart has two bars which take up the majority of the space, one labeled `TodosComponent` and the other labeled `NgForOf`. The other bars are small enough to be negligible in comparison. diff --git a/adev-ja/src/content/tutorials/signals/steps/6-two-way-binding-with-model-signals/README.en.md b/adev-ja/src/content/tutorials/signals/steps/6-two-way-binding-with-model-signals/README.en.md index 960e462f37..f451bc0ae8 100644 --- a/adev-ja/src/content/tutorials/signals/steps/6-two-way-binding-with-model-signals/README.en.md +++ b/adev-ja/src/content/tutorials/signals/steps/6-two-way-binding-with-model-signals/README.en.md @@ -13,7 +13,7 @@ Create a model signal in the `custom-checkbox` component that can both receive a ```ts // Add imports for model signals -import {Component, model, input} from '@angular/core'; +import {Component, model, input, ChangeDetectionStrategy} from '@angular/core'; // Model signal for two-way binding checked = model.required(); @@ -89,6 +89,12 @@ Part 2. **Replace the `???` placeholders with @if blocks:** } @else { No } + +@if (enableNotifications()) { + Yes +} @else { + No +} ``` Part 3. **Add click handlers to the buttons:** diff --git a/adev-ja/src/content/tutorials/signals/steps/6-two-way-binding-with-model-signals/README.md b/adev-ja/src/content/tutorials/signals/steps/6-two-way-binding-with-model-signals/README.md index f37b604c71..0d79e65698 100644 --- a/adev-ja/src/content/tutorials/signals/steps/6-two-way-binding-with-model-signals/README.md +++ b/adev-ja/src/content/tutorials/signals/steps/6-two-way-binding-with-model-signals/README.md @@ -13,7 +13,7 @@ ```ts // Add imports for model signals -import {Component, model, input} from '@angular/core'; +import {Component, model, input, ChangeDetectionStrategy} from '@angular/core'; // Model signal for two-way binding checked = model.required(); @@ -89,6 +89,12 @@ resetAll() { } @else { No } + +@if (enableNotifications()) { + Yes +} @else { + No +} ``` パート3. **ボタンにクリックハンドラーを追加します。** diff --git a/origin b/origin index 5961e96196..51ebe9a4fc 160000 --- a/origin +++ b/origin @@ -1 +1 @@ -Subproject commit 5961e96196b90ae08a1ad266d3786eaed935db41 +Subproject commit 51ebe9a4fcc158e11acc9a5ce25746b70a505b96