diff --git a/en/components/charts/features/chart-navigation.md b/en/components/charts/features/chart-navigation.md index 3144397849..61d4bf560f 100644 --- a/en/components/charts/features/chart-navigation.md +++ b/en/components/charts/features/chart-navigation.md @@ -27,7 +27,7 @@ Like this sample? Get access to our complete Angular toolkit and start building ## Chart Navigation with User Interactions -Zooming is on by default on the chart. In order to disable navigation in the UI, you need to set either the [`isHorizontalZoomEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isHorizontalZoomEnabled) and/or the [`isVerticalZoomEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isVerticalZoomEnabled) properties of the chart to false, depending on the direction that you wish to disable zooming. +Whether or not zooming is on by default depends on the chart you are using. If you are using [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html), it is on by default, but it is not in the [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html). In order to enable or disable navigation in the UI, you need to set either the [`isHorizontalZoomEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isHorizontalZoomEnabled) and/or the [`isVerticalZoomEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isVerticalZoomEnabled) properties of the chart, depending on the direction that you wish to enable or disable zooming. It is also possible to zoom or pan simply by clicking the mouse or using touch. The [`defaultInteraction`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#defaultInteraction) property of the data chart determines what happens on mouse click or touch events. This property defaults to `DragZoom` and when set to this with zooming enabled, clicking and dragging will place a preview rectangle over the plot area that will become the zoomed area of the chart. This [`defaultInteraction`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#defaultInteraction) property can also be set to either `DragPan` to allow panning or `None` to prevent these operations. diff --git a/en/components/general/how-to/how-to-use-standalone-components.md b/en/components/general/how-to/how-to-use-standalone-components.md index 2e4f79042d..d1f6478d01 100644 --- a/en/components/general/how-to/how-to-use-standalone-components.md +++ b/en/components/general/how-to/how-to-use-standalone-components.md @@ -6,7 +6,7 @@ _keywords: Ignite UI for Angular, Standalone Components, Angular 16, Angular Mod # Using Standalone Components with Ignite UI for Angular -Angular 14 introduced the concept of [standalone components](https://angular.io/guide/standalone-components) which allows for a simplified way of building applications by reducing the need for using `NgModules`. Standalone components were in developer preview until Angular 15. To support this new paradigm, all Ignite UI for Angular components are now exported as `standalone` with version `16.0.0`. All the existing `NgModules` are still exported by the library for backward compatibility. However, they no longer declare any of the Ignite UI for Angular components. Instead they import and export the `standalone` components. +Angular 14 introduced the concept of [standalone components](https://angular.io/guide/standalone-components) which allows for a simplified way of building applications by reducing the need for using `NgModules`. Standalone components were in developer preview until Angular 15. To support this new paradigm, all Ignite UI for Angular components are now exported as `standalone` with version `16.0.0`. As of Angular 19 all compoenents are standalone by default. All the existing `NgModules` are still exported by the library for backward compatibility. However, they no longer declare any of the Ignite UI for Angular components. Instead they import and export the `standalone` components. ## How to use the new standalone components @@ -19,7 +19,6 @@ import { IGX_GRID_DIRECTIVES } from 'igniteui-angular'; selector: 'app-grid-sample', styleUrls: ['grid.sample.scss'], templateUrl: 'grid.sample.html', - standalone: true, imports: [IGX_GRID_DIRECTIVES, AsyncPipe] }) ``` @@ -33,7 +32,6 @@ import { IgxGridComponent, IgxColumnComponent } from 'igniteui-angular'; selector: 'app-grid-sample', styleUrls: ['grid.sample.scss'], templateUrl: 'grid.sample.html', - standalone: true, imports: [IgxGridComponent, IgxColumnComponent, AsyncPipe] }) ``` @@ -48,7 +46,6 @@ import { IgxGridModule } from 'igniteui-angular'; selector: 'app-grid-sample', styleUrls: ['grid.sample.scss'], templateUrl: 'grid.sample.html', - standalone: true, imports: [IgxGridModule, AsyncPipe] }) ``` diff --git a/en/components/grids_templates/summaries.md b/en/components/grids_templates/summaries.md index 77c10dc9dd..f4c37b6c44 100644 --- a/en/components/grids_templates/summaries.md +++ b/en/components/grids_templates/summaries.md @@ -115,6 +115,56 @@ All available column data types could be found in the official [Column types top ``` } + +**@@igComponent summaries** can be customized further by using the [`disabledSummaries`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#disabledSummaries) property, which allows you to exclude specific summary functions for a column. This property accepts an array of strings representing the keys of the summaries to disable. + +@@if (igxName === 'IgxGrid') { +For example, to disable the `count`, `min`, and `max` summaries for a `ReorderLevel` column, you can set the `disabledSummaries` property to `['count', 'min', 'max']`: + +```html +<@@igSelector #grid1 [data]="data" [autoGenerate]="false" height="800px" width="800px" (columnInit)="initColumn($event)"> + + + + + +``` +} +@@if (igxName === 'IgxTreeGrid') { +For example, to disable the `count`, `min`, and `max` summaries for a `Units` column, you can set the `disabledSummaries` property to `['count', 'min', 'max']`: + +```html +<@@igSelector #grid1 [data]="data" [autoGenerate]="false" height="800px" width="800px" (columnInit)="initColumn($event)"> + + + + + +``` +} +@@if (igxName === 'IgxHierarchicalGrid') { +For example, to disable the `count`, `min`, and `max` summaries for a `Grammy Nominations` column, you can set the `disabledSummaries` property to `['count', 'min', 'max']`: + +```html + + + + +
+ +
+ + + + + + + +``` +} + +In this example, the numeric column will display only the remaining summaries, such as `average` and `sum`, while excluding the disabled ones. This approach ensures that you can tailor the summary results displayed for each column to better suit your application's requirements. + The other way to enable/disable summaries for a specific column or a list of columns is to use the public method [`enableSummaries`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#enableSummaries)/[`disableSummaries`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#disableSummaries) of the **@@igSelector**. @@if (igxName === 'IgxGrid') { @@ -327,6 +377,59 @@ export class HGridSummarySampleComponent implements OnInit { ``` } +**@@igComponent summaries** also support customization when using the [`disabledSummaries`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#disabledSummaries) property alongside custom summaries. This property allows you to exclude specific custom summary, offering precise control over which summaries are displayed for a given column. For example, to disable a custom summary like `test` while keeping others active, you can use the `disabledSummaries` property and set it to `['test']`: + +@@if (igxName === 'IgxGrid') { +```html + <@@igSelector #grid1 [data]="data" [autoGenerate]="false" height="800px" width="800px" (columnInit)="initColumn($event)"> + + + + + + + + + +``` + +In this example, the `UnitsInStock` column uses the custom `MySummary` class but excludes the `test` summary function by specifying it in the `disabledSummaries` property. This configuration allows for even greater flexibility, enabling you to disable custom summaries to suit your application's specific needs. +} + +@@if (igxName === 'IgxTreeGrid') { +```html +<@@igSelector #grid1 [data]="data" [autoGenerate]="false" height="800px" width="800px" (columnInit)="initColumn($event)"> + + + + + + +``` + +In this example, the `Units` column uses the custom `MySummary` class but excludes the `test` summary function by specifying it in the `disabledSummaries` property. This configuration allows for even greater flexibility, enabling you to disable custom summaries to suit your application's specific needs. +} + +@@if (igxName === 'IgxHierarchicalGrid') { +```html + + + + +
+ +
+ + + + + + +``` + +In this example, the `Grammy Nominations` column uses the custom `MySummary` class but excludes the `test` summary function by specifying it in the `disabledSummaries` property. This configuration allows for even greater flexibility, enabling you to disable custom summaries to suit your application's specific needs. +} + ### Custom summaries, which access all data Now you can access all @@igComponent data inside the custom column summary. Two additional optional parameters are introduced in the IgxSummaryOperand `operate` method. As you can see in the code snippet below the operate method has the following three parameters: diff --git a/en/components/toc.yml b/en/components/toc.yml index f83ea1f9be..0fea85e9a6 100644 --- a/en/components/toc.yml +++ b/en/components/toc.yml @@ -631,6 +631,9 @@ - name: Composite Chart href: charts/types/composite-chart.md new: false +- name: Data Pie Chart + href: charts/types/data-pie-chart.md + new: true - name: Donut Chart href: charts/types/donut-chart.md new: false diff --git a/jp/components/charts/features/chart-navigation.md b/jp/components/charts/features/chart-navigation.md index 702eb7ce8e..74d41dcfb6 100644 --- a/jp/components/charts/features/chart-navigation.md +++ b/jp/components/charts/features/chart-navigation.md @@ -27,7 +27,7 @@ Ignite UI for Angular チャートを使用すると、マウス、キーボー ## ユーザー インタラクションによるチャート ナビゲーション -チャートでは、ズームはデフォルトでオンになっています。UI でナビゲーションを無効にするには、ズームを無効にする方向に応じて、チャートの [`isHorizontalZoomEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isHorizontalZoomEnabled) プロパティまたは [`isVerticalZoomEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isVerticalZoomEnabled) プロパティのいずれかを false に設定する必要があります。 +ズームがデフォルトでオンになっているかどうかは、使用しているチャートによって異なります。[`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) を使用している場合、デフォルトでオンになっていますが、[`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) ではオフです。+UI でナビゲーションを有効または無効にするには、ズームを無効にする方向に応じて、チャートの [`isHorizontalZoomEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isHorizontalZoomEnabled) プロパティおよび/または [`isVerticalZoomEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isVerticalZoomEnabled) プロパティを設定する必要があります。 またマウスやタッチでズームまたはパンニングできます。チャートの [`defaultInteraction`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#defaultInteraction) プロパティは、マウスクリック イベントやタッチ イベントで何が起こるかを決定します。このプロパティはデフォルトで `DragZoom` に設定されており、ズームを有効に設定すると、クリックしてドラッグした際にプロット領域の上に四角形のプレビューが配置され、グラフのズーム領域になります。この [`defaultInteraction`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#defaultInteraction) プロパティは、パンニングを許可する場合は `DragPan`、これらの操作を禁止する場合は `None` に設定することもできます。 diff --git a/jp/components/charts/features/chart-performance.md b/jp/components/charts/features/chart-performance.md index 2091ea12ca..4de5d2ece2 100644 --- a/jp/components/charts/features/chart-performance.md +++ b/jp/components/charts/features/chart-performance.md @@ -75,11 +75,9 @@ export class MultiDataSources { const dataSource1: any[] = []; dataSource1.push({ "Year": "1996", "Value": 148 }); dataSource1.push({ "Year": "2000", "Value": 142 }); - const dataSource2: any[] = []; dataSource2.push({ "Year": "1996", "Value": 110 }); dataSource2.push({ "Year": "2000", "Value": 115 }); - const multipleSources: any[] = [dataSource1, dataSource2]; return multipleSources; } diff --git a/jp/components/date-picker.md b/jp/components/date-picker.md index 41e366868c..d4a5917f8b 100644 --- a/jp/components/date-picker.md +++ b/jp/components/date-picker.md @@ -213,6 +213,7 @@ export class SampleFormComponent { 注意すべき点は、Ignite UI の Angular DatePicker Component が `date` と `month` の部分がない形式で提供された場合、それらの部分に常に先行ゼロを追加することです。例えば、`d/M/yy` は `dd/MM/yy` になります。これは編集中にのみ適用されます。 一方、[`displayFormat`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#displayFormat) は Angular の [`DatePipe`](https://angular.io/api/common/DatePipe) を使用し、フォーカスされていないときにピッカーの入力を書式設定するために使用されます。[`displayFormat`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#displayFormat) が指定されていない場合、ピッカーは [`inputFormat`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#inputFormat) を [`displayFormat`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#displayFormat) として使用します。 +あるいは、[`inputFormat`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#inputFormat) プロパティが設定されていない場合、入力形式は [`displayFormat`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#displayFormat) から数値の日付と時刻の部分のみを含む形式として解析できる場合に推測されます。 これらの詳細については、[`IgxDateTimeEditor`](date-time-editor.md#例) の例のセクションを参照してください。 diff --git a/jp/components/date-range-picker.md b/jp/components/date-range-picker.md index 21990225af..050d9bd303 100644 --- a/jp/components/date-range-picker.md +++ b/jp/components/date-range-picker.md @@ -246,6 +246,8 @@ Date Range Picker コンポーネントはさまざまな表示および入力 ``` +[`inputFormat`]({environment:angularApiUrl}/classes/igxdaterangepickercomponent.html#inputFormat) プロパティが設定されていない場合、入力形式は [`displayFormat`]({environment:angularApiUrl}/classes/igxdaterangepickercomponent.html#displayFormat) から数値の日付と時刻の部分のみを含む形式として解析できる場合に推測されます。 + >[!NOTE] > `IgxDateRangePicker` が IME 入力をサポートするようになりました。合成が終了すると、コントロールはワイド文字の数字を ASCII 文字に変換します。 diff --git a/jp/components/date-time-editor.md b/jp/components/date-time-editor.md index a791fe9e73..c3fc36f32b 100644 --- a/jp/components/date-time-editor.md +++ b/jp/components/date-time-editor.md @@ -1,11 +1,11 @@ --- -title: 日時エディター ディレクティブ - ネイティブ Angular | Ignite UI for Angular +title: 日付/時刻エディター ディレクティブ - ネイティブ Angular | Ignite UI for Angular _description: Ignite UI for Angular Date Time Editor ディレクティブでは、Date オブジェクトによって日付と時刻を処理できます。 _keywords: Ignite UI for Angular, UI コントロール, Angular ウィジェット, web ウィジェット, UI ウィジェット, Angular, ネイティブ Angular コンポーネント スイート, ネイティブ Angular コントロール, ネイティブ Angular コンポーネント ライブラリ, ネイティブ Angular コンポーネント, Angular Date Time Editor ディレクティブAngular Date Time ディレクティブ コントロール, Date Time Editor, Angular Date Time ディレクティブ _language: ja --- -# Angular Date Time Editor (日時エディター) ディレクティブ +# Angular Date Time Editor (日付/時刻エディター) ディレクティブ

Ignite UI for Angular Date Time Editor ディレクティブでは、選択された入力要素で日付と時刻を設定および編集できます。ユーザーは、編集可能なマスク入力によって日付または時間部分を編集できます。さらに、検証に最小値と最大値だけでなく、希望の表示形式および入力形式の設定を指定できます。

@@ -72,7 +72,7 @@ Ignite UI for Angular Date Time Editor モジュールまたはディレクテ ## Ignite UI for Angular Date Time Editor ディレクティブの使用 -input 要素を日時エディターとして使用するには、igxDateTimeEditor ディレクティブと有効なdateオブジェクトを値として設定します。エディターの外観を完全にするには、入力要素を [igx-input-group](input-group.md) にラップします。これにより、[`igxInput`]({environment:angularApiUrl}/classes/igxinputdirective.html)、[`igxLabel`](label-input.md)、[`igx-prefix`](input-group.md#prefix-および-suffix)、[`igx-suffix`](input-group.md#prefix-および-suffix)、[`igx-hint`](input-group.md#hint) ディレクティブを利用できるだけでなく、フォーム入力を扱うときの一般的なシナリオに対処できます。 +input 要素を日付/時刻エディターとして使用するには、igxDateTimeEditor ディレクティブと有効なdateオブジェクトを値として設定します。エディターの外観を完全にするには、入力要素を [igx-input-group](input-group.md) にラップします。これにより、[`igxInput`]({environment:angularApiUrl}/classes/igxinputdirective.html)、[`igxLabel`](label-input.md)、[`igx-prefix`](input-group.md#prefix-および-suffix)、[`igx-suffix`](input-group.md#prefix-および-suffix)、[`igx-hint`](input-group.md#hint) ディレクティブを利用できるだけでなく、フォーム入力を扱うときの一般的なシナリオに対処できます。 ### バインディング 以下は、Date オブジェクトを [`value`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#value) として設定する基本的な構成シナリオです。 @@ -118,7 +118,7 @@ Date Time Editor ディレクティブには直感的なキーボード ナビ - 上矢印 / 下矢印 - 日付部分を増減します。関連する [`spinLoop`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#spinLoop) を参照してください。 -- Ctrl / Cmd + ; - エディターの現在の日時を設定します。 +- Ctrl / Cmd + ; - エディターの現在の日付/時刻を設定します。 ## 例 @@ -126,6 +126,7 @@ Date Time Editor ディレクティブには直感的なキーボード ナビ [`IgxDateTimeEditor`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html) は、さまざまな表示および入力の形式をサポートします。 Angular の [`DatePipe`](https://angular.io/api/common/DatePipe) を使用しており、`shortDate` や `longDate` などの事前定義された形式オプションをサポートできます。また、`DatePipe` でサポートされている文字を使用して構築されたフォーマット文字列を受け入れることもできます。例えば、`EE/MM/yyyy` です。`shortDate`、`longDate` などの形式は、[`displayFormat`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#displayFormat) としてのみ使用できることに注意してください。また、[`displayFormat`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#displayFormat) が指定されていない場合、エディターは [`inputFormat`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#inputFormat) を [`displayFormat`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#displayFormat) として使用します。 +あるいは、[`inputFormat`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#inputFormat) プロパティが設定されていない場合、入力形式は [`displayFormat`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#displayFormat) から数値の日付と時刻の部分のみを含む形式として解析できる場合に推測されます。 特定の入力形式を設定するには、文字列として IgxDateTimeEditor ディレクティブに渡します。これにより、予期されるユーザー入力形式とエディターの[マスク](mask.md)の両方が設定されます。さらに、[`inputFormat`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#inputFormat) はロケール ベースであるため、何も指定されていない場合、ピッカーはデフォルトでブラウザーで使用されるものになります。 @@ -172,7 +173,7 @@ public maxDate = new Date(2020, 11, 1); [`minValue`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#minValue) および [`minValue`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#minValue) 入力は、タイプ `string` にすることもできます。 [ISO 文字列へのバインド](#iso)を参照してください。 ### 増加および減少 -[`igxDateTimeEditor`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html) ディレクティブは、公開 [`increment`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#increment) および [`decrement`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#decrement) メソッドを公開します。これらは、現在設定されている日時の特定の [`DatePart`]({environment:angularApiUrl}/enums/datepart.html) を増加または減少し、いくつかの方法で使用できます。 +[`igxDateTimeEditor`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html) ディレクティブは、公開 [`increment`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#increment) および [`decrement`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#decrement) メソッドを公開します。これらは、現在設定されている日付/時刻の特定の [`DatePart`]({environment:angularApiUrl}/enums/datepart.html) を増加または減少し、いくつかの方法で使用できます。 最初のシナリオでは、特定の [`DatePart`]({environment:angularApiUrl}/enums/datepart.html) がメソッドに渡されない場合、デフォルトの [`DatePart`]({environment:angularApiUrl}/enums/datepart.html) は指定された [`inputFormat`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#inputFormat) と内部ディレクティブの実装に基づいて増加または減少します。2 番目のシナリオでは、さまざまな要件に適合する可能性があるため、操作する [`DatePart`]({environment:angularApiUrl}/enums/datepart.html) を明示的に指定できます。 また、どちらのメソッドも、増加/減少手順を設定するために使用できるタイプ `number` のオプションの `delta` パラメーターを受け入れます。 @@ -185,7 +186,7 @@ public maxDate = new Date(2020, 11, 1);
-さらに、`spinDelta` はタイプ [`DatePartDeltas`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html) の入力プロパティであり、各日時セグメントに異なるデルタを適用するために使用できます。これは、キーボードで回転するとき、および [`increment`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#increment) メソッドと [`decrement`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#decrement) メソッドで回転するときに適用されます。ただし、`spinDelta` よりも優先されるため `delta` パラメーターが指定されていない場合に限ります。 +さらに、`spinDelta` はタイプ [`DatePartDeltas`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html) の入力プロパティであり、各日付/時刻セグメントに異なるデルタを適用するために使用できます。これは、キーボードで回転するとき、および [`increment`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#increment) メソッドと [`decrement`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#decrement) メソッドで回転するときに適用されます。ただし、`spinDelta` よりも優先されるため `delta` パラメーターが指定されていない場合に限ります。 ### Angular フォーム Date Time Editor ディレクティブは、コア FormsModule [`NgModel`](https://angular.io/api/forms/NgModel) と [`ReactiveFormsModule`](https://angular.io/api/forms/ReactiveFormsModule) (FormControl、FormGroup など) のすべてのフォーム ディレクティブをサポートします。これには、[フォーム `Validators`](https://angular.io/api/forms/Validators)機能も含まれます。次の例は、テンプレート駆動型フォームで `required` バリデータを使用する方法を示しています。 diff --git a/jp/components/general/how-to/how-to-use-standalone-components.md b/jp/components/general/how-to/how-to-use-standalone-components.md index 171ae5cd28..19ef603747 100644 --- a/jp/components/general/how-to/how-to-use-standalone-components.md +++ b/jp/components/general/how-to/how-to-use-standalone-components.md @@ -7,7 +7,7 @@ _language: ja # Ignite UI for Angular での Standalone (スタンドアロン) コンポーネントの使用 -Angular 14 では[スタンドアロン コンポーネント](https://angular.io/guide/standalone-components)の概念が導入されました。これにより、`NgModules` を使用する必要性が減り、アプリケーションを構築する方法が簡素化されます。スタンドアロン コンポーネントは、Angular 15 まで開発者プレビューでした。この新しいパラダイムをサポートするために、バージョン `16.0.0` では、すべての Ignite UI for Angular コンポーネントが `standalone` としてエクスポートされるようになりました。既存のすべての `NgModule` は、後方互換性のためにライブラリによって引き続きエクスポートされます。ただし、Ignite UI for Angular コンポーネントは宣言されなくなりました。代わりに、`standalone` コンポーネントをインポートおよびエクスポートします。 +Angular 14 では[スタンドアロン コンポーネント](https://angular.io/guide/standalone-components)の概念が導入されました。これにより、`NgModules` を使用する必要性が減り、アプリケーションを構築する方法が簡素化されます。スタンドアロン コンポーネントは、Angular 15 まで開発者プレビューでした。この新しいパラダイムをサポートするために、バージョン `16.0.0` では、すべての Ignite UI for Angular コンポーネントが `standalone` としてエクスポートされるようになりました。Angular 19 以降、すべてのコンポーネントはデフォルトでスタンドアロンです。既存のすべての `NgModule` は、後方互換性のためにライブラリによって引き続きエクスポートされます。ただし、Ignite UI for Angular コンポーネントは宣言されなくなりました。代わりに、`standalone` コンポーネントをインポートおよびエクスポートします。 ## 新しいスタンドアロン コンポーネントの使用方法 @@ -20,7 +20,6 @@ import { IGX_GRID_DIRECTIVES } from 'igniteui-angular'; selector: 'app-grid-sample', styleUrls: ['grid.sample.scss'], templateUrl: 'grid.sample.html', - standalone: true, imports: [IGX_GRID_DIRECTIVES, AsyncPipe] }) ``` @@ -34,7 +33,6 @@ import { IgxGridComponent, IgxColumnComponent } from 'igniteui-angular'; selector: 'app-grid-sample', styleUrls: ['grid.sample.scss'], templateUrl: 'grid.sample.html', - standalone: true, imports: [IgxGridComponent, IgxColumnComponent, AsyncPipe] }) ``` @@ -49,7 +47,6 @@ import { IgxGridModule } from 'igniteui-angular'; selector: 'app-grid-sample', styleUrls: ['grid.sample.scss'], templateUrl: 'grid.sample.html', - standalone: true, imports: [IgxGridModule, AsyncPipe] }) ``` diff --git a/jp/components/grids_templates/editing.md b/jp/components/grids_templates/editing.md index ecb092f016..b435d987f4 100644 --- a/jp/components/grids_templates/editing.md +++ b/jp/components/grids_templates/editing.md @@ -1,10 +1,3 @@ - - @@if (igxName === 'IgxGrid') { --- title: Angular Grid の編集 - Ignite UI for Angular @@ -30,6 +23,13 @@ _language: ja --- } + + # Angular @@igComponent 編集 Ignite UI for Angular @@igComponent コンポーネントは、レコードの作成、更新、削除などのデータ操作を簡単に実行できます。データの変更のフェーズは次のとおりです: [セル編集](cell-editing.md)、[行編集](row-editing.md)、および[一括編集](batch-editing.md)。@@igComponent は、これらの操作をカスタマイズできる強力なパブリック API を提供します。さらに、**セル編集**は、列のデータ型に基づいていくつかのデフォルト エディターを公開します。これらは、[igxCellEditor ディレクティブ](cell-editing.md#セル編集テンプレート)または [igxRow ディレクティブ](row-editing.md#行編集オーバーレイのカスタマイズ)を介して簡単にカスタマイズできます。 @@ -71,6 +71,24 @@ Ignite UI for Angular @@igComponent コンポーネントは、レコードの すべての利用可能な列データ型は、公式の[列タイプ トピック](column-types.md#デフォルトのテンプレート)にあります。 +#### 日付/時刻列のデフォルトのテンプレート エディター + +`date`、`dateTime`、`time` 列データ タイプのテンプレート エディターは、`IgxGrid` の [`locale`]({environment:angularApiUrl}/classes/igxgridcomponent.html#locale) に応じてデフォルトの入力形式を使用します。 + +列に [`pipeArgs`]({environment:angularApiUrl}/interfaces/columntype.html#pipeArgs) オブジェクトの `format` プロパティが設定されている場合、エディターの入力形式はそこから推測されます。条件は、数値の日付と時刻の部分のみを含むものとして解析できることです。 + +エディターの入力形式を明示的に設定する必要がある場合は、[`IColumnEditorOptions`]({environment:angularApiUrl}/interfaces/icolumneditoroptions.html) タイプの [`editorOptions`]({environment:angularApiUrl}/interfaces/columntype.html#editorOptions) オブジェクトを利用できます。これは、`date`、`dateTime`、および `time` 列データ タイプのエディターの入力形式として使用される `dateTimeFormat` プロパティを受け入れます。 + +```typescript +const editorOptions: IColumnEditorOptions = { + dateTimeFormat: 'MM/dd/YYYY', +} +``` + +```html + +``` + ### イベントの引数とシーケンス グリッドは、編集エクスペリエンスをより詳細に制御できる広範なイベントを公開します。これらのイベントは、[**行の編集**](row-editing.md)および[**セルの編集**](cell-editing.md)のライフサイクル - 編集の開始、コミット、またはキャンセル時に発生します。 @@ -161,6 +179,7 @@ public onSorting(event: ISortingEventArgs) { ## その他のリソース
+ * [igxGrid を使用して CRUD 操作の構築](../general/how-to/how-to-perform-crud.md) * [@@igComponent 概要](@@igMainTopic.md) * [列のデータ型](column-types.md#デフォルトのテンプレート) diff --git a/jp/components/time-picker.md b/jp/components/time-picker.md index d618546c8d..f71bed0cfd 100644 --- a/jp/components/time-picker.md +++ b/jp/components/time-picker.md @@ -262,6 +262,7 @@ Time Picker コンポーネントは、さまざまな表示形式と入力形 表示形式は、編集モードでの値の形式であり、リストされている Angular [DatePipe](https://angular.io/api/common/DatePipe) 形式の 1 つにすることができます。これにより、`shortTime` や `longTime` などの事前定義されたフォーマット オプションをサポートできます。 入力形式は、編集モードでないときの値の形式と、時間部分がドロップダウン/ダイアログに表示される形式です。`inputFormat` プロパティは、DatePipe でサポートされている文字を使用して構築されたフォーマット文字列を受け入れます。`hh:mm:ss` ですが、`shortTime` や `longTime` などの事前定義されたフォーマット オプションはサポートしていません。`inputFormat` プロパティが定義されていない場合、デフォルトで `hh:mm tt` になります。 +あるいは、[`inputFormat`]({environment:angularApiUrl}/classes/igxtimepickercomponent.html#inputFormat) プロパティが設定されていない場合、入力形式は [`displayFormat`]({environment:angularApiUrl}/classes/igxtimepickercomponent.html#displayFormat) から数値の日付と時刻の部分のみを含む形式として解析できる場合に推測されます。 ```html