@@ -295,7 +295,7 @@ When you set a value for the `$item-background` property, all related dependent
- {/* group for item-hover-background */}
+ {/*group for item-hover-background*/}
@@ -321,7 +321,7 @@ When you set a value for the `$item-background` property, all related dependent
- {/* group for item-selected-background */}
+ {/*group for item-selected-background*/}
@@ -357,7 +357,7 @@ When you set a value for the `$item-background` property, all related dependent
- {/* group for item-border-color */}
+ {/*group for item-border-color*/}
diff --git a/docs/angular/src/content/en/components/calendar.mdx b/docs/angular/src/content/en/components/calendar.mdx
index 38bfcc9007..a0d032918c 100644
--- a/docs/angular/src/content/en/components/calendar.mdx
+++ b/docs/angular/src/content/en/components/calendar.mdx
@@ -432,7 +432,7 @@ When you modify the `$header-background` and `$content-background` properties, a
-{/* Theme Switcher Radios and Labels */}
+{/*Theme Switcher Radios and Labels*/}
@@ -736,7 +736,7 @@ When you modify the `$header-background` and `$content-background` properties, a
-
+
{/* .theme-switcher-wrapper */}
diff --git a/docs/angular/src/content/en/components/charts/features/chart-annotations.mdx b/docs/angular/src/content/en/components/charts/features/chart-annotations.mdx
index 764a7fc173..1bc96b066d 100644
--- a/docs/angular/src/content/en/components/charts/features/chart-annotations.mdx
+++ b/docs/angular/src/content/en/components/charts/features/chart-annotations.mdx
@@ -84,10 +84,6 @@ The following example demonstrates how to style the final value layer annotation
-
-
-
-
## Angular Callout Layer
The displays annotations from existing or new data on the chart control. The annotations appear next to the given data values in the data source.
@@ -131,15 +127,6 @@ The following example demonstrates how to style the callout layer annotations by
-
-
-
-
-
-
-
-
-
## API References
diff --git a/docs/angular/src/content/en/components/charts/features/chart-axis-layouts.mdx b/docs/angular/src/content/en/components/charts/features/chart-axis-layouts.mdx
index 685f96cc7d..2b44297b03 100644
--- a/docs/angular/src/content/en/components/charts/features/chart-axis-layouts.mdx
+++ b/docs/angular/src/content/en/components/charts/features/chart-axis-layouts.mdx
@@ -67,7 +67,6 @@ The following example shows a Sin and Cos wave represented by a [Scatter Spline
-
## Additional Resources
You can find more information about related chart features in these topics:
@@ -95,12 +94,12 @@ d in the above sections:
| `Axes` -> `NumericYAxis` -> `LabelVisibility` | `YAxisLabelVisibility` |
| `Axes` -> `NumericXAxis` -> `LabelVisibility` | `XAxisLabelVisibility` |
-{/* TODO correct links in Transformer */}
-{/*
+{/*TODO correct links in Transformer _/}
+{/_
| `Axes` -> `NumericYAxis` -> `labelSettings.location` | `YAxisLabelLocation` |
| `Axes` -> `NumericXAxis` -> `labelSettings.location` | `XAxisLabelLocation` |
| `Axes` -> `NumericYAxis` -> `labelSettings.horizontalAlignment` | `YAxisLabelHorizontalAlignment` |
| `Axes` -> `NumericXAxis` -> `labelSettings.verticalAlignment` | `XAxisLabelVerticalAlignment` |
| `Axes` -> `NumericYAxis` -> `labelSettings.visibility` | `YAxisLabelVisibility` |
-| `Axes` -> `NumericXAxis` -> `labelSettings.visibility` | `XAxisLabelVisibility` | */}
+| `Axes` -> `NumericXAxis` -> `labelSettings.visibility` | `XAxisLabelVisibility` |*/}
diff --git a/docs/angular/src/content/en/components/charts/features/chart-data-aggregations.mdx b/docs/angular/src/content/en/components/charts/features/chart-data-aggregations.mdx
index a48a4789ce..704556b30e 100644
--- a/docs/angular/src/content/en/components/charts/features/chart-data-aggregations.mdx
+++ b/docs/angular/src/content/en/components/charts/features/chart-data-aggregations.mdx
@@ -38,10 +38,6 @@ Note, the abbreviated functions found within the dropdowns for
diff --git a/docs/angular/src/content/en/components/charts/features/chart-highlight-filter.mdx b/docs/angular/src/content/en/components/charts/features/chart-highlight-filter.mdx
index 45508b55c5..ddd18c0a19 100644
--- a/docs/angular/src/content/en/components/charts/features/chart-highlight-filter.mdx
+++ b/docs/angular/src/content/en/components/charts/features/chart-highlight-filter.mdx
@@ -49,8 +49,8 @@ The following example demonstrates the usage of the data highlighting overlay fe
The `CategoryChart` highlight filter happens on the chart by setting the `InitialHighlightFilter` property. Since the `CategoryChart` takes all of the properties on your underlying data item into account by default, you will need to define the `InitialGroups` on the chart as well so that the data can be grouped and aggregated in a way that you can have a subset of the data to filter on. You can set the `InitialGroups` to a value path in your underlying data item to group by a path that has duplicate values.
-{/* Unsure of this part. Need to review */}
-{/* ????? The `InitialHighlightFilter` is done using OData filter query syntax. The syntax for this is an abbreviation of the filter operator. For example, if you wanted to have an InitialHighlightFilter of "Month not equals January" it would be represented as "Month ne 'January'"*/}
+{/*Unsure of this part. Need to review _/}
+{/_ ????? The `InitialHighlightFilter` is done using OData filter query syntax. The syntax for this is an abbreviation of the filter operator. For example, if you wanted to have an InitialHighlightFilter of "Month not equals January" it would be represented as "Month ne 'January'"*/}
Similar to the `DataChart`, the `HighlightedValuesDisplayMode` property is also exposed on the `CategoryChart`. In the case that you do not want to see the overlay, you can set this property to `Hidden`.
@@ -59,7 +59,7 @@ The following example demonstrates the usage of the data highlighting overlay fe
-{/* TODO add new section that talks about how this feature also applies to Range, Financial series and the HighlightedValueMemberPath property corresponds to:
+{/*TODO add new section that talks about how this feature also applies to Range, Financial series and the HighlightedValueMemberPath property corresponds to:
HighlightedHighMemberPath and HighlightedLowMemberPath in Range Series
HighlightedHighMemberPath, HighlightedLowMemberPath, HighlightedOpenMemberPath, HighlightedCloseMemberPath in Financial Series*/}
diff --git a/docs/angular/src/content/en/components/charts/features/chart-legends.mdx b/docs/angular/src/content/en/components/charts/features/chart-legends.mdx
index c3ec0bcdcf..a56fd222c8 100644
--- a/docs/angular/src/content/en/components/charts/features/chart-legends.mdx
+++ b/docs/angular/src/content/en/components/charts/features/chart-legends.mdx
@@ -9,18 +9,18 @@ namespace: Infragistics.Controls.Charts
## Angular Legend Types
-{/* TODO info/example of regular Legend with options to change orientation */}
+{/*TODO info/example of regular Legend with options to change orientation*/}
-{/* TODO info/example of ItemLegend with options to change orientation */}
+{/*TODO info/example of ItemLegend with options to change orientation*/}
-{/* TODO info/example of ScaleLegend with BubbleSeries */}
+{/*TODO info/example of ScaleLegend with BubbleSeries*/}
## Angular Legend Layouts
-{/* TODO info/example of multiple Legends */}
+{/*TODO info/example of multiple Legends*/}
-{/* TODO info/example of Legend layouts: outside of plot area, inside of plot area*/}
+{/*TODO info/example of Legend layouts: outside of plot area, inside of plot area*/}
## Angular Legend Customization
-{/* TODO info/example of customizing Legend items */}
+{/*TODO info/example of customizing Legend items*/}
diff --git a/docs/angular/src/content/en/components/charts/features/chart-overlays.mdx b/docs/angular/src/content/en/components/charts/features/chart-overlays.mdx
index 0616587d68..c873d653b0 100644
--- a/docs/angular/src/content/en/components/charts/features/chart-overlays.mdx
+++ b/docs/angular/src/content/en/components/charts/features/chart-overlays.mdx
@@ -85,7 +85,6 @@ the `DataAnnotationSliceLayer`, , an
-
## Additional Resources
You can find more information about related chart types in these topics:
diff --git a/docs/angular/src/content/en/components/charts/features/chart-performance.mdx b/docs/angular/src/content/en/components/charts/features/chart-performance.mdx
index 43be1c0f77..0bf1e62984 100644
--- a/docs/angular/src/content/en/components/charts/features/chart-performance.mdx
+++ b/docs/angular/src/content/en/components/charts/features/chart-performance.mdx
@@ -58,7 +58,6 @@ Although Angular charts support rendering of multiple data sources by binding ar
-
```ts
this.CategoryChart.dataSource = FlattenDataSource.create();
this.FinancialChart.dataSource = FlattenDataSource.create();
@@ -95,7 +94,6 @@ Angular `CategoryChart` and the `FinancialChart` controls have built-in data ada
-
```ts
this.Chart.includedProperties = [ "Year", "USA", "RUS" ];
this.Chart.excludedProperties = [ "CHN", "FRN", "GER" ];
@@ -204,7 +202,6 @@ This code snippet shows how to ordinal/category x-axis in the `FinancialChart` a
-
```html
@@ -216,9 +213,6 @@ This code snippet shows how to ordinal/category x-axis in the `FinancialChart` a
-
-
-
### Axis Intervals
By default, Angular charts will automatically calculate `YAxisInterval` based on range of your data. Therefore, you should avoid setting axis interval especially to a small value to prevent rendering of too many of axis gridlines and axis labels. Also, you might want to consider increasing `YAxisInterval` property to a larger value than the automatically calculated axis interval if you do not need many axis gridlines or axis labels.
@@ -232,7 +226,6 @@ This code snippet shows how to set axis major interval in the Angular charts.
-
```html
@@ -247,9 +240,6 @@ This code snippet shows how to set axis major interval in the Angular charts.
-
-
-
### Axis Scale
Setting the `YAxisIsLogarithmic` property to false is recommended for higher performance, as fewer operations are needed than calculating axis range and values of axis labels in logarithmic scale.
@@ -263,7 +253,6 @@ This code snippet shows how to hide axis labels in the Angular charts.
-
```html
@@ -280,9 +269,6 @@ This code snippet shows how to hide axis labels in the Angular charts.
-
-
-
### Axis Labels Abbreviation
Although, the Angular charts support abbreviation of large numbers (e.g. 10,000+) displayed in axis labels when `YAxisAbbreviateLargeNumbers` is set to true. We recommend, instead pre-processing large values in your data items by dividing them a common factor and then setting `YAxisTitle` to a string that represents factor used used to abbreviate your data values.
@@ -292,7 +278,6 @@ This code snippet shows how to set axis title in the Angular charts.
-
```html
@@ -306,9 +291,6 @@ This code snippet shows how to set axis title in the Angular charts.
-
-
-
### Axis Labels Extent
At runtime, the Angular charts adjust extent of labels on y-axis based on a label with longest value. This might decrease chart performance if range of data changes and labels need to be updated often. Therefore, it is recommended to set label extent at design time in order to improve chart performance.
@@ -318,7 +300,6 @@ The following code snippet shows how to set a fixed extent for labels on y-axis
-
```html
@@ -333,9 +314,6 @@ The following code snippet shows how to set a fixed extent for labels on y-axis
-
-
-
### Axis Other Visuals
Enabling additional axis visuals (e.g. axis titles) or changing their default values might decrease performance in the Angular charts.
diff --git a/docs/angular/src/content/en/components/charts/features/chart-titiles.mdx b/docs/angular/src/content/en/components/charts/features/chart-titiles.mdx
index fa00ac82c4..79264e12f7 100644
--- a/docs/angular/src/content/en/components/charts/features/chart-titiles.mdx
+++ b/docs/angular/src/content/en/components/charts/features/chart-titiles.mdx
@@ -7,6 +7,6 @@ namespace: Infragistics.Controls.Charts
# Angular Chart Titles
-{/* TODO info/example of chart's titles and subtitle */}
+{/*TODO info/example of chart's titles and subtitle*/}
-{/* TODO info/example of axis's titles */}
+{/*TODO info/example of axis's titles*/}
diff --git a/docs/angular/src/content/en/components/charts/types/composite-chart.mdx b/docs/angular/src/content/en/components/charts/types/composite-chart.mdx
index 6061f8634a..73789614fa 100644
--- a/docs/angular/src/content/en/components/charts/types/composite-chart.mdx
+++ b/docs/angular/src/content/en/components/charts/types/composite-chart.mdx
@@ -29,7 +29,7 @@ The following example demonstrates how to create Composite Chart using `ColumnSe
- [Bar Chart](bar-chart.md)
- [Column Chart](column-chart.md)
-{/* - [Gantt Chart](gantt-chart.md) */}
+{/*- [Gantt Chart](gantt-chart.md)*/}
- [Line Chart](line-chart.md)
- [Stacked Chart](stacked-chart.md)
diff --git a/docs/angular/src/content/en/components/charts/types/donut-chart.mdx b/docs/angular/src/content/en/components/charts/types/donut-chart.mdx
index 44bb74b98c..3302c265d6 100644
--- a/docs/angular/src/content/en/components/charts/types/donut-chart.mdx
+++ b/docs/angular/src/content/en/components/charts/types/donut-chart.mdx
@@ -30,7 +30,7 @@ You can create Donut Chart using the
diff --git a/docs/angular/src/content/en/components/date-picker.mdx b/docs/angular/src/content/en/components/date-picker.mdx
index 1c880023e7..64730a8b5b 100644
--- a/docs/angular/src/content/en/components/date-picker.mdx
+++ b/docs/angular/src/content/en/components/date-picker.mdx
@@ -19,7 +19,7 @@ The Ignite UI for Angular Date Picker Component lets users pick a single date th
Below you can see a sample that demonstrates how the Angular Date Picker works when users are enabled to pick a date through a manual text input and click on the calendar icon on the left to navigate to it. See how to render it.
-{/* TODO: date picker sample with several options enabled */}
+{/*TODO: date picker sample with several options enabled*/}
diff --git a/docs/angular/src/content/en/components/drop-down.mdx b/docs/angular/src/content/en/components/drop-down.mdx
index 4cb6f6f092..12a0197c0d 100644
--- a/docs/angular/src/content/en/components/drop-down.mdx
+++ b/docs/angular/src/content/en/components/drop-down.mdx
@@ -12,7 +12,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
# Angular Drop Down Component Overview
-The Ignite UI for Angular Drop Down is a component, which displays a toggleable list of predefined values and allows users to easily select a single option item with a click. It can be quickly configured to act as a drop down menu or you can simply use it to deliver more useful visual information by grouping data. With grouping you can use both flat and hierarchical data. Drop Down component allows declarative binding, which makes it possible for you to embed additional content and links. This also leaves room for further UI customization and styling of the Angular drop down list appearance. In addition to this, it is packed with key features like keyboard dropdown navigation and virtualization.
+The Ignite UI for Angular Drop Down is a component, which displays a toggleable list of predefined values and allows users to easily select a single option item with a click. It can be quickly configured to act as a drop down menu or you can simply use it to deliver more useful visual information by grouping data. With grouping you can use both flat and hierarchical data. Drop Down component allows declarative binding, which makes it possible for you to embed additional content and links. This also leaves room for further UI customization and styling of the Angular drop down list appearance. In addition to this, it is packed with key features like keyboard dropdown navigation and virtualization.
## Angular Drop Down Example
diff --git a/docs/angular/src/content/en/components/excel-library-using-cells.mdx b/docs/angular/src/content/en/components/excel-library-using-cells.mdx
index b28016f3de..e9a61cf080 100644
--- a/docs/angular/src/content/en/components/excel-library-using-cells.mdx
+++ b/docs/angular/src/content/en/components/excel-library-using-cells.mdx
@@ -26,7 +26,6 @@ The objects in an
-
## References
The following code shows the imports needed to use the code-snippets below:
diff --git a/docs/angular/src/content/en/components/excel-library-using-worksheets.mdx b/docs/angular/src/content/en/components/excel-library-using-worksheets.mdx
index 8188ecec25..910a336ab1 100644
--- a/docs/angular/src/content/en/components/excel-library-using-worksheets.mdx
+++ b/docs/angular/src/content/en/components/excel-library-using-worksheets.mdx
@@ -26,8 +26,6 @@ The Infragistics Angular Excel Engine's .
-
In order to load and save objects, you can utilize the save method of the actual object, as well as its static `Load` method.
```ts
@@ -141,7 +132,6 @@ ExcelUtility.save(workbook, "fileName");
-
## Managing Heap
Due to the size of the Excel Library, it's recommended to disable the source map generation.
diff --git a/docs/angular/src/content/en/components/excel-utility.mdx b/docs/angular/src/content/en/components/excel-utility.mdx
index 45d110d951..1cc2c7fb4c 100644
--- a/docs/angular/src/content/en/components/excel-utility.mdx
+++ b/docs/angular/src/content/en/components/excel-utility.mdx
@@ -116,15 +116,6 @@ export class ExcelUtility {
-
-
-
-
-
-
-
-
-
## API References
diff --git a/docs/angular/src/content/en/components/general-breaking-changes-dv.mdx b/docs/angular/src/content/en/components/general-breaking-changes-dv.mdx
index f5d79cd88e..105e20e8ff 100644
--- a/docs/angular/src/content/en/components/general-breaking-changes-dv.mdx
+++ b/docs/angular/src/content/en/components/general-breaking-changes-dv.mdx
@@ -61,7 +61,7 @@ These breaking changes were introduce in version **11.2.0** of these packages an
-{/* Angular, React, WebComponents */}
+{/*Angular, React, WebComponents*/}
## Changed Import Statements
@@ -134,4 +134,4 @@ import { IgxGeographicMapComponent } from "igniteui-webcomponents-maps/ES5/igx-g
import { IgxGeographicMapModule } from "igniteui-webcomponents-maps/ES5/igx-geographic-map-module";
```
-{/* end: Angular, React, WebComponents */}
+{/*end: Angular, React, WebComponents*/}
diff --git a/docs/angular/src/content/en/components/general/getting-started.mdx b/docs/angular/src/content/en/components/general/getting-started.mdx
index 5abd2ce9be..a352de159b 100644
--- a/docs/angular/src/content/en/components/general/getting-started.mdx
+++ b/docs/angular/src/content/en/components/general/getting-started.mdx
@@ -30,7 +30,7 @@ Ignite UI for Angular is offered under a dual-license model, which allows for bo
style="color:white;background-color:#09f;text-decoration:none;font-weight:700;font-size:16px;padding: 5px 15px 5px 15px;">
DOWNLOAD NODE
-
+
@@ -38,7 +38,7 @@ Ignite UI for Angular is offered under a dual-license model, which allows for bo
style="color:white;background-color:#09f;text-decoration:none;font-weight:700;font-size:16px;padding: 5px 15px 5px 15px;">
DOWNLOAD VS CODE
-
+
diff --git a/docs/angular/src/content/en/components/geo-map-binding-data-csv.mdx b/docs/angular/src/content/en/components/geo-map-binding-data-csv.mdx
index bddfb20ed8..1495d8fca7 100644
--- a/docs/angular/src/content/en/components/geo-map-binding-data-csv.mdx
+++ b/docs/angular/src/content/en/components/geo-map-binding-data-csv.mdx
@@ -67,9 +67,6 @@ The following code loads and binds
diff --git a/docs/angular/src/content/en/components/geo-map-binding-data-json-points.mdx b/docs/angular/src/content/en/components/geo-map-binding-data-json-points.mdx
index 7576647657..187e1504f9 100644
--- a/docs/angular/src/content/en/components/geo-map-binding-data-json-points.mdx
+++ b/docs/angular/src/content/en/components/geo-map-binding-data-json-points.mdx
@@ -61,9 +61,6 @@ The following code loads and binds
diff --git a/docs/angular/src/content/en/components/geo-map-binding-data-model.mdx b/docs/angular/src/content/en/components/geo-map-binding-data-model.mdx
index 831e0caf7f..e5fabd05ed 100644
--- a/docs/angular/src/content/en/components/geo-map-binding-data-model.mdx
+++ b/docs/angular/src/content/en/components/geo-map-binding-data-model.mdx
@@ -74,9 +74,6 @@ The following code shows how to bind the
diff --git a/docs/angular/src/content/en/components/geo-map-binding-multiple-shapes.mdx b/docs/angular/src/content/en/components/geo-map-binding-multiple-shapes.mdx
index 681ae1f921..a905be7c6e 100644
--- a/docs/angular/src/content/en/components/geo-map-binding-multiple-shapes.mdx
+++ b/docs/angular/src/content/en/components/geo-map-binding-multiple-shapes.mdx
@@ -39,9 +39,6 @@ First, let's import required components and modules:
-
-
-
```ts
import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
import { IgxGeographicPolylineSeriesComponent } from 'igniteui-angular-maps';
@@ -53,7 +50,6 @@ import { IgxShapeDataSource } from 'igniteui-angular-core';
-
## Creating Series
Next, we need to create a map with a few Geographic Series that will later load different type of shapefile.
@@ -118,11 +114,6 @@ Next, we need to create a map with a few Geographic Series that will later load
-
-
-
-
-
## Loading Shapefiles
Next, in constructor of your page, add a for each shapefile that you want to display in the geographic map component.
@@ -130,7 +121,6 @@ Next, in constructor of your page, add a with of countries of the world and assign it to object.
@@ -416,7 +397,6 @@ public onPointsLoaded(sds: IgcShapeDataSource, e: any) {
-
## Map Background
Also, you might want to hide geographic imagery from the map background content if your shape files provided sufficient geographic context (e.g. shape of countries) for your application.
@@ -424,7 +404,6 @@ Also, you might want to hide geographic imagery from the map background content
-
```ts
public geoMap: IgxGeographicMapComponent;
// ...
@@ -435,9 +414,6 @@ this.geoMap.backgroundContent = {};
-
-
-
## Summary
For your convenience, all above code snippets are combined into one code block below that you can easily copy to your project.
@@ -575,12 +551,6 @@ export class MapBindingMultipleShapesComponent implements AfterViewInit {
-
-
-
-
-
-
## API References
diff --git a/docs/angular/src/content/en/components/geo-map-binding-multiple-sources.mdx b/docs/angular/src/content/en/components/geo-map-binding-multiple-sources.mdx
index 8218d77dfd..52248f2762 100644
--- a/docs/angular/src/content/en/components/geo-map-binding-multiple-sources.mdx
+++ b/docs/angular/src/content/en/components/geo-map-binding-multiple-sources.mdx
@@ -88,9 +88,6 @@ Create data sources for all geographic series that you want to display in the Ig
-
-
-
## Overlaying Flights
Create first object with flight connections between major airports and add it to the Series collection of the Ignite UI for Angular map.
@@ -110,9 +107,6 @@ Create first object with
-
-
-
## Overlaying Gridlines
Create second object with geographic gridlines and add it to the Series collection of the Ignite UI for Angular map.
@@ -133,9 +127,6 @@ Create second object with
-
-
-
## Overlaying Airports
Create object with airport points and add it to the Series collection of the geographic Ignite UI for Angular map.
@@ -156,9 +147,6 @@ Create object with airport
-
-
-
## Summary
For your convenience, all above code snippets are combined into one code block below that you can easily copy to your project.
@@ -243,8 +231,6 @@ export class MapBindingMultipleSourcesComponent implements AfterViewInit {
-
-
## API References
diff --git a/docs/angular/src/content/en/components/geo-map-binding-shp-file.mdx b/docs/angular/src/content/en/components/geo-map-binding-shp-file.mdx
index 954d89080f..420bbd31fd 100644
--- a/docs/angular/src/content/en/components/geo-map-binding-shp-file.mdx
+++ b/docs/angular/src/content/en/components/geo-map-binding-shp-file.mdx
@@ -32,8 +32,8 @@ The following table explains properties of the object’s ImportAsync method is invoked which in return performs fetching and reading the shape files and finally doing the conversion. After this operation is complete, the is populated with objects and the `ImportCompleted` event is raised in order to notify about completed process of loading and converting geo-spatial data from shape files.
@@ -43,7 +43,6 @@ The following code creates an instance of the is an example such array because it contains a list of objects.
@@ -87,9 +86,6 @@ The following code binds
-
-
-
```ts
import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core";
import { IgxShapeDataSource } from 'igniteui-angular-core';
@@ -152,12 +148,6 @@ export class MapBindingShapefilePolylinesComponent implements AfterViewInit {
-
-
-
-
-
-
## API References
diff --git a/docs/angular/src/content/en/components/geo-map-display-azure-imagery.mdx b/docs/angular/src/content/en/components/geo-map-display-azure-imagery.mdx
index 12567544a0..f2ee27cbb8 100644
--- a/docs/angular/src/content/en/components/geo-map-display-azure-imagery.mdx
+++ b/docs/angular/src/content/en/components/geo-map-display-azure-imagery.mdx
@@ -44,7 +44,6 @@ The following code snippet shows how to display geographic imagery tiles from Az
-
```ts
import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
import { IgxAzureMapsImagery } from 'igniteui-angular-maps';
@@ -61,11 +60,6 @@ this.map.backgroundContent = tileSource;
-
-
-
-
-
## Angular Overlaying Imagery from Azure Maps - Overview
When working with the , you can combine **overlays** (traffic, weather, labels) on top of a **base map style** such as eg. **Satellite**, **Road**, or **DarkGrey**. Using **TerraOverlay** with eg. **Satellite** to visualize terrain.
@@ -97,7 +91,6 @@ The following code snippet shows how to display geographic imagery tiles on top
-
```ts
export class AppComponent implements AfterViewInit {
@ViewChild('map', { static: true }) public map!: IgxGeographicMapComponent;
@@ -125,13 +118,6 @@ export class AppComponent implements AfterViewInit {
-
-
-
-
-
-
-
## Properties
The following table summarizes properties of the class:
diff --git a/docs/angular/src/content/en/components/geo-map-display-bing-imagery.mdx b/docs/angular/src/content/en/components/geo-map-display-bing-imagery.mdx
index 33ce046d49..5a023a00c7 100644
--- a/docs/angular/src/content/en/components/geo-map-display-bing-imagery.mdx
+++ b/docs/angular/src/content/en/components/geo-map-display-bing-imagery.mdx
@@ -25,7 +25,7 @@ The Angular is geographic image
## Angular Displaying Imagery from Bing Maps Example
-{/* */}
+{/**/}
@@ -47,7 +47,6 @@ The following code snippet shows how to display geographic imagery tiles from Bi
-
```ts
import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
import { IgxBingMapsMapImagery } from 'igniteui-angular-maps';
@@ -74,7 +73,6 @@ this.map.backgroundContent = tileSource;
-
## Properties
The following table summarized properties of the class:
diff --git a/docs/angular/src/content/en/components/geo-map-display-esri-imagery.mdx b/docs/angular/src/content/en/components/geo-map-display-esri-imagery.mdx
index 60ea8958db..7ba283fdd6 100644
--- a/docs/angular/src/content/en/components/geo-map-display-esri-imagery.mdx
+++ b/docs/angular/src/content/en/components/geo-map-display-esri-imagery.mdx
@@ -39,7 +39,6 @@ The following code snippet shows how to display Angular geographic imagery tiles
-
```ts
import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
import { IgxArcGISOnlineMapImagery } from 'igniteui-angular-maps';
@@ -55,11 +54,6 @@ this.geoMap.backgroundContent = tileSource;
-
-
-
-
-
## Esri Utility
Alternatively, you can use the [EsriUtility](geo-map-resources-esri.md) which defines all styles provided by Esri imagery servers.
@@ -81,12 +75,6 @@ this.geoMap.backgroundContent = tileSource;
-
-
-
-
-
-
## API References
diff --git a/docs/angular/src/content/en/components/geo-map-display-heat-imagery.mdx b/docs/angular/src/content/en/components/geo-map-display-heat-imagery.mdx
index 2222ff025b..2b2821df40 100644
--- a/docs/angular/src/content/en/components/geo-map-display-heat-imagery.mdx
+++ b/docs/angular/src/content/en/components/geo-map-display-heat-imagery.mdx
@@ -55,20 +55,6 @@ export default {} as typeof Worker & (new () => Worker);
-
-
-
-
-
-
-
-
-
-
-
-
-
-
```ts
import { IgxHeatTileGenerator } from 'igniteui-angular-core';
import { IgxShapeDataSource } from 'igniteui-angular-core';
@@ -79,9 +65,6 @@ import { IgxTileGeneratorMapImagery } from 'igniteui-angular-maps';
-
-
-
## Creating Heatmap
The following code snippet shows how to display a population based heat-map in the Ignite UI for Angular map component:
@@ -89,9 +72,6 @@ The following code snippet shows how to display a population based heat-map in t
-
-
-
```html
@@ -101,7 +81,6 @@ The following code snippet shows how to display a population based heat-map in t
-
```ts
@ViewChild("map", { static: true })
public map: IgxGeographicMapComponent;
@@ -169,15 +148,6 @@ constructor() {
-
-
-
-
-
-
-
-
-
## API References
diff --git a/docs/angular/src/content/en/components/geo-map-display-imagery-types.mdx b/docs/angular/src/content/en/components/geo-map-display-imagery-types.mdx
index 1c1c87d20e..99bc3cded5 100644
--- a/docs/angular/src/content/en/components/geo-map-display-imagery-types.mdx
+++ b/docs/angular/src/content/en/components/geo-map-display-imagery-types.mdx
@@ -22,7 +22,7 @@ The following table summarizes supported and custom geographic imagery sources f
| Open Street Maps | Provides geographic imagery from Open Street Maps service with an option to display a road map style only in one coloring theme. |
| Bing Maps |Provides geographic imagery from Bing Maps service with configurable options to display the following map styles:
Satellite Map Style
Satellite Map with Labels Style
Road Map Style
|
-{/* | Map Quest |Provides custom geographic imagery from Map Quest service with configurable options to display the following map styles:
Satellite Map Style
Road Map Style
*/}
+{/*| Map Quest |Provides custom geographic imagery from Map Quest service with configurable options to display the following map styles:
Satellite Map Style
Road Map Style
*/}
## Map Background Content
The map component's property is used to display all supported types of geographic imagery sources. For each imagery source, there is an imagery class used for rendering corresponding geographic imagery tiles.
@@ -34,7 +34,7 @@ The following table summarizes imagery classes provided by the map component.
||Represents the base control for all imagery classes that display all types of supported geographic imagery tiles. This class can be extended for the purpose of implementing support for geographic imagery tiles from other geographic imagery sources such as Map Quest mapping service.|
||Represents the multi-scale imagery control for displaying geographic imagery tiles from the Open Street Maps service.|
-{/* |`BingMapsMapImagery`|Represents the multi-scale imagery control for displaying geographic imagery tiles from the Bing Maps service.| */}
+{/*|`BingMapsMapImagery`|Represents the multi-scale imagery control for displaying geographic imagery tiles from the Bing Maps service.|*/}
By default, the property is set to object and the map component displays geographic imagery tiles from the Open Street Maps service. In order to display different types of geographic imagery tiles, the map component must be re-configured.
diff --git a/docs/angular/src/content/en/components/geo-map-display-osm-imagery.mdx b/docs/angular/src/content/en/components/geo-map-display-osm-imagery.mdx
index 0d961c4fad..fb312f008e 100644
--- a/docs/angular/src/content/en/components/geo-map-display-osm-imagery.mdx
+++ b/docs/angular/src/content/en/components/geo-map-display-osm-imagery.mdx
@@ -40,7 +40,6 @@ This code example explicitly sets
diff --git a/docs/angular/src/content/en/components/geo-map-navigation.mdx b/docs/angular/src/content/en/components/geo-map-navigation.mdx
index f0164b5002..2ce870e30c 100644
--- a/docs/angular/src/content/en/components/geo-map-navigation.mdx
+++ b/docs/angular/src/content/en/components/geo-map-navigation.mdx
@@ -34,7 +34,6 @@ This code snippet shows how navigate the map using geographic coordinates:
-
## Window Coordinates
Also, you can navigate map content within window rectangle bound by these relative coordinates:
@@ -46,7 +45,6 @@ This code snippet shows how navigate the map using relative window coordinates:
-
## Properties
The following table summarizes properties that can be used in navigation of the control:
diff --git a/docs/angular/src/content/en/components/geo-map-resources-shape-styling-utility.mdx b/docs/angular/src/content/en/components/geo-map-resources-shape-styling-utility.mdx
index 917c890f1b..45a24fa595 100644
--- a/docs/angular/src/content/en/components/geo-map-resources-shape-styling-utility.mdx
+++ b/docs/angular/src/content/en/components/geo-map-resources-shape-styling-utility.mdx
@@ -24,9 +24,6 @@ import { Style } from 'igniteui-angular-core';
-
-
-
## Utility Implementation
```ts
diff --git a/docs/angular/src/content/en/components/geo-map-shape-styling.mdx b/docs/angular/src/content/en/components/geo-map-shape-styling.mdx
index 3b61440afe..36875592b8 100644
--- a/docs/angular/src/content/en/components/geo-map-shape-styling.mdx
+++ b/docs/angular/src/content/en/components/geo-map-shape-styling.mdx
@@ -39,9 +39,6 @@ import { IgxShapefileRecord } from 'igniteui-angular-core';
-
-
-
Note that the following code examples are using the [Shape Styling Utility](geo-map-resources-shape-styling-utility.md) file that provides four different ways of styling shapes:
- [Shape Comparison Styling](#shape-comparison-styling)
- [Shape Random Styling](#shape-random-styling)
@@ -78,9 +75,6 @@ public onStylingShape(s: IgxGeographicShapeSeries, args: IgxStyleShapeEventArgs)
-
-
-
## Shape Scale Styling
This code snippet creates instances of **ShapeScaleStyling** that will assign fill colors to shape of countries based on population scaled on logarithmic scale.
@@ -115,9 +109,6 @@ public onStylingShape(s: IgxGeographicShapeSeries, args: IgxStyleShapeEventArgs)
-
-
-
## Shape Range Styling
This code snippet creates instances of **ShapeRangeStyling** that will assign colors to shape of countries based on ranges of population.
@@ -153,9 +144,6 @@ public onStylingShape(s: IgxGeographicShapeSeries, args: IgxStyleShapeEventArgs)
-
-
-
## Shape Comparison Styling
This code snippet creates instances of **ShapeComparisonStyling** that will assign colors to countries based on their region name in the world.
@@ -206,10 +194,6 @@ public onStylingShape(s: IgxGeographicShapeSeries, args: IgxStyleShapeEventArgs)
-
-
-
-
## API References
diff --git a/docs/angular/src/content/en/components/geo-map-type-scatter-area-series.mdx b/docs/angular/src/content/en/components/geo-map-type-scatter-area-series.mdx
index 40c8b05f35..3bf0f1f642 100644
--- a/docs/angular/src/content/en/components/geo-map-type-scatter-area-series.mdx
+++ b/docs/angular/src/content/en/components/geo-map-type-scatter-area-series.mdx
@@ -62,15 +62,6 @@ The following code shows how to bind the
diff --git a/docs/angular/src/content/en/components/geo-map-type-scatter-bubble-series.mdx b/docs/angular/src/content/en/components/geo-map-type-scatter-bubble-series.mdx
index 1cbab4bd2d..629c7ec6e4 100644
--- a/docs/angular/src/content/en/components/geo-map-type-scatter-bubble-series.mdx
+++ b/docs/angular/src/content/en/components/geo-map-type-scatter-bubble-series.mdx
@@ -45,16 +45,6 @@ The following table summarizes the GeographicHighDensityScatterSeries series pro
-
-
-
-
-
-
-
-
-
-
```html
diff --git a/docs/angular/src/content/en/components/geo-map-type-scatter-contour-series.mdx b/docs/angular/src/content/en/components/geo-map-type-scatter-contour-series.mdx
index 7349c4c370..003d75130e 100644
--- a/docs/angular/src/content/en/components/geo-map-type-scatter-contour-series.mdx
+++ b/docs/angular/src/content/en/components/geo-map-type-scatter-contour-series.mdx
@@ -61,14 +61,6 @@ The following code shows how to bind the
diff --git a/docs/angular/src/content/en/components/geo-map-type-scatter-density-series.mdx b/docs/angular/src/content/en/components/geo-map-type-scatter-density-series.mdx
index 67e02d9c40..7e1499440d 100644
--- a/docs/angular/src/content/en/components/geo-map-type-scatter-density-series.mdx
+++ b/docs/angular/src/content/en/components/geo-map-type-scatter-density-series.mdx
@@ -56,15 +56,6 @@ The following code demonstrates how set the `HeatMinimumColor` and `HeatMaximumC
-
-
-
-
-
-
-
-
-
```html
diff --git a/docs/angular/src/content/en/components/geo-map-type-shape-polygon-series.mdx b/docs/angular/src/content/en/components/geo-map-type-shape-polygon-series.mdx
index f2806f07fa..e5608e03b5 100644
--- a/docs/angular/src/content/en/components/geo-map-type-shape-polygon-series.mdx
+++ b/docs/angular/src/content/en/components/geo-map-type-shape-polygon-series.mdx
@@ -34,15 +34,6 @@ The following code demonstrates how to bind the
diff --git a/docs/angular/src/content/en/components/geo-map-type-shape-polyline-series.mdx b/docs/angular/src/content/en/components/geo-map-type-shape-polyline-series.mdx
index 50ac2036e3..85867f8971 100644
--- a/docs/angular/src/content/en/components/geo-map-type-shape-polyline-series.mdx
+++ b/docs/angular/src/content/en/components/geo-map-type-shape-polyline-series.mdx
@@ -34,15 +34,6 @@ The following code shows how to bind the
@@ -69,7 +60,6 @@ The following code shows how to bind the
diff --git a/docs/angular/src/content/en/components/geo-map.mdx b/docs/angular/src/content/en/components/geo-map.mdx
index 711af24380..47570292ba 100644
--- a/docs/angular/src/content/en/components/geo-map.mdx
+++ b/docs/angular/src/content/en/components/geo-map.mdx
@@ -38,7 +38,6 @@ For more details please visit:
-
## Dependencies
The Angular geographic map component, you need to first install these packages:
@@ -59,7 +58,6 @@ The requires the following modules,
-
```ts
// app.module.ts
import { IgxGeographicMapModule } from 'igniteui-angular-maps';
@@ -79,7 +77,6 @@ export class AppModule {}
-
```ts
import { AfterViewInit, Component, ViewChild } from "@angular/core";
import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
@@ -106,11 +103,6 @@ export class MapOverviewComponent implements AfterViewInit {
-
-
-
-
-
## Usage
@@ -132,11 +124,6 @@ Now that the map module is imported, next step is to create geographic map. The
-
-
-
-
-
## Additional Resources
@@ -144,7 +131,7 @@ Now that the map module is imported, next step is to create geographic map. The
You can find more information about related Angular map features in these topics:
- [Geographic Map Navigation](geo-map-navigation.md)
-{/* - [Geographic Map Imagery](geo-map-display-imagery-types.md) */}
+{/*- [Geographic Map Imagery](geo-map-display-imagery-types.md)*/}
- [Using Scatter Symbol Series](geo-map-type-scatter-symbol-series.md)
- [Using Scatter Proportional Series](geo-map-type-scatter-bubble-series.md)
- [Using Scatter Contour Series](geo-map-type-scatter-contour-series.md)
diff --git a/docs/angular/src/content/en/components/grid-lite/binding.mdx b/docs/angular/src/content/en/components/grid-lite/binding.mdx
index d70cbb9006..9f51b13e02 100644
--- a/docs/angular/src/content/en/components/grid-lite/binding.mdx
+++ b/docs/angular/src/content/en/components/grid-lite/binding.mdx
@@ -65,8 +65,8 @@ the column collection is reset, and a new data source is bound to the grid.
{/* TODO ## API References
-* `{ComponentName}`
-* `Column`
+- `{ComponentName}`
+- `Column`
*/}
diff --git a/docs/angular/src/content/en/components/grid-lite/cell-template.mdx b/docs/angular/src/content/en/components/grid-lite/cell-template.mdx
index 89e520f92e..67238847f8 100644
--- a/docs/angular/src/content/en/components/grid-lite/cell-template.mdx
+++ b/docs/angular/src/content/en/components/grid-lite/cell-template.mdx
@@ -55,8 +55,8 @@ protected formatCurrency = (value: number) => {
```
You can combine values different fields from the data source as well.
-{/* TODO:
-Refer to the API documentation for **`GridLiteCellContext`** for more information. */}
+{/*TODO:
+Refer to the API documentation for **`GridLiteCellContext`** for more information.*/}
```typescript
public formatter = new Intl.NumberFormat('en-150', {
@@ -150,8 +150,8 @@ export interface IgxGridLiteCellTemplateContext {
{/* TODO ## API References
-* `{ComponentName}`
-* `Column`
+- `{ComponentName}`
+- `Column`
*/}
diff --git a/docs/angular/src/content/en/components/grid-lite/column-configuration.mdx b/docs/angular/src/content/en/components/grid-lite/column-configuration.mdx
index 99a1983804..70d670f329 100644
--- a/docs/angular/src/content/en/components/grid-lite/column-configuration.mdx
+++ b/docs/angular/src/content/en/components/grid-lite/column-configuration.mdx
@@ -103,8 +103,8 @@ In the sample below you can try out the different column properties and how they
{/* TODO ## API References
-* `{ComponentName}`
-* `Column`
+- `{ComponentName}`
+- `Column`
*/}
diff --git a/docs/angular/src/content/en/components/grid-lite/filtering.mdx b/docs/angular/src/content/en/components/grid-lite/filtering.mdx
index ac6d9c497b..dfd50607ff 100644
--- a/docs/angular/src/content/en/components/grid-lite/filtering.mdx
+++ b/docs/angular/src/content/en/components/grid-lite/filtering.mdx
@@ -187,8 +187,8 @@ The following example mocks remote filter operation, reflecting the REST endpoin
{/* TODO ## API References
## API References
-* `{ComponentName}`
-* `Column`
+- `{ComponentName}`
+- `Column`
*/}
## Additional Resources
diff --git a/docs/angular/src/content/en/components/grid-lite/header-template.mdx b/docs/angular/src/content/en/components/grid-lite/header-template.mdx
index 4a8a855c6f..5ce2a237ea 100644
--- a/docs/angular/src/content/en/components/grid-lite/header-template.mdx
+++ b/docs/angular/src/content/en/components/grid-lite/header-template.mdx
@@ -64,8 +64,8 @@ import { IgxGridLiteComponent, IgxGridLiteColumnComponent, IgxGridLiteCellTempla
{/* TODO ## API References
-* `{ComponentName}`
-* `Column`
+- `{ComponentName}`
+- `Column`
*/}
diff --git a/docs/angular/src/content/en/components/grid-lite/sorting.mdx b/docs/angular/src/content/en/components/grid-lite/sorting.mdx
index dc69508dde..513221c365 100644
--- a/docs/angular/src/content/en/components/grid-lite/sorting.mdx
+++ b/docs/angular/src/content/en/components/grid-lite/sorting.mdx
@@ -215,8 +215,8 @@ The following example mocks remote sorting operation, reflecting the REST endpoi
{/* TODO ## API References
-* `{ComponentName}`
-* `Column`
+- `{ComponentName}`
+- `Column`
*/}
diff --git a/docs/angular/src/content/en/components/grid-lite/theming.mdx b/docs/angular/src/content/en/components/grid-lite/theming.mdx
index 3d8768cf2c..3375bfb9a5 100644
--- a/docs/angular/src/content/en/components/grid-lite/theming.mdx
+++ b/docs/angular/src/content/en/components/grid-lite/theming.mdx
@@ -89,8 +89,8 @@ Here is an example showcasing the custom theming from above.
{/* TODO ## API References
-* `{ComponentName}`
-* `Column`
+- `{ComponentName}`
+- `Column`
*/}
## Additional Resources
diff --git a/docs/angular/src/content/en/components/grids-and-lists.mdx b/docs/angular/src/content/en/components/grids-and-lists.mdx
index 72130cf2bf..9bc32e7c32 100644
--- a/docs/angular/src/content/en/components/grids-and-lists.mdx
+++ b/docs/angular/src/content/en/components/grids-and-lists.mdx
@@ -268,11 +268,11 @@ Seamlessly scroll through unlimited rows and columns in your Angular grid, with
-
+
@@ -392,7 +392,7 @@ Full support for exporting data grids to XLSX, XLS, TSV or CSV. The Ignite UI fo
Ignite UI for Angular Supported Browsers
-
+
The Angular Data Grid is supported on all modern web browsers, including:
@@ -404,12 +404,12 @@ Full support for exporting data grids to XLSX, XLS, TSV or CSV. The Ignite UI fo
Safari
Internet Explorer 11 with polyfills
-
+
Ignite UI for Angular Support Options
-
+
There are multiple options to get access to our award-winning support at Infragistics for the Angular product.
@@ -421,7 +421,7 @@ There are multiple options to get access to our award-winning support at Infragi
@@ -471,9 +471,9 @@ What is the Pricing for the Infragistics Ignite UI for Angular Data Grid?
If you are developing applications on multiple platforms, consider our complete app development package, Infragistics Ultimate, which include desktop platforms like WPF and Windows Forms, plus all modern web toolsets for Angular, Web Components, ASP.NET MVC and ASP.NET Core.
-
+
-
+
@@ -485,9 +485,9 @@ Can I purchase the Infragistics Ignite UI for Angular Data Grid control separate
No, you cannot purchase the Angular Data Grid separately. It is part of a the Ignite UI for Angular product, which includes dozens of UI controls and components, plus over 60 charts, including Angular Financial Charting. If you are interested in other modern web platforms like Angular, ASP.NET MVC, Web Components or ASP.NET Blazor, check out our Ignite UI product bundle, which gives you every web platform for only $100 more on your subscription. That is hundreds of controls, components, and data visualizations for a very low price.
-
+
-
+
@@ -499,8 +499,8 @@ How do I Install Angular and the Infragistics Ignite UI for Angular Data Grid co
To get started with the Angular Data Grid, follow the steps in the [getting started guide](/general/getting-started). We also maintain a library of sample applications, which are designed to not only inspire but are best practices guides for Angular development.
-
+
-
+
diff --git a/docs/angular/src/content/en/components/icon-button.mdx b/docs/angular/src/content/en/components/icon-button.mdx
index c66ffa0acb..e332d2990f 100644
--- a/docs/angular/src/content/en/components/icon-button.mdx
+++ b/docs/angular/src/content/en/components/icon-button.mdx
@@ -389,7 +389,7 @@ When you modify a primary property, all related dependent properties are updated
-
+
diff --git a/docs/angular/src/content/en/components/input-group.mdx b/docs/angular/src/content/en/components/input-group.mdx
index 9de9d3f770..d2e21eed64 100644
--- a/docs/angular/src/content/en/components/input-group.mdx
+++ b/docs/angular/src/content/en/components/input-group.mdx
@@ -441,7 +441,7 @@ When you modify a primary property, all related dependent properties are updated
- {/* Theme Switcher Radios and Labels */}
+ {/*Theme Switcher Radios and Labels*/}
diff --git a/docs/angular/src/content/en/components/inputs/color-editor.mdx b/docs/angular/src/content/en/components/inputs/color-editor.mdx
index a9d388e38e..761a18d914 100644
--- a/docs/angular/src/content/en/components/inputs/color-editor.mdx
+++ b/docs/angular/src/content/en/components/inputs/color-editor.mdx
@@ -36,15 +36,6 @@ Before using the , you need to register the follow
-
-
-
-
-
-
-
-
-
## Usage
The simplest way to start using the is as follows:
@@ -52,7 +43,6 @@ The simplest way to start using the is as follows
-
```html
is as follows
-
-
-
-
-
-
-
-
-
## Binding to events
The Color Editor component raises the following events:
@@ -97,11 +78,6 @@ public onValueChanged = (e: any) => {
-
-
-
-
-
diff --git a/docs/angular/src/content/en/components/interactivity/accessibility-compliance.mdx b/docs/angular/src/content/en/components/interactivity/accessibility-compliance.mdx
index 25005af2bc..188a1760fd 100644
--- a/docs/angular/src/content/en/components/interactivity/accessibility-compliance.mdx
+++ b/docs/angular/src/content/en/components/interactivity/accessibility-compliance.mdx
@@ -35,11 +35,11 @@ The matrix below provides a high-level outline of the accessibility support prov
|**Component/Principle**| (a) |(b) |(c) |(d) |(e) |(f) |(g) |(h) |(i) |(j) |(k) |(l) |(m) |(n) |(o) |(p) |
|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|
-|__Grids__|||||||||||||||||
+|**Grids**|||||||||||||||||
| - Grid||||||||||*|||||||
| - HierarchicalGrid||||||||||*|||||||
| - TreeGrid||||||||||*|||||||
-|__Other__||||||||||*|||||||
+|**Other**||||||||||*|||||||
| - Avatar|||||||||||||||||
| - Badge|||||||||||||||||
| - Bottom navigation||||||||||*|||||||
@@ -114,11 +114,11 @@ The table above is relevant only to the **Default theme** of Ignite UI for Angul
|**Component/Guideline**|1.1 |1.2 |1.3 |1.4 |2.1 |2.2 |2.3 |2.4 |2.5 |3.1 |3.2 |3.3 |4.1 |
|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|
-|__Grids__||||||||||||||
+|**Grids**||||||||||||||
| - Grid|||||||*||||*|||
| - HierarchicalGrid|||||||*||||*|||
| - TreeGrid|||||||*||||*|||
-|__Other__|||||||*|||||||
+|**Other**|||||||*|||||||
| - Avatar|||||||||||*|||
| - Badge|||||||||||*|||
| - Banner||||||*|*||||*|||
diff --git a/docs/angular/src/content/en/components/linear-gauge.mdx b/docs/angular/src/content/en/components/linear-gauge.mdx
index 48a85c18fa..a5fe5a9135 100644
--- a/docs/angular/src/content/en/components/linear-gauge.mdx
+++ b/docs/angular/src/content/en/components/linear-gauge.mdx
@@ -28,7 +28,6 @@ The following sample demonstrates how setting multiple properties on the same requires the following modules:
-
-
```ts
// app.module.ts
import { IgxLinearGaugeModule } from 'igniteui-angular-gauges';
@@ -67,10 +64,6 @@ export class AppModule {}
-
-
-
-
## Usage
@@ -103,11 +96,6 @@ The following code demonstrates how create a linear gauge containing a needle an
-
-
-
-
-
## Needle
@@ -142,12 +130,6 @@ This is the primary measure displayed by the linear gauge component and is visua
-
-
-
-
-
-
@@ -180,11 +162,6 @@ The linear gauge can be modified to show a second needle. This will make the mai
-
-
-
-
-
@@ -217,12 +194,6 @@ The ranges are visual elements that highlight a specified range of values on a s
-
-
-
-
-
-
@@ -260,11 +231,6 @@ Minor tick marks – The minor tick marks represent helper tick marks, which mig
-
-
-
-
-
@@ -292,12 +258,6 @@ The labels indicate the measures on the scale.
-
-
-
-
-
-
@@ -324,12 +284,6 @@ The backing element represents background and border of the linear gauge compone
-
-
-
-
-
-
@@ -359,12 +313,6 @@ The scale is a visual element that highlights the full range of values in the li
-
-
-
-
-
-
@@ -451,11 +399,6 @@ For your convenience, all above code snippets are combined into one code block b
-
-
-
-
-
diff --git a/docs/angular/src/content/en/components/list.mdx b/docs/angular/src/content/en/components/list.mdx
index 5e431f0520..4ff4b0e206 100644
--- a/docs/angular/src/content/en/components/list.mdx
+++ b/docs/angular/src/content/en/components/list.mdx
@@ -608,7 +608,7 @@ When you modify a primary property, all related dependent properties are automat
- {/* group for background */}
+ {/*group for background*/}
@@ -624,7 +624,7 @@ When you modify a primary property, all related dependent properties are automat
- {/* group for header-background */}
+ {/*group for header-background*/}
@@ -635,7 +635,7 @@ When you modify a primary property, all related dependent properties are automat
- {/* group for item-background */}
+ {/*group for item-background*/}
@@ -686,7 +686,7 @@ When you modify a primary property, all related dependent properties are automat
- {/* group for item-background-hover */}
+ {/*group for item-background-hover*/}
@@ -722,7 +722,7 @@ When you modify a primary property, all related dependent properties are automat
- {/* group for item-background-active */}
+ {/*group for item-background-active*/}
@@ -758,7 +758,7 @@ When you modify a primary property, all related dependent properties are automat
- {/* group for item-background-selected */}
+ {/*group for item-background-selected*/}
diff --git a/docs/angular/src/content/en/components/menus/toolbar.mdx b/docs/angular/src/content/en/components/menus/toolbar.mdx
index 1281093ab6..b2d1eedf2f 100644
--- a/docs/angular/src/content/en/components/menus/toolbar.mdx
+++ b/docs/angular/src/content/en/components/menus/toolbar.mdx
@@ -58,7 +58,6 @@ export class AppModule {}
-
```ts
import { IgxToolbarModule } from 'igniteui-react-layouts';
import { IgrDataChartToolbarModule, IgrDataChartCoreModule, IgrDataChartCategoryModule, IgrDataChartAnnotationModule, IgrDataChartInteractivityModule, IgrDataChartCategoryTrendLineModule } from 'igniteui-react-charts';
@@ -75,13 +74,6 @@ IgrDataChartCategoryTrendLineModule.register();
-
-
-
-
-
-
-
## Usage
### Tool Actions
@@ -113,7 +105,6 @@ The Angular Toolbar contains a items and menus become available when the is linked with the Toolbar. Here is a list of the built-in Angular `DataChart` Tool Actions and their associated `OverlayId`:
Zooming Actions
@@ -233,7 +219,6 @@ public toolbarCustomIconOnViewInit(): void {
-
### Vertical Orientation
By default the Angular Toolbar is shown horizontally, but it also has the ability to shown vertically by setting the property.
@@ -247,11 +232,6 @@ By default the Angular Toolbar is shown horizontally, but it also has the abilit
-
-
-
-
-
The following example demonstrates the vertical orientation of the Angular Toolbar.
@@ -278,11 +258,6 @@ You can add a custom color editor tool to the the Angular Toolbar, which will al
-
-
-
-
-
The following example demonstrates styling the Angular Data Chart series brush with the Color Editor tool.
@@ -301,12 +276,7 @@ The icon component can be styled by using it's `BaseTheme` property directly to
-
-
-
-
-
-{/* The following example demonstrates the various theme options that can be applied.
+{/*The following example demonstrates the various theme options that can be applied.
*/}
diff --git a/docs/angular/src/content/en/components/multi-column-combobox.mdx b/docs/angular/src/content/en/components/multi-column-combobox.mdx
index 4beb19719f..c60f4b1db9 100644
--- a/docs/angular/src/content/en/components/multi-column-combobox.mdx
+++ b/docs/angular/src/content/en/components/multi-column-combobox.mdx
@@ -22,7 +22,7 @@ The Multi-Column Combo Box automatically generates columns for properties on the
-{/* Angular, React, WebComponents */}
+{/*Angular, React, WebComponents*/}
## Dependencies
@@ -33,7 +33,7 @@ npm install --save igniteui-angular-core
npm install --save igniteui-angular-inputs
-{/* end: Angular, React, WebComponents */}
+{/*end: Angular, React, WebComponents*/}
## Required Modules
diff --git a/docs/angular/src/content/en/components/pie-chart.mdx b/docs/angular/src/content/en/components/pie-chart.mdx
index fedc6789e2..1fb640a5a5 100644
--- a/docs/angular/src/content/en/components/pie-chart.mdx
+++ b/docs/angular/src/content/en/components/pie-chart.mdx
@@ -21,7 +21,7 @@ This control is used for representing categorical data. It is most effective whe
-{/* Angular, React, WebComponents */}
+{/*Angular, React, WebComponents*/}
## Dependencies
@@ -32,7 +32,7 @@ npm install --save igniteui-angular-core
npm install --save igniteui-angular-charts
-{/* end: Angular, React, WebComponents */}
+{/*end: Angular, React, WebComponents*/}
## Required Modules
diff --git a/docs/angular/src/content/en/components/radial-gauge.mdx b/docs/angular/src/content/en/components/radial-gauge.mdx
index eaa0abb374..1d1968ec05 100644
--- a/docs/angular/src/content/en/components/radial-gauge.mdx
+++ b/docs/angular/src/content/en/components/radial-gauge.mdx
@@ -29,7 +29,6 @@ The following sample demonstrates how setting multiple properties on the same requires the following modules:
@@ -53,8 +48,6 @@ The requires the following modules:
-
-
```ts
// app.module.ts
import { IgxRadialGaugeModule } from 'igniteui-angular-gauges';
@@ -72,10 +65,6 @@ export class AppModule {}
-
-
-
-
@@ -109,11 +98,6 @@ The following code demonstrates how create a radial gauge containing a needle an
-
-
-
-
-
## Backing
@@ -146,12 +130,6 @@ The backing can be circular or fitted. A circular shape creates a 360 degree cir
-
-
-
-
-
-
@@ -181,12 +159,6 @@ The scale is visual element that highlights full range of values in the gauge wh
-
-
-
-
-
-
@@ -214,12 +186,6 @@ Each of these labels for the needle have various styling attributes you can appl
-
-
-
-
-
-
@@ -241,11 +207,6 @@ If the highlight needle is shown, as explained below, then custom text can be sh
-
-
-
-
-
## Optical Scaling
The radial gauge's labels and titles can change it's scaling. To enable this, first set `OpticalScalingEnabled` to true. Then you can set `OpticalScalingSize` which manages the size at which labels have 100% optical scaling. Labels will have larger fonts when gauge's size is larger. For example, labels will have a 200% larger font size when this property is set to 500 and the gauge px size is doubled to eg. 1000.
@@ -279,12 +240,6 @@ Tick marks are thin lines radiating from the center of the radial gauge. There a
-
-
-
-
-
-
@@ -317,12 +272,6 @@ A range highlights a set of continuous values bound by a specified `MinimumValue
-
-
-
-
-
-
@@ -361,11 +310,6 @@ You can enable an interactive mode of the gauge (using `IsNeedleDraggingEnabled`
-
-
-
-
-
@@ -393,11 +337,6 @@ The radial gauge can be modified to show a second needle. This will make the mai
-
-
-
-
-
@@ -478,12 +417,6 @@ For your convenience, all above code snippets are combined into one code block b
-
-
-
-
-
-
## API References
diff --git a/docs/angular/src/content/en/components/radio-button.mdx b/docs/angular/src/content/en/components/radio-button.mdx
index d660fb2d43..cf44ca1301 100644
--- a/docs/angular/src/content/en/components/radio-button.mdx
+++ b/docs/angular/src/content/en/components/radio-button.mdx
@@ -270,7 +270,7 @@ At the end your radio button should look like this:
## Radio Group
-The Ignite UI for Angular Radio Group directive provides a grouping container that allows better control over the child radio components and supports template-driven and reactive forms.
+The Ignite UI for Angular Radio Group directive provides a grouping container that allows better control over the child radio components and supports template-driven and reactive forms.
### Demo
diff --git a/docs/angular/src/content/en/components/sparkline.mdx b/docs/angular/src/content/en/components/sparkline.mdx
index f332826de2..0cb702531d 100644
--- a/docs/angular/src/content/en/components/sparkline.mdx
+++ b/docs/angular/src/content/en/components/sparkline.mdx
@@ -24,7 +24,7 @@ The sparkline control has several visual elements and corresponding features tha
-{/* Angular, React, WebComponents */}
+{/*Angular, React, WebComponents*/}
## Dependencies
@@ -35,7 +35,7 @@ npm install --save igniteui-angular-core
npm install --save igniteui-angular-charts
-{/* end: Angular, React, WebComponents */}
+{/*end: Angular, React, WebComponents*/}
The Angular sparkline component requires the import of the following modules:
diff --git a/docs/angular/src/content/en/components/spreadsheet-chart-adapter.mdx b/docs/angular/src/content/en/components/spreadsheet-chart-adapter.mdx
index 50d438d1bc..7ac0067f14 100644
--- a/docs/angular/src/content/en/components/spreadsheet-chart-adapter.mdx
+++ b/docs/angular/src/content/en/components/spreadsheet-chart-adapter.mdx
@@ -105,9 +105,6 @@ import { WorksheetCell } from 'igniteui-angular-excel';
-
-
-
## Code Snippet
The following code snippet demonstrates how to add charts to the currently viewed worksheet in the control:
diff --git a/docs/angular/src/content/en/components/spreadsheet-clipboard.mdx b/docs/angular/src/content/en/components/spreadsheet-clipboard.mdx
index 9b9ebb0393..c878ac43bb 100644
--- a/docs/angular/src/content/en/components/spreadsheet-clipboard.mdx
+++ b/docs/angular/src/content/en/components/spreadsheet-clipboard.mdx
@@ -37,9 +37,6 @@ import { SpreadsheetAction } from 'igniteui-angular-spreadsheet';
-
-
-
diff --git a/docs/angular/src/content/en/components/spreadsheet-commands.mdx b/docs/angular/src/content/en/components/spreadsheet-commands.mdx
index 176a967634..54608b3cfe 100644
--- a/docs/angular/src/content/en/components/spreadsheet-commands.mdx
+++ b/docs/angular/src/content/en/components/spreadsheet-commands.mdx
@@ -37,9 +37,6 @@ import { SpreadsheetAction } from 'igniteui-angular-spreadsheet';
-
-
-
@@ -67,10 +64,6 @@ public zoomOut(): void {
-
-
-
-
## API References
diff --git a/docs/angular/src/content/en/components/spreadsheet-conditional-formatting.mdx b/docs/angular/src/content/en/components/spreadsheet-conditional-formatting.mdx
index 8ede4f25d1..11b6bcaea0 100644
--- a/docs/angular/src/content/en/components/spreadsheet-conditional-formatting.mdx
+++ b/docs/angular/src/content/en/components/spreadsheet-conditional-formatting.mdx
@@ -73,7 +73,3 @@ import { WorkbookColorInfo } from 'igniteui-angular-excel';
-
-
-
-
diff --git a/docs/angular/src/content/en/components/spreadsheet-configuring.mdx b/docs/angular/src/content/en/components/spreadsheet-configuring.mdx
index 751c2c2e36..2e63767d44 100644
--- a/docs/angular/src/content/en/components/spreadsheet-configuring.mdx
+++ b/docs/angular/src/content/en/components/spreadsheet-configuring.mdx
@@ -43,13 +43,6 @@ The following code snippets demonstrate the above:
-
-
-
-
-
-
-
```ts
this.spreadsheet.isEnterKeyNavigationEnabled = true;
this.spreadsheet.enterKeyNavigationDirection = SpreadsheetEnterKeyNavigationDirection.Left;
@@ -70,9 +63,6 @@ The following code snippets demonstrate the above:
-
-
-
```ts
this.spreadsheet.isFormulaBarVisible = true;
```
@@ -92,9 +82,6 @@ The following code snippets demonstrate the above:
-
-
-
```ts
this.spreadsheet.areGridlinesVisible = true;
```
@@ -114,9 +101,6 @@ The following code snippets demonstrate the above:
-
-
-
```ts
this.spreadsheet.areHeadersVisible = false;
```
@@ -140,9 +124,6 @@ The following code snippets demonstrate the above, in that the `Spreadsheet` wil
-
-
-
```ts
this.spreadsheet.isInEndMode = true;
```
@@ -179,13 +160,6 @@ The following code snippets demonstrate configuration of the selection mode:
-
-
-
-
-
-
-
```ts
this.spreadsheet.selectionMode = SpreadsheetCellSelectionMode.ExtendSelection;
```
@@ -231,9 +205,6 @@ The following code snippets show how to configure the spreadsheet's zoom level:
-
-
-
```ts
this.spreadsheet.zoomLevel = 200;
```
diff --git a/docs/angular/src/content/en/components/spreadsheet-data-validation.mdx b/docs/angular/src/content/en/components/spreadsheet-data-validation.mdx
index b34d1c9d2b..cf922841b7 100644
--- a/docs/angular/src/content/en/components/spreadsheet-data-validation.mdx
+++ b/docs/angular/src/content/en/components/spreadsheet-data-validation.mdx
@@ -40,7 +40,3 @@ import { TwoConstraintDataValidationRule } from 'igniteui-angular-excel';
-
-
-
-
diff --git a/docs/angular/src/content/en/components/spreadsheet-hyperlinks.mdx b/docs/angular/src/content/en/components/spreadsheet-hyperlinks.mdx
index 463fdcbca8..714dd3ad3c 100644
--- a/docs/angular/src/content/en/components/spreadsheet-hyperlinks.mdx
+++ b/docs/angular/src/content/en/components/spreadsheet-hyperlinks.mdx
@@ -37,7 +37,3 @@ import { WorksheetHyperlink } from 'igniteui-angular-excel';
-
-
-
-
diff --git a/docs/angular/src/content/en/components/spreadsheet-overview.mdx b/docs/angular/src/content/en/components/spreadsheet-overview.mdx
index 4dbc378e91..a808294c7c 100644
--- a/docs/angular/src/content/en/components/spreadsheet-overview.mdx
+++ b/docs/angular/src/content/en/components/spreadsheet-overview.mdx
@@ -72,8 +72,6 @@ The `Spreadsheet` requires the following modules:
-
-
```ts
import { IgxExcelModule } from 'igniteui-angular-excel';
import { IgxSpreadsheetModule } from 'igniteui-angular-spreadsheet';
@@ -92,9 +90,6 @@ export class AppModule {}
-
-
-
## Usage
@@ -111,7 +106,6 @@ Now that the Angular spreadsheet module is imported, next is the basic configura
-
In the following code snippet, an external [ExcelUtility](excel-utility.md) class is used to save and load a `Workbook`.
@@ -141,10 +135,6 @@ ngOnInit() {
-
-
-
-
## API References
diff --git a/docs/angular/src/content/en/components/switch.mdx b/docs/angular/src/content/en/components/switch.mdx
index af29a00d21..48e7e13f2d 100644
--- a/docs/angular/src/content/en/components/switch.mdx
+++ b/docs/angular/src/content/en/components/switch.mdx
@@ -138,7 +138,7 @@ When you modify a primary property, all related dependent properties are automat
- {/* Theme Switcher Radios and Labels */}
+ {/*Theme Switcher Radios and Labels*/}
diff --git a/docs/angular/src/content/en/components/themes/misc/tailwind-classes.mdx b/docs/angular/src/content/en/components/themes/misc/tailwind-classes.mdx
index 068cfd2be8..ffecc120aa 100644
--- a/docs/angular/src/content/en/components/themes/misc/tailwind-classes.mdx
+++ b/docs/angular/src/content/en/components/themes/misc/tailwind-classes.mdx
@@ -23,6 +23,7 @@ This guide assumes you already have **Ignite UI for Angular** installed. If not,
```cmd
ng add igniteui-angular
```
+
### 1. Install Tailwind
diff --git a/docs/angular/src/content/en/components/tree.mdx b/docs/angular/src/content/en/components/tree.mdx
index 29d28ba1fb..58ec4d6a0c 100644
--- a/docs/angular/src/content/en/components/tree.mdx
+++ b/docs/angular/src/content/en/components/tree.mdx
@@ -273,7 +273,7 @@ To create a reusable template for your nodes, declare `` **within `
{{ data.CompanyName }}
-
+
diff --git a/docs/angular/src/content/en/components/zoomslider-overview.mdx b/docs/angular/src/content/en/components/zoomslider-overview.mdx
index 8ec99d96ff..e9bff836d3 100644
--- a/docs/angular/src/content/en/components/zoomslider-overview.mdx
+++ b/docs/angular/src/content/en/components/zoomslider-overview.mdx
@@ -37,8 +37,6 @@ The following sample demonstrates how to use `ZoomSlider` to navigate content in
-
-
## Dependencies
When installing the Angular chart component, the core package must also be installed.
@@ -58,7 +56,6 @@ The `ZoomSlider` requires the following modules:
-
```ts
import { IgxZoomSliderModule } from 'igniteui-angular-charts';
import { IgxZoomSliderComponent } from 'igniteui-angular-charts';
@@ -76,9 +73,6 @@ export class AppModule {}
-
-
-
## Code Snippet
The following code demonstrates how to setup the ZoomSlider.
@@ -95,10 +89,6 @@ The following code demonstrates how to setup the ZoomSlider.
-
-
-
-
## Additional Resources
diff --git a/docs/angular/src/content/en/grids_templates/cell-editing.mdx b/docs/angular/src/content/en/grids_templates/cell-editing.mdx
index d2cafaadf0..f6f5a0d210 100644
--- a/docs/angular/src/content/en/grids_templates/cell-editing.mdx
+++ b/docs/angular/src/content/en/grids_templates/cell-editing.mdx
@@ -660,5 +660,5 @@ _
- [Column Resizing](/{igPath}/column-resizing)
- [Selection](/{igPath}/selection)
-* [Searching](search)
+- [Searching](search)
diff --git a/docs/angular/src/content/en/grids_templates/clipboard-interactions.mdx b/docs/angular/src/content/en/grids_templates/clipboard-interactions.mdx
index 3778980867..4e3ff0de06 100644
--- a/docs/angular/src/content/en/grids_templates/clipboard-interactions.mdx
+++ b/docs/angular/src/content/en/grids_templates/clipboard-interactions.mdx
@@ -86,7 +86,7 @@ We expose Emitted when a copy operation is executed. Fired only if copy behavior is enabled through the
+- Emitted when a copy operation is executed. Fired only if copy behavior is enabled through the
## Additional Resources
diff --git a/docs/angular/src/content/en/grids_templates/column-hiding.mdx b/docs/angular/src/content/en/grids_templates/column-hiding.mdx
index e8005a67de..7968acf632 100644
--- a/docs/angular/src/content/en/grids_templates/column-hiding.mdx
+++ b/docs/angular/src/content/en/grids_templates/column-hiding.mdx
@@ -635,7 +635,7 @@ Styles:
- [Column Resizing](/{igPath}/column-resizing)
- [Selection](/{igPath}/selection)
-* [Searching](/{igPath}/search)
+- [Searching](/{igPath}/search)
diff --git a/docs/angular/src/content/en/grids_templates/column-moving.mdx b/docs/angular/src/content/en/grids_templates/column-moving.mdx
index b826921aaa..b8546f0a77 100644
--- a/docs/angular/src/content/en/grids_templates/column-moving.mdx
+++ b/docs/angular/src/content/en/grids_templates/column-moving.mdx
@@ -273,7 +273,7 @@ The sample will not be affected by the selected global theme from `Change Theme`
- [Column Resizing](/{igPath}/column-resizing)
- [Selection](/{igPath}/selection)
-* [Searching](/{igPath}/search)
+- [Searching](/{igPath}/search)
diff --git a/docs/angular/src/content/en/grids_templates/column-selection.mdx b/docs/angular/src/content/en/grids_templates/column-selection.mdx
index 323c884a59..a1998a319b 100644
--- a/docs/angular/src/content/en/grids_templates/column-selection.mdx
+++ b/docs/angular/src/content/en/grids_templates/column-selection.mdx
@@ -211,7 +211,7 @@ The column selection UI has a few more APIs to explore, which are listed below.
-
-
- properties:
+ properties:
-
-
diff --git a/docs/angular/src/content/en/grids_templates/conditional-cell-styling.mdx b/docs/angular/src/content/en/grids_templates/conditional-cell-styling.mdx
index b2673d7b8d..1fd53bd2e6 100644
--- a/docs/angular/src/content/en/grids_templates/conditional-cell-styling.mdx
+++ b/docs/angular/src/content/en/grids_templates/conditional-cell-styling.mdx
@@ -454,7 +454,7 @@ Use **`::ng-deep`** or **`ViewEncapsulation.None`** to force the custom styles d
-{/* TODO */}
+{/*TODO*/}
@@ -668,7 +668,7 @@ Define a `popin` animation
-{/* TODO */}
+{/*TODO*/}
diff --git a/docs/angular/src/content/en/grids_templates/display-density.mdx b/docs/angular/src/content/en/grids_templates/display-density.mdx
index 0a13321284..8841452600 100644
--- a/docs/angular/src/content/en/grids_templates/display-density.mdx
+++ b/docs/angular/src/content/en/grids_templates/display-density.mdx
@@ -325,7 +325,7 @@ And now we can extend our sample and add
-* [Searching](/{igPath}/search)
+- [Searching](/{igPath}/search)
diff --git a/docs/angular/src/content/en/grids_templates/editing.mdx b/docs/angular/src/content/en/grids_templates/editing.mdx
index c73693b191..4c6ee98798 100644
--- a/docs/angular/src/content/en/grids_templates/editing.mdx
+++ b/docs/angular/src/content/en/grids_templates/editing.mdx
@@ -199,5 +199,5 @@ _
- [Column Resizing](column-resizing)
- [Selection](selection)
-* [Searching](search)
+- [Searching](search)
diff --git a/docs/angular/src/content/en/grids_templates/excel-style-filtering.mdx b/docs/angular/src/content/en/grids_templates/excel-style-filtering.mdx
index a37ac3bb2e..d25354a1fd 100644
--- a/docs/angular/src/content/en/grids_templates/excel-style-filtering.mdx
+++ b/docs/angular/src/content/en/grids_templates/excel-style-filtering.mdx
@@ -364,13 +364,13 @@ The list items inside the Excel Style Filtering dialog represent the unique valu
## Formatted Values Filtering Strategy
-By default, the {ComponentTitle} component filters the data based on the original cell values, however in some cases you may want to filter the data based on the formatted values.
+By default, the {ComponentTitle} component filters the data based on the original cell values, however in some cases you may want to filter the data based on the formatted values.
In order to do that you can use the .
- In order to do that you can use the .
-
+ In order to do that you can use the .
+
The following sample demonstrates how to format the numeric values of a column as strings and filter the {ComponentTitle} based on the string values:
diff --git a/docs/angular/src/content/en/grids_templates/filtering.mdx b/docs/angular/src/content/en/grids_templates/filtering.mdx
index 90395e4d3a..4262920a16 100644
--- a/docs/angular/src/content/en/grids_templates/filtering.mdx
+++ b/docs/angular/src/content/en/grids_templates/filtering.mdx
@@ -42,7 +42,7 @@ IgniteUI for [Angular {ComponentTitle} component](https://www.infragistics.com/p
## Angular {ComponentTitle} Filtering Example
-The sample below demonstrates {ComponentTitle}'s **Quick filtering** user experience.
+The sample below demonstrates {ComponentTitle}'s **Quick filtering** user experience.
API method is used to apply _contains_ condition on the _ProductName column_ through external _igxInputGroup component_.
diff --git a/docs/angular/src/content/en/grids_templates/keyboard-navigation.mdx b/docs/angular/src/content/en/grids_templates/keyboard-navigation.mdx
index 2419467e10..3b25ec36a7 100644
--- a/docs/angular/src/content/en/grids_templates/keyboard-navigation.mdx
+++ b/docs/angular/src/content/en/grids_templates/keyboard-navigation.mdx
@@ -79,7 +79,7 @@ When the **{ComponentName}** header container is focused, the following key comb
- Ctrl + Arrow Down sorts the active column header in DSC order. If the column is already sorted in DSC, sorting state is cleared
- Space selects the column; If the column is already selected, selection is cleared
- - Shift + Alt + Arrow Left groups the column, if the column is marked as groupable
+- Shift + Alt + Arrow Left groups the column, if the column is marked as groupable
- Shift + Alt + Arrow Right ungroups the column, if the column is marked as groupable
- Alt + Arrow Left or Alt + Arrow Up collapses the column group header, if the header is not already collapsed
- Alt + Arrow Right or Alt + Arrow Down expands the column group header, if the header is not already expanded
@@ -90,12 +90,12 @@ When the **{ComponentName}** body is focused, the following key combinations are
### Key Combination
-- Arrow Up- navigates one cell up
+- Arrow Up- navigates one cell up
, or one level up the grid hierarchy if necessary
(no wrapping)
-- Arrow Down navigates one cell down
+- Arrow Down navigates one cell down
, or one level down the grid hierarchy if necessary
@@ -118,24 +118,24 @@ When the **{ComponentName}** body is focused, the following key combinations are
- Tab available only if there is a cell in edit mode; moves the focus to the next editable cell in the row; after reaching the last cell in the row, moves te focus to the first editable cell in the next row. When **Row Editing** is enabled, moves the focus from the right-most editable cell to the **CANCEL** and **DONE** buttons, and from **DONE** button to the left-most editable cell in the row
- Shift + Tab - available only if there is a cell in edit mode; moves the focus to the previous editable cell in the row; after reaching the first cell in the row, moves the focus to the last editable cell in the previous row. When **Row Editing** is enabled, moves the focus from the right-most editable cell to **CANCEL** and **DONE** buttons, and from **DONE** button to the right-most editable cell in the row
- Space - selects the row, if Row Selection is enabled
-- Alt + Arrow Left or Alt + Arrow Up -
+- Alt + Arrow Left or Alt + Arrow Up -
over Group Row - collapses the group
collapses the row island
-
+
collapses the current node
-- Alt + Arrow Right or Alt + Arrow Down -
+- Alt + Arrow Right or Alt + Arrow Down -
over Group Row - expands the group
-expands the row island
-
+expands the row island
+
expands the current node
@@ -213,7 +213,7 @@ Overriding the default behavior for a certain key or keys combination is one of
Both and are
-availabe for the current level and cannot access cells from upper or lower level.
+available for the current level and cannot access cells from upper or lower level.
diff --git a/docs/angular/src/content/en/grids_templates/multi-column-headers.mdx b/docs/angular/src/content/en/grids_templates/multi-column-headers.mdx
index ef056251af..24fb18f3bf 100644
--- a/docs/angular/src/content/en/grids_templates/multi-column-headers.mdx
+++ b/docs/angular/src/content/en/grids_templates/multi-column-headers.mdx
@@ -356,7 +356,7 @@ The sample will not be affected by the selected global theme from `Change Theme`
- [Column Resizing](/{igPath}/column-resizing)
- [Selection](/{igPath}/selection)
-* [Group by](/{igPath}/groupby)
+- [Group by](/{igPath}/groupby)
diff --git a/docs/angular/src/content/en/grids_templates/remote-data-operations.mdx b/docs/angular/src/content/en/grids_templates/remote-data-operations.mdx
index caac0f7839..ae7e589fd0 100644
--- a/docs/angular/src/content/en/grids_templates/remote-data-operations.mdx
+++ b/docs/angular/src/content/en/grids_templates/remote-data-operations.mdx
@@ -57,7 +57,7 @@ The Ignite UI for Angular {ComponentTitle} supports remote data operations such
-{/* TODO */}
+{/*TODO*/}
By default, the {ComponentTitle} uses its own logic for performing data operations.
@@ -290,7 +290,7 @@ You can see the result of the code from above at the beginning of this article i
-{/* TODO */}
+{/*TODO*/}
## Unique Column Values Strategy
diff --git a/docs/angular/src/content/en/grids_templates/row-selection.mdx b/docs/angular/src/content/en/grids_templates/row-selection.mdx
index b0d0e995fe..3801c201f7 100644
--- a/docs/angular/src/content/en/grids_templates/row-selection.mdx
+++ b/docs/angular/src/content/en/grids_templates/row-selection.mdx
@@ -82,7 +82,7 @@ public handleRowSelection(event: IRowSelectionEventArgs) {
## Setup
-In order to setup row selection in the , you just need to set the **rowSelection** property. This property accepts **GridSelectionMode** enumeration. **GridSelectionMode** exposes the following
+In order to setup row selection in the , you just need to set the **rowSelection** property. This property accepts **GridSelectionMode** enumeration. **GridSelectionMode** exposes the following
three modes: **none**, **single** and **multiple**
diff --git a/docs/angular/src/content/en/grids_templates/search.mdx b/docs/angular/src/content/en/grids_templates/search.mdx
index 7c28479b86..1def73021a 100644
--- a/docs/angular/src/content/en/grids_templates/search.mdx
+++ b/docs/angular/src/content/en/grids_templates/search.mdx
@@ -56,7 +56,7 @@ The following example represents {ComponentTitle} with search input box that all
-{/* TODO */}
+{/*TODO*/}
## Angular Search Usage
@@ -98,7 +98,7 @@ Let's start by creating our grid and binding it to our data. We will also add so
-{/* TODO */}
+{/*TODO*/}
@@ -130,7 +130,7 @@ Let's start by creating our grid and binding it to our data. We will also add so
-{/* TODO */}
+{/*TODO*/}
Great, and now let's prepare for the search API of our {ComponentTitle}! We can create a few properties, which can be used for storing the currently searched text and whether the search is case sensitive and/or by an exact match.
diff --git a/docs/angular/src/content/en/grids_templates/selection.mdx b/docs/angular/src/content/en/grids_templates/selection.mdx
index 06b2d1271b..467179bcd4 100644
--- a/docs/angular/src/content/en/grids_templates/selection.mdx
+++ b/docs/angular/src/content/en/grids_templates/selection.mdx
@@ -73,7 +73,7 @@ Property enab
- none - Row selection would be disabled for the {ComponentTitle}
- single - Selection of only one row within the {ComponentTitle} would be available
-- multiple - Multi-row selection would be available by using the `Row selectors`, with a key combination like ctrl + click, or by pressing the space key once a cell is focused
+- multiple - Multi-row selection would be available by using the `Row selectors`, with a key combination like ctrl + click, or by pressing the space key once a cell is focused
- multipleCascade - This is a mode for cascading selection, resulting in the selection of all children in the tree below the record that the user selects with user interaction. In this mode a parent's selection state entirely depends on the selection state of its children.
@@ -246,7 +246,7 @@ _
- [Column Moving](/{igPath}/column-moving)
- [Virtualization and Performance](/{igPath}/virtualization)
-* [Selection-based Aggregates](selection-based-aggregates)
+- [Selection-based Aggregates](selection-based-aggregates)
diff --git a/docs/angular/src/content/en/grids_templates/summaries.mdx b/docs/angular/src/content/en/grids_templates/summaries.mdx
index b92e2f293c..a2954964fa 100644
--- a/docs/angular/src/content/en/grids_templates/summaries.mdx
+++ b/docs/angular/src/content/en/grids_templates/summaries.mdx
@@ -813,7 +813,7 @@ If the component is using an [`Emulated`](/themes/sass/component-themes#view-enc
- [Column Resizing](/{igPath}/column-resizing)
- [Selection](/{igPath}/selection)
-* [Selection-based Aggregates](selection-based-aggregates)
+- [Selection-based Aggregates](selection-based-aggregates)
diff --git a/docs/angular/src/content/jp/components/accordion.mdx b/docs/angular/src/content/jp/components/accordion.mdx
index aad3af4275..544f22a58c 100644
--- a/docs/angular/src/content/jp/components/accordion.mdx
+++ b/docs/angular/src/content/jp/components/accordion.mdx
@@ -209,11 +209,11 @@ export class AccordionComponent {
Angular を使用すると、ヘッダーとコンテンツ パネルの外観をカスタマイズできます。
以下のサンプルは、 の組み込みテンプレート機能を使用して詳細なフィルタリング オプションを実装する方法を示しています。
-
+
-### ネストされた Angular Accoridon のシナリオ
+### ネストされた Angular Accordion のシナリオ
以下の Angular Accordion 例では、この一般的なアプリケーション シナリオを説明するために、複雑な FAQ セクションを作成します。サンプルでネストされた は、の本体内に を追加することによって実現されます。
diff --git a/docs/angular/src/content/jp/components/bullet-graph.mdx b/docs/angular/src/content/jp/components/bullet-graph.mdx
index 5cbc038171..c07170fd55 100644
--- a/docs/angular/src/content/jp/components/bullet-graph.mdx
+++ b/docs/angular/src/content/jp/components/bullet-graph.mdx
@@ -35,7 +35,6 @@ Angular Bullet Graph コンポーネントは、目盛り上でメジャーの
-
## 依存関係
gauge パッケージのインストール時に core パッケージもインストールする必要があります。
@@ -54,7 +53,6 @@ npm install --save igniteui-angular-gauges
-
```ts
// app.module.ts
import { IgxBulletGraphModule } from 'igniteui-angular-gauges';
@@ -72,10 +70,6 @@ export class AppModule {}
-
-
-
-
## 使用方法
@@ -110,11 +104,6 @@ export class AppModule {}
-
-
-
-
-
## 比較メジャー
@@ -147,12 +136,6 @@ export class AppModule {}
-
-
-
-
-
-
@@ -184,11 +167,6 @@ export class AppModule {}
-
-
-
-
-
@@ -225,12 +203,6 @@ export class AppModule {}
-
-
-
-
-
-
@@ -265,12 +237,6 @@ export class AppModule {}
-
-
-
-
-
-
@@ -297,12 +263,6 @@ export class AppModule {}
-
-
-
-
-
-
@@ -328,12 +288,6 @@ export class AppModule {}
-
-
-
-
-
-
@@ -360,11 +314,6 @@ export class AppModule {}
-
-
-
-
-
@@ -449,12 +398,6 @@ export class AppModule {}
-
-
-
-
-
-
## API リファレンス
diff --git a/docs/angular/src/content/jp/components/calendar.mdx b/docs/angular/src/content/jp/components/calendar.mdx
index 56ca716e04..35b84fb1d1 100644
--- a/docs/angular/src/content/jp/components/calendar.mdx
+++ b/docs/angular/src/content/jp/components/calendar.mdx
@@ -149,7 +149,7 @@ Ignite UI for Angular Calendar モジュールまたはディレクティブを
```
-すべてのプロパティ値が AppCоmponent ファイルに設定されます。
+すべてのプロパティ値が AppComponent ファイルに設定されます。
```typescript
// app.component.ts
@@ -463,7 +463,7 @@ export class CalendarSample9Component {
-
+
@@ -614,7 +614,7 @@ export class CalendarSample9Component {
-
+
diff --git a/docs/angular/src/content/jp/components/carousel.mdx b/docs/angular/src/content/jp/components/carousel.mdx
index 3157d837fb..24e9c02e27 100644
--- a/docs/angular/src/content/jp/components/carousel.mdx
+++ b/docs/angular/src/content/jp/components/carousel.mdx
@@ -409,7 +409,7 @@ These configurations will have the following result:
-The Ignite UI for Angular Drop Down is a component, which displays a toggleable list of predefined values and allows users to easily select a single option item with a click. It can be quickly configured to act as a drop down menu or you can simply use it to deliver more useful visual information by grouping data. With grouping you can use both flat and hierarchical data. Drop Down component allows declarative binding, which makes it possible for you to embed additional content and links. This also leaves room for further UI customization and styling of the Angular drop down list appearance. In addition to this, it is packed with key features like keyboard dropdown navigation and virtualization.
+The Ignite UI for Angular Drop Down is a component, which displays a toggleable list of predefined values and allows users to easily select a single option item with a click. It can be quickly configured to act as a drop down menu or you can simply use it to deliver more useful visual information by grouping data. With grouping you can use both flat and hierarchical data. Drop Down component allows declarative binding, which makes it possible for you to embed additional content and links. This also leaves room for further UI customization and styling of the Angular drop down list appearance. In addition to this, it is packed with key features like keyboard dropdown navigation and virtualization.
diff --git a/docs/angular/src/content/jp/components/inputs/color-editor.mdx b/docs/angular/src/content/jp/components/inputs/color-editor.mdx
index 25723c4773..b598bd90f9 100644
--- a/docs/angular/src/content/jp/components/inputs/color-editor.mdx
+++ b/docs/angular/src/content/jp/components/inputs/color-editor.mdx
@@ -38,15 +38,6 @@ npm install igniteui-angular-inputs
-
-
-
-
-
-
-
-
-
## 使用方法
の使用を開始する最も簡単な方法は次のとおりです:
@@ -54,7 +45,6 @@ npm install igniteui-angular-inputs
-
```html
{
-
-
-
-
-
diff --git a/docs/angular/src/content/jp/components/interactivity/accessibility-compliance.mdx b/docs/angular/src/content/jp/components/interactivity/accessibility-compliance.mdx
index 3a3df16252..be406c5543 100644
--- a/docs/angular/src/content/jp/components/interactivity/accessibility-compliance.mdx
+++ b/docs/angular/src/content/jp/components/interactivity/accessibility-compliance.mdx
@@ -36,11 +36,11 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'
|**コンポーネント/原則**| (a) |(b) |(c) |(d) |(e) |(f) |(g) |(h) |(i) |(j) |(k) |(l) |(m) |(n) |(o) |(p) |
|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|
-|*グリッド*|||||||||||||||||
+|_グリッド_|||||||||||||||||
| - Grid||||||||||*|||||||
| - HierarchicalGrid||||||||||*|||||||
| - TreeGrid||||||||||*|||||||
-|*その他*||||||||||*|||||||
+|_その他_||||||||||*|||||||
| - Avatar|||||||||||||||||
| - Badge|||||||||||||||||
| - Bottom navigation||||||||||*|||||||
@@ -115,11 +115,11 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'
|**コンポーネント/ガイドライン**|1.1 |1.2 |1.3 |1.4 |2.1 |2.2 |2.3 |2.4 |2.5 |3.1 |3.2 |3.3 |4.1 |
|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|
-|*グリッド*||||||||||||||
+|_グリッド_||||||||||||||
| - Grid|||||||*||||*|||
| - HierarchicalGrid|||||||*||||*|||
| - TreeGrid|||||||*||||*|||
-|*その他*|||||||*|||||||
+|_その他_|||||||*|||||||
| - Avatar|||||||||||*|||
| - Badge|||||||||||*|||
| - Banner||||||*|*||||*|||
diff --git a/docs/angular/src/content/jp/components/linear-gauge.mdx b/docs/angular/src/content/jp/components/linear-gauge.mdx
index 1e46b10f6c..c175df3c50 100644
--- a/docs/angular/src/content/jp/components/linear-gauge.mdx
+++ b/docs/angular/src/content/jp/components/linear-gauge.mdx
@@ -30,7 +30,6 @@ Ignite UI for Angular リニア ゲージ コンポーネントを使用する
-
## 依存関係
Angular gauge コンポーネントをインストールするときに core パッケージもインストールする必要があります。
@@ -50,8 +49,6 @@ npm install --save igniteui-angular-gauges
-
-
```ts
// app.module.ts
import { IgxLinearGaugeModule } from 'igniteui-angular-gauges';
@@ -69,10 +66,6 @@ export class AppModule {}
-
-
-
-
## 使用方法
@@ -105,11 +98,6 @@ export class AppModule {}
-
-
-
-
-
## 針
@@ -144,12 +132,6 @@ export class AppModule {}
-
-
-
-
-
-
@@ -182,11 +164,6 @@ export class AppModule {}
-
-
-
-
-
@@ -219,12 +196,6 @@ export class AppModule {}
-
-
-
-
-
-
@@ -262,11 +233,6 @@ export class AppModule {}
-
-
-
-
-
@@ -294,12 +260,6 @@ export class AppModule {}
-
-
-
-
-
-
@@ -326,12 +286,6 @@ export class AppModule {}
-
-
-
-
-
-
@@ -361,12 +315,6 @@ export class AppModule {}
-
-
-
-
-
-
@@ -453,11 +401,6 @@ export class AppModule {}
-
-
-
-
-
diff --git a/docs/angular/src/content/jp/components/menus/toolbar.mdx b/docs/angular/src/content/jp/components/menus/toolbar.mdx
index 47b45f99d7..f159969335 100644
--- a/docs/angular/src/content/jp/components/menus/toolbar.mdx
+++ b/docs/angular/src/content/jp/components/menus/toolbar.mdx
@@ -60,7 +60,6 @@ export class AppModule {}
-
```ts
import { IgxToolbarModule } from 'igniteui-react-layouts';
import { IgrDataChartToolbarModule, IgrDataChartCoreModule, IgrDataChartCategoryModule, IgrDataChartAnnotationModule, IgrDataChartInteractivityModule, IgrDataChartCategoryTrendLineModule } from 'igniteui-react-charts';
@@ -77,13 +76,6 @@ IgrDataChartCategoryTrendLineModule.register();
-
-
-
-
-
-
-
## 使用方法
### ツール操作
@@ -115,7 +107,6 @@ Angular ツールバーには、 項目とメニューが使用可能になります。以下は、組み込みの Angular `DataChart` ツール操作とそれに関連付けられた `OverlayId` のリストです。
ズーム操作
@@ -151,20 +137,20 @@ Angular ツールバーには、 property.
@@ -249,11 +234,6 @@ By default the Angular Toolbar is shown horizontally, but it also has the abilit
-
-
-
-
-
The following example demonstrates the vertical orientation of the Angular Toolbar.
@@ -280,11 +260,6 @@ You can add a custom color editor tool to the the Angular Toolbar, which will al
-
-
-
-
-
The following example demonstrates styling the Angular Data Chart series brush with the Color Editor tool.
@@ -303,12 +278,7 @@ The icon component can be styled by using it's `BaseTheme` property directly to
-
-
-
-
-
-{/* The following example demonstrates the various theme options that can be applied.
+{/*The following example demonstrates the various theme options that can be applied.
*/}
diff --git a/docs/angular/src/content/jp/components/overlay-scroll.mdx b/docs/angular/src/content/jp/components/overlay-scroll.mdx
index ca0db5ceb3..a8bed49fcb 100644
--- a/docs/angular/src/content/jp/components/overlay-scroll.mdx
+++ b/docs/angular/src/content/jp/components/overlay-scroll.mdx
@@ -16,10 +16,10 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
3. **Close** - 許容値を使用して許容範囲を超えた場合にスクロールで展開したコンポーネントを閉じます。
4. **Absolute** - すべてをスクロールします。
-1. **NoOperation** - does nothing.
-2. **Block** - the event is canceled and the component does not scroll with the window.
-3. **Close** - uses a tolerance and closes an expanded component upon scrolling if the tolerance is exceeded.
-4. **Absolute** - scrolls everything.
+5. **NoOperation** - does nothing.
+6. **Block** - the event is canceled and the component does not scroll with the window.
+7. **Close** - uses a tolerance and closes an expanded component upon scrolling if the tolerance is exceeded.
+8. **Absolute** - scrolls everything.
## 使用方法
diff --git a/docs/angular/src/content/jp/components/radial-gauge.mdx b/docs/angular/src/content/jp/components/radial-gauge.mdx
index 39d7449a12..81ab9159b3 100644
--- a/docs/angular/src/content/jp/components/radial-gauge.mdx
+++ b/docs/angular/src/content/jp/components/radial-gauge.mdx
@@ -31,7 +31,6 @@ Angular Radial Gauge コンポーネントは、針、目盛り、範囲、ラ
-
## 依存関係
gauge コンポーネントをインストールするときに core パッケージもインストールする必要があります。
@@ -44,10 +43,6 @@ npm install --save igniteui-angular-gauges
-
-
-
-
## モジュールの要件
`RadialGauge` を作成するには、以下のモジュールが必要です。
@@ -55,8 +50,6 @@ npm install --save igniteui-angular-gauges
-
-
```ts
// app.module.ts
import { IgxRadialGaugeModule } from 'igniteui-angular-gauges';
@@ -74,10 +67,6 @@ export class AppModule {}
-
-
-
-
@@ -111,11 +100,6 @@ export class AppModule {}
-
-
-
-
-
## バッキング
@@ -148,12 +132,6 @@ export class AppModule {}
-
-
-
-
-
-
@@ -183,12 +161,6 @@ export class AppModule {}
-
-
-
-
-
-
@@ -216,12 +188,6 @@ export class AppModule {}
-
-
-
-
-
-
@@ -243,11 +209,6 @@ export class AppModule {}
-
-
-
-
-
## オプティカル スケーリング
ラジアル ゲージのラベルとタイトルにより、スケーリングを変更できます。これを有効にするには、まず `OpticalScalingEnabled` を true に設定します。次に、ラベルが 100% のオプティカル スケーリングを持つサイズを管理する `OpticalScalingSize` を設定できます。ゲージのサイズが大きくなると、ラベルのフォントも大きくなります。たとえば、このプロパティが 500 に設定され、ゲージのピクセル単位のサイズが 2 倍の 1000 になると、ラベルのフォント サイズは 200% 大きくなります。
@@ -281,12 +242,6 @@ export class AppModule {}
-
-
-
-
-
-
@@ -319,12 +274,6 @@ export class AppModule {}
-
-
-
-
-
-
@@ -363,11 +312,6 @@ export class AppModule {}
-
-
-
-
-
@@ -395,11 +339,6 @@ export class AppModule {}
-
-
-
-
-
@@ -480,12 +419,6 @@ export class AppModule {}
-
-
-
-
-
-
## API リファレンス
diff --git a/docs/angular/src/content/jp/components/radio-button.mdx b/docs/angular/src/content/jp/components/radio-button.mdx
index f1ce3e36a4..de701eaec5 100644
--- a/docs/angular/src/content/jp/components/radio-button.mdx
+++ b/docs/angular/src/content/jp/components/radio-button.mdx
@@ -270,7 +270,7 @@ class="!light-radio ![--empty-color:#576E60] ![--fill-color:#7B9E89]"
## Radio Group
-The Ignite UI for Angular Radio Group directive provides a grouping container that allows better control over the child radio components and supports template-driven and reactive forms.
+The Ignite UI for Angular Radio Group directive provides a grouping container that allows better control over the child radio components and supports template-driven and reactive forms.
diff --git a/docs/angular/src/content/jp/components/themes/misc/tailwind-classes.mdx b/docs/angular/src/content/jp/components/themes/misc/tailwind-classes.mdx
index d47cf98655..3132443fb4 100644
--- a/docs/angular/src/content/jp/components/themes/misc/tailwind-classes.mdx
+++ b/docs/angular/src/content/jp/components/themes/misc/tailwind-classes.mdx
@@ -25,6 +25,7 @@ Ignite UI for Angular offers full theming customization through CSS variables an
```cmd
ng add igniteui-angular
```
+
### 1. Tailwind のインストール
diff --git a/docs/angular/src/content/jp/components/themes/sass/animations.mdx b/docs/angular/src/content/jp/components/themes/sass/animations.mdx
index 5d4e07c208..99f5b2ea1e 100644
--- a/docs/angular/src/content/jp/components/themes/sass/animations.mdx
+++ b/docs/angular/src/content/jp/components/themes/sass/animations.mdx
@@ -59,7 +59,7 @@ Ignite UI for Angular [keyframes]({environment:sassApiUrl}/animations#mixin-keyf
### アニメーション ミックスイン
-[аnimation]({environment:sassApiUrl}/animations#mixin-animation) ミックスインは、パラメーターとして渡されたアニメーション プロパティのリストを使用して要素をアニメーション化するための機能を果たします。ユーザーは、`name`、`duration`、`delay`、`direction`、`iteration count` などのアニメーション プロパティを指定できます。複数のキーフレーム アニメーションを `animation` ミックスインに渡すことができます。
+[animation]({environment:sassApiUrl}/animations#mixin-animation) ミックスインは、パラメーターとして渡されたアニメーション プロパティのリストを使用して要素をアニメーション化するための機能を果たします。ユーザーは、`name`、`duration`、`delay`、`direction`、`iteration count` などのアニメーション プロパティを指定できます。複数のキーフレーム アニメーションを `animation` ミックスインに渡すことができます。
```scss
//include the 'fade-in-top' keyframes animation mixin
diff --git a/docs/angular/src/content/jp/components/themes/typography.mdx b/docs/angular/src/content/jp/components/themes/typography.mdx
index 1452b0be67..50e8ca0908 100644
--- a/docs/angular/src/content/jp/components/themes/typography.mdx
+++ b/docs/angular/src/content/jp/components/themes/typography.mdx
@@ -39,7 +39,7 @@ Ignite UI for Angular のタイポグラフィは、[マテリアル タイプ
-各テーマは独自のタイプ スケールを定義します。つまり、Material、Fluent、Boostrap、および Indigo の各テーマに独自のタイプ スケールがあります。これらはすべて同じスケール カテゴリを共有しますが、異なるフォント ファミリ、太さ、サイズ、テキスト変換、文字間隔、線の高さを持つことができます。
+各テーマは独自のタイプ スケールを定義します。つまり、Material、Fluent、Bootstrap、および Indigo の各テーマに独自のタイプ スケールがあります。これらはすべて同じスケール カテゴリを共有しますが、異なるフォント ファミリ、太さ、サイズ、テキスト変換、文字間隔、線の高さを持つことができます。
## 使用方法
diff --git a/docs/angular/src/content/jp/components/zoomslider-overview.mdx b/docs/angular/src/content/jp/components/zoomslider-overview.mdx
index 727d1dc3e9..3e79732ea2 100644
--- a/docs/angular/src/content/jp/components/zoomslider-overview.mdx
+++ b/docs/angular/src/content/jp/components/zoomslider-overview.mdx
@@ -39,8 +39,6 @@ Angular ZoomSlider コントロールは、範囲対応コントロールにズ
-
-
## 依存関係
Angular chart コンポーネントをインストールするときに core パッケージもインストールする必要があります。
@@ -60,7 +58,6 @@ npm install --save igniteui-angular-charts
-
```ts
import { IgxZoomSliderModule } from 'igniteui-angular-charts';
import { IgxZoomSliderComponent } from 'igniteui-angular-charts';
@@ -78,9 +75,6 @@ export class AppModule {}
-
-
-
## コード スニペット
以下のコードは、ZoomSlider を設定する方法を示します。
@@ -97,10 +91,6 @@ export class AppModule {}
-
-
-
-
## その他のリソース
diff --git a/docs/angular/src/content/jp/grids_templates/batch-editing.mdx b/docs/angular/src/content/jp/grids_templates/batch-editing.mdx
index 097a9766d9..453295875a 100644
--- a/docs/angular/src/content/jp/grids_templates/batch-editing.mdx
+++ b/docs/angular/src/content/jp/grids_templates/batch-editing.mdx
@@ -105,6 +105,7 @@ export class AppModule {}
...
```
+
@@ -122,6 +123,7 @@ export class AppModule {}
(click)="openCommitDialog()">Commit
...
```
+
トランザクション API は編集の終了を処理しないので、自分で行う必要があります。そうしないと、`{ComponentTitle}` は編集モードのままになります。これを行う 1 つの方法は、それぞれのメソッドで を呼び出すことです。
diff --git a/docs/angular/src/content/jp/grids_templates/cell-merging.mdx b/docs/angular/src/content/jp/grids_templates/cell-merging.mdx
index 713d49f8fc..4969fec9e5 100644
--- a/docs/angular/src/content/jp/grids_templates/cell-merging.mdx
+++ b/docs/angular/src/content/jp/grids_templates/cell-merging.mdx
@@ -213,6 +213,7 @@ If a merged cell is clicked, the closest cell from the merge sequence will becom
|既知の制限| 説明|
| --- | --- |
| セルの結合は、複数行レイアウトとの組み合わせではサポートされません。 | 両方とも複雑なレイアウトを使用するため、同時に使用することはできません。このような無効な構成が検出された場合は警告が表示されます。 |
+
## API リファレンス
diff --git a/docs/angular/src/content/jp/grids_templates/clipboard-interactions.mdx b/docs/angular/src/content/jp/grids_templates/clipboard-interactions.mdx
index bd784a62c4..0be42de897 100644
--- a/docs/angular/src/content/jp/grids_templates/clipboard-interactions.mdx
+++ b/docs/angular/src/content/jp/grids_templates/clipboard-interactions.mdx
@@ -77,7 +77,7 @@ IE 11のセルを`コピー`するためには、キーボード選択を使用
Excel は、タブで区切られたテキスト (タブ区切り `/t`) を自動的に検出し、データを別々の列に正しく貼り付けることができます。貼り付け形式が機能せず、貼り付けたものがすべて 1 列に表示される場合は、Excel の区切り文字が別の文字に設定されている、またはテキストがタブではなくスペースを使用しています。
-- コピー操作が実行されたときに発生します。 を使用してコピー動作が有効になっている場合のみ発生します。
+- コピー操作が実行されたときに発生します。 を使用してコピー動作が有効になっている場合のみ発生します。
## その他のリソース
diff --git a/docs/angular/src/content/jp/grids_templates/column-hiding.mdx b/docs/angular/src/content/jp/grids_templates/column-hiding.mdx
index e315616a4d..6415a64702 100644
--- a/docs/angular/src/content/jp/grids_templates/column-hiding.mdx
+++ b/docs/angular/src/content/jp/grids_templates/column-hiding.mdx
@@ -630,7 +630,7 @@ $custom-button: flat-button-theme(
- [列のサイズ変更](/{igPath}/column-resizing)
- [選択](/{igPath}/selection)
-* [検索](/{igPath}/search)
+- [検索](/{igPath}/search)
コミュニティに参加して新しいアイデアをご提案ください。
diff --git a/docs/angular/src/content/jp/grids_templates/column-selection.mdx b/docs/angular/src/content/jp/grids_templates/column-selection.mdx
index 4f47f22291..0d126a815f 100644
--- a/docs/angular/src/content/jp/grids_templates/column-selection.mdx
+++ b/docs/angular/src/content/jp/grids_templates/column-selection.mdx
@@ -201,7 +201,7 @@ $custom-grid-theme: grid-theme(
-
-
- プロパティ:
+ プロパティ:
-
-
diff --git a/docs/angular/src/content/jp/grids_templates/remote-data-operations.mdx b/docs/angular/src/content/jp/grids_templates/remote-data-operations.mdx
index 429b231bba..c44f954a31 100644
--- a/docs/angular/src/content/jp/grids_templates/remote-data-operations.mdx
+++ b/docs/angular/src/content/jp/grids_templates/remote-data-operations.mdx
@@ -279,7 +279,7 @@ public processData() {
このトピックのはじめにあるコードの結果は、[デモ](#angular-tree-grid-リモート-データ操作の例)で確認できます。
- {/* TODO */}
+ {/*TODO*/}
## 一意の列値ストラテジ
diff --git a/docs/angular/src/content/jp/grids_templates/row-drag.mdx b/docs/angular/src/content/jp/grids_templates/row-drag.mdx
index c386e14339..a8fdbe5aa8 100644
--- a/docs/angular/src/content/jp/grids_templates/row-drag.mdx
+++ b/docs/angular/src/content/jp/grids_templates/row-drag.mdx
@@ -224,7 +224,7 @@ export class {ComponentName}RowDragComponent {
}
```
-次のように `ViewChild` デコレータを使用して各グリッドに refenrece を定義し、ドロップを処理します。
+次のように `ViewChild` デコレータを使用して各グリッドに reference を定義し、ドロップを処理します。
- 削除される行のデータを含む行を `targetGrid` に追加します。
- `sourceGrid` からドラッグした行を削除します。
diff --git a/docs/angular/src/content/kr/components/action-strip.md b/docs/angular/src/content/kr/components/action-strip.md
index 97a8dd31d8..ed896f1372 100644
--- a/docs/angular/src/content/kr/components/action-strip.md
+++ b/docs/angular/src/content/kr/components/action-strip.md
@@ -14,8 +14,8 @@ The Ignite UI for Angular Action Strip component provides an overlay area contai
#### Demo
-
@@ -57,8 +57,8 @@ For scenarios where more than three action items will be shown, it is best to us
```
-
@@ -90,11 +90,12 @@ This can be utilized via grid action components and we are providing two default
```
+
>Note: These components inherit [`IgxGridActionsBaseDirective`]({environment:angularApiUrl}/classes/igxgridactionsbasedirective.html) and when creating a custom grid action component, it should also inherit `IgxGridActionsBaseDirective`.
-
@@ -102,10 +103,13 @@ This can be utilized via grid action components and we are providing two default
### Styling
To customize the Action Strip, you first need to import the `index` file, where all styling functions and mixins are located.
+
```scss
@import '~igniteui-angular/lib/core/styles/themes/index'
```
+
Next, we have to create a new theme that extends the `action-strip-theme` and pass the parameters which we'd like to change:
+
```scss
$custom-strip: action-strip-theme(
$background: rgba(150, 133, 143, 0.4),
@@ -119,19 +123,21 @@ $custom-strip: action-strip-theme(
The last step is to include the newly created component theme in our application.
When `$legacy-support` is set to `false`(default), include the component css variables like this:
+
```scss
@include css-vars($custom-strip);
```
When `$legacy-support` is set to `true`, include the component theme like this:
+
```scss
@include action-strip($custom-strip);
```
-
@@ -140,26 +146,26 @@ When `$legacy-support` is set to `true`, include the component theme like this:
### API and Style References
For more detailed information regarding the Action Strip API, refer to the following links:
-* [`IgxActionStripComponent API`]({environment:angularApiUrl}/classes/igxactionstripcomponent.html)
+- [`IgxActionStripComponent API`]({environment:angularApiUrl}/classes/igxactionstripcomponent.html)
The following built-in CSS styles helped us achieve this Action Strip layout:
-* [`IgxActionStripComponent Styles`]({environment:sassApiUrl}/themes#function-action-strip-theme)
+- [`IgxActionStripComponent Styles`]({environment:sassApiUrl}/themes#function-action-strip-theme)
Additional components and/or directives that can be used within the Action Strip:
-* [`IgxGridActionsBaseDirective `]({environment:angularApiUrl}/classes/igxgridactionsbasedirective.html)
-* [`IgxGridPinningActionsComponent`]({environment:angularApiUrl}/classes/igxgridpinningactionscomponent.html)
-* [`IgxGridEditingActionsComponent`]({environment:angularApiUrl}/classes/igxgrideditingactionscomponent.html)
-* [`IgxDividerDirective`]({environment:angularApiUrl}/classes/igxdividerdirective.html)
+- [`IgxGridActionsBaseDirective`]({environment:angularApiUrl}/classes/igxgridactionsbasedirective.html)
+- [`IgxGridPinningActionsComponent`]({environment:angularApiUrl}/classes/igxgridpinningactionscomponent.html)
+- [`IgxGridEditingActionsComponent`]({environment:angularApiUrl}/classes/igxgrideditingactionscomponent.html)
+- [`IgxDividerDirective`]({environment:angularApiUrl}/classes/igxdividerdirective.html)
-###Additional Resources
+### Additional Resources
Our community is active and always welcoming to new ideas.
-* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
diff --git a/docs/angular/src/content/kr/components/autocomplete.md b/docs/angular/src/content/kr/components/autocomplete.md
index c6f27257b3..73f61d66a4 100644
--- a/docs/angular/src/content/kr/components/autocomplete.md
+++ b/docs/angular/src/content/kr/components/autocomplete.md
@@ -88,30 +88,30 @@ export class AutocompleteSampleComponent {
### Keyboard Navigation
- - `Arrow Down`, `Arrow Up`, `Alt` + `Arrow Down`, `Alt` + `Arrow Up` will open the `drop-down`, if closed.
- - Typing in the input will open the drop-down, if it is closed.
- - `Arrow Down` - will move to the next drop-down item, if it is opened.
- - `Arrow Up` - will move to the previous drop-down item, if it is opened.
- - `Enter` will confirm the already selected item and will close the drop-down.
- - `Esc` will close the drop-down.
+- `Arrow Down`, `Arrow Up`, `Alt` + `Arrow Down`, `Alt` + `Arrow Up` will open the `drop-down`, if closed.
+- Typing in the input will open the drop-down, if it is closed.
+- `Arrow Down` - will move to the next drop-down item, if it is opened.
+- `Arrow Up` - will move to the previous drop-down item, if it is opened.
+- `Enter` will confirm the already selected item and will close the drop-down.
+- `Esc` will close the drop-down.
> Note: When the autocomplete is opened, then the first item, in the list, is automatically selected. The same is valid when the list is filtered.
### Compatibility support
Applying the `igxAutocomplete` directive will decorate the element with the following ARIA attributes:
- - role="combobox" - role of the element, where the directive is applied.
- - aria-autocomplete="list" - indicates that input completion suggestions are provided in the form of list
- - aria-haspopup="listbox" attribute to indicate that `igxAutocomplete` can pop-up a container to suggest values.
- - aria-expanded="true"/"false" - value depending on the collapsed state of the drop-down.
- - aria-owns="dropDownID" - id of the drop-down used for displaying suggestions.
- - aria-activedescendant="listItemId" - value is set to the id of the current active list element.
+- role="combobox" - role of the element, where the directive is applied.
+- aria-autocomplete="list" - indicates that input completion suggestions are provided in the form of list
+- aria-haspopup="listbox" attribute to indicate that `igxAutocomplete` can pop-up a container to suggest values.
+- aria-expanded="true"/"false" - value depending on the collapsed state of the drop-down.
+- aria-owns="dropDownID" - id of the drop-down used for displaying suggestions.
+- aria-activedescendant="listItemId" - value is set to the id of the current active list element.
The `drop-down` component, used as provider for suggestions, will expose the following ARIA attributes:
- - role="listbox" - applied on the `igx-drop-down` component container
- - role="group" - applied on the `igx-drop-down-item-group` component container
- - role="option" - applied on the `igx-drop-down-item` component container
- - aria-disabled="true"/"false" applied on `igx-drop-down-item`, `igx-drop-down-item-group` component containers when they are disabled.
+- role="listbox" - applied on the `igx-drop-down` component container
+- role="group" - applied on the `igx-drop-down-item-group` component container
+- role="option" - applied on the `igx-drop-down-item` component container
+- aria-disabled="true"/"false" applied on `igx-drop-down-item`, `igx-drop-down-item-group` component containers when they are disabled.
### Enabling/Disabling autocomplete drop-down
@@ -240,19 +240,19 @@ For the purpose of the sample there is a delay in the data loading, in order to
## API References
-* [IgxAutocompleteDirective]({environment:angularApiUrl}/classes/igxautocompletedirective.html)
-* [IgxDropDownComponent]({environment:angularApiUrl}/classes/igxdropdowncomponent.html)
-* [IgxInputGroup]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html)
+- [IgxAutocompleteDirective]({environment:angularApiUrl}/classes/igxautocompletedirective.html)
+- [IgxDropDownComponent]({environment:angularApiUrl}/classes/igxdropdowncomponent.html)
+- [IgxInputGroup]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html)
## Additional Resources
-* [IgxDropDownComponent](drop-down.md)
-* [IgxInputGroup](input-group.md)
-* [Template Driven Forms Integration](input-group.md)
-* [Reactive Forms Integration](angular-reactive-form-validation.md)
+- [IgxDropDownComponent](drop-down.md)
+- [IgxInputGroup](input-group.md)
+- [Template Driven Forms Integration](input-group.md)
+- [Reactive Forms Integration](angular-reactive-form-validation.md)
Our community is active and always welcoming to new ideas.
-* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
diff --git a/docs/angular/src/content/kr/components/avatar.md b/docs/angular/src/content/kr/components/avatar.md
index f0e9d4090c..6c5e4ff5f6 100644
--- a/docs/angular/src/content/kr/components/avatar.md
+++ b/docs/angular/src/content/kr/components/avatar.md
@@ -5,7 +5,7 @@ keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI w
_language: kr
---
-##Avatar
+## Avatar
The Ignite UI for Angular Avatar component helps adding images, material icons, or initials to your application.
@@ -13,8 +13,8 @@ _language: kr
### Avatar Demo
-
@@ -37,15 +37,17 @@ import { IgxAvatarModule } from 'igniteui-angular';
})
export class AppModule {}
```
+
The Avatar can be either square or circular, with three size options (small, medium and large). It can be used for displaying initials, images or icons.
-####Avatar displaying initials
+#### Avatar displaying initials
To get a simple avatar with [`initials`]({environment:angularApiUrl}/classes/igxavatarcomponent.html#initials) (i.e. JS for 'Jack Sock'), add the following code inside the component template:
```html
```
+
Let's enhance our avatar by making it circular and bigger in size. We can also change the background through the [`bgColor`]({environment:angularApiUrl}/classes/igxavatarcomponent.html#bgcolor) property or set a color on the initials through the [`color`]({environment:angularApiUrl}/classes/igxavatarcomponent.html#color) property. All of these are input properties and can be bound to some component properties.
```html
@@ -56,6 +58,7 @@ Let's enhance our avatar by making it circular and bigger in size. We can also c
[color]="color">
```
+
```typescript
// avatar.component.ts
...
@@ -64,14 +67,15 @@ Let's enhance our avatar by making it circular and bigger in size. We can also c
public isCircular = true;
```
+
If all went well, you should see something like the following in the browser:
-####Avatar displaying image
-To get an avatar that dispalays an image, all you have to do is setting the image source via the [`src`]({environment:angularApiUrl}/classes/igxavatarcomponent.html#src) property.
+#### Avatar displaying image
+To get an avatar that displays an image, all you have to do is setting the image source via the [`src`]({environment:angularApiUrl}/classes/igxavatarcomponent.html#src) property.
```html
-####Avatar displaying icon
+#### Avatar displaying icon
Analogically, the avatar can display an icon via the [`icon`]({environment:angularApiUrl}/classes/igxavatarcomponent.html#icon) property. Currently all icons from the material icon set are supported.
```html
@@ -105,12 +110,12 @@ Analogically, the avatar can display an icon via the [`icon`]({environment:angul
## API References
-* [IgxAvatarComponent]({environment:angularApiUrl}/classes/igxavatarcomponent.html)
-* [IgxAvatarComponent Styles]({environment:sassApiUrl}/themes#function-avatar-theme)
+- [IgxAvatarComponent]({environment:angularApiUrl}/classes/igxavatarcomponent.html)
+- [IgxAvatarComponent Styles]({environment:sassApiUrl}/themes#function-avatar-theme)
## Additional Resources
Our community is active and always welcoming to new ideas.
-* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
diff --git a/docs/angular/src/content/kr/components/badge.md b/docs/angular/src/content/kr/components/badge.md
index eaf0e9f37b..8480bc4126 100644
--- a/docs/angular/src/content/kr/components/badge.md
+++ b/docs/angular/src/content/kr/components/badge.md
@@ -5,14 +5,14 @@ keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI w
_language: kr
---
-##Badge
+## Badge
The Ignite UI for Angular Badge is an absolutely positioned element that is used to decorate avatars, navigation menus, or other components in the application when visual notification is needed. Badges usually are designed as icons with a predefined style to communicate information, success, warnings, or errors.
### Badge Demo
-
@@ -21,7 +21,7 @@ _language: kr
> [!NOTE]
> To start using Ignite UI for Angular components in your own projects, make sure you have configured all necessary dependencies and have performed the proper setup of your project. You can learn how to do this in the [**installation**](https://www.infragistics.com/products/ignite-ui-angular/getting-started#installation) topic.
-###Usage
+### Usage
To get started with the Ignite UI for Angular Badge, let's first import the `IgxBadgeModule` in the **app.module.ts** file:
```typescript
@@ -121,11 +121,12 @@ class Member {
}
}
```
+
If the sample is configured properly, a list with members' name and status should be displayed.
-
@@ -156,8 +157,8 @@ Let's add an avatar in front of every chat member. To do this, put another div e
```
-
@@ -168,9 +169,9 @@ Having just a list with names doesn't provide much useful visual information. Th
Notice that the [`igx-badge`]({environment:angularApiUrl}/classes/igxbadgecomponent.html) has [`icon`]({environment:angularApiUrl}/classes/igxbadgecomponent.html#icon) and [`type`]({environment:angularApiUrl}/classes/igxbadgecomponent.html#type) inputs to configure the badge look. You can set the icon by providing its name from the official [material icons set](https://material.io/icons/). The badge type can be set to either [`default`]({environment:angularApiUrl}/enums/type.html#default), [`info`]({environment:angularApiUrl}/enums/type.html#info), [`success`]({environment:angularApiUrl}/enums/type.html#success), [`warning`]({environment:angularApiUrl}/enums/type.html#warning), or [`error`]({environment:angularApiUrl}/enums/type.html#error). Depending on the type, a specific background color is applied.
-In our sample, [`icon`]({environment:angularApiUrl}/classes/igxbadgecomponent.html#icon) and [`type`]({environment:angularApiUrl}/classes/igxbadgecomponent.html#type) are bound to model properties named *icon* and *type*.
+In our sample, [`icon`]({environment:angularApiUrl}/classes/igxbadgecomponent.html#icon) and [`type`]({environment:angularApiUrl}/classes/igxbadgecomponent.html#type) are bound to model properties named _icon_ and _type_.
-In order to position the badge in its parent container, create a custom css class *badge-style* and define the top and right positions.
+In order to position the badge in its parent container, create a custom css class _badge-style_ and define the top and right positions.
```html
@@ -207,8 +208,8 @@ In order to position the badge in its parent container, create a custom css clas
If the sample is configured properly, a list of members should be displayed and every member has an avatar and a badge showing its current state.
-
@@ -216,19 +217,19 @@ If the sample is configured properly, a list of members should be displayed and
## API References
-* [IgxAvatarComponent]({environment:angularApiUrl}/classes/igxavatarcomponent.html)
-* [IgxBadgeComponent]({environment:angularApiUrl}/classes/igxbadgecomponent.html)
-* [IgxBadgeComponent Styles]({environment:sassApiUrl}/themes#function-badge-theme)
-* [IgxListComponent]({environment:angularApiUrl}/classes/igxlistcomponent.html)
-* [IgxListItemComponent]({environment:angularApiUrl}/classes/igxlistitemcomponent.html)
-* [Type]({environment:angularApiUrl}/enums/type.html)
+- [IgxAvatarComponent]({environment:angularApiUrl}/classes/igxavatarcomponent.html)
+- [IgxBadgeComponent]({environment:angularApiUrl}/classes/igxbadgecomponent.html)
+- [IgxBadgeComponent Styles]({environment:sassApiUrl}/themes#function-badge-theme)
+- [IgxListComponent]({environment:angularApiUrl}/classes/igxlistcomponent.html)
+- [IgxListItemComponent]({environment:angularApiUrl}/classes/igxlistitemcomponent.html)
+- [Type]({environment:angularApiUrl}/enums/type.html)
## Additional Resources
Our community is active and always welcoming to new ideas.
-* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
diff --git a/docs/angular/src/content/kr/components/banner.md b/docs/angular/src/content/kr/components/banner.md
index 558a3be92b..c50e5267ce 100644
--- a/docs/angular/src/content/kr/components/banner.md
+++ b/docs/angular/src/content/kr/components/banner.md
@@ -13,8 +13,8 @@ The Ignite UI for Angular Banner Component provides a way to easily display a pr
### Banner Demo
-
@@ -40,6 +40,7 @@ import { IgxBannerModule } from 'igniteui-angular';
})
export class AppModule {}
```
+
### Basic banner
In order to display the Banner component, use its [`open()`]({environment:angularApiUrl}/classes/igxbannercomponent.html#open) method and call it on a button click. To configure the banner message, simply pass some text inside of the banner content. The text will show up in the specified banner area and the banner will use its default template when displaying it
@@ -59,8 +60,8 @@ The banner appears relative to where the element was inserted in the page templa
#### Basic Banner Demo
-
@@ -102,7 +103,7 @@ To pass an `igx-icon` to you banner, simply insert it in the `igx-banner`s conte
#### Adding custom banner buttons
-The `IgxBannerModule` also exposes a directive for templating the banner buttons - [`IgxBannerActionsDirective`]({environment:angularApiUrl}/classes/igxbanneractionsdirective.html). Using this directive allows you to override the default banner button (`Dismiss`) and add user defined custom actions. As most (but not all) of the button interactions are suposed to close the banner, make sure to call the banner's `close()` method in their `click` handlers.
+The `IgxBannerModule` also exposes a directive for templating the banner buttons - [`IgxBannerActionsDirective`]({environment:angularApiUrl}/classes/igxbanneractionsdirective.html). Using this directive allows you to override the default banner button (`Dismiss`) and add user defined custom actions. As most (but not all) of the button interactions are supposed to close the banner, make sure to call the banner's `close()` method in their `click` handlers.
> [!NOTE]
> Per Google's [`Material Design` guidelines](https://material.io/design/components/banners.html#anatomy), a banner should have a maximum of 2 buttons present. The `IgxBannerComponent` **does not** explicitly limit developers from passing more than 2 elements under the `igx-banner-actions` tag, but it is strongly advised if you choose to adhere to the material design guidelines.
@@ -121,6 +122,7 @@ To further template the 'Connection' banner, we can pass custom action handles u
...
```
+
The dismiss option (`'Continue Offline'`) does not require any further logic, so it can just call `connectionBanner.close()`. The confirm action (`'Turn On Wifi'`) requires some additional logic, so we define it in the component. We create and subscribe to the `onNetworkStateChange` `Observable` and on each change we call the `refreshBanner` method, which toggles the banner depending on `wifiState`.
```typescript
@@ -161,6 +163,7 @@ export class MyBannerComponent implements OnInit, OnDestroy {
}
}
```
+
As the subscription fires on any change to `wifiState`, the banner can now also be toggled using the WiFi icon in the demo navbar.
The results of the templated banner can be seen in the below demo:
@@ -168,8 +171,8 @@ The results of the templated banner can be seen in the below demo:
#### Templating Demo
-
@@ -205,14 +208,14 @@ export class MyBannerComponent {
#### Animation Demo
-
### Binding to events
-The banner component emits events when changing its state - [`opening`]({environment:angularApiUrl}/classes/igxbannercomponent.html#opening) and [`opened`]({environment:angularApiUrl}/classes/igxbannercomponent.html#opened) are called when the banner is shown (before and after, resp.), while [`closing`]({environment:angularApiUrl}/classes/igxbannercomponent.html#closing) and [`closed`]({environment:angularApiUrl}/classes/igxbannercomponent.html#closed) are emitted when the banner is closed. The *ing* events (`opening`, `closing`) are cancelable - they use the `ICancelEventArgs` interface and the emitted object has a `cancel` property. If the `cancel` property is set to true, the corresponding end action and event will not be triggered - e.g. if we cancel `opening`, the banner's `open` method will not finish and the banner will not be shown.
+The banner component emits events when changing its state - [`opening`]({environment:angularApiUrl}/classes/igxbannercomponent.html#opening) and [`opened`]({environment:angularApiUrl}/classes/igxbannercomponent.html#opened) are called when the banner is shown (before and after, resp.), while [`closing`]({environment:angularApiUrl}/classes/igxbannercomponent.html#closing) and [`closed`]({environment:angularApiUrl}/classes/igxbannercomponent.html#closed) are emitted when the banner is closed. The _ing_ events (`opening`, `closing`) are cancelable - they use the `ICancelEventArgs` interface and the emitted object has a `cancel` property. If the `cancel` property is set to true, the corresponding end action and event will not be triggered - e.g. if we cancel `opening`, the banner's `open` method will not finish and the banner will not be shown.
To cancel an event bind it to the emitted object and set its `cancel` property to `true`.
@@ -222,6 +225,7 @@ To cancel an event bind it to the emitted object and set its `cancel` property t
...
```
+
```typescript
// banner.component.ts
...
@@ -232,10 +236,11 @@ export class MyBannerComponent {
}
}
```
+
> [!NOTE]
> If the changes above are applied, the banner will never open, as the opening event is always cancelled.
## API Reference
-* [IgxBannerComponent]({environment:angularApiUrl}/classes/igxbannercomponent.html)
-* [IgxBannerComponent Theme]({environment:sassApiUrl}/themes#function-banner-theme)
+- [IgxBannerComponent]({environment:angularApiUrl}/classes/igxbannercomponent.html)
+- [IgxBannerComponent Theme]({environment:sassApiUrl}/themes#function-banner-theme)
diff --git a/docs/angular/src/content/kr/components/button-group.md b/docs/angular/src/content/kr/components/button-group.md
index 9875bf76e1..9ae66606f2 100644
--- a/docs/angular/src/content/kr/components/button-group.md
+++ b/docs/angular/src/content/kr/components/button-group.md
@@ -10,8 +10,8 @@ The [**igx-buttongroup**]({environment:angularApiUrl}/classes/igxbuttongroupcomp
### Button Group Demo
-
@@ -34,6 +34,7 @@ import { IgxButtonGroupModule } from 'igniteui-angular';
})
export class AppModule {}
```
+
### Usage
Use [`igx-buttongroup`]({environment:angularApiUrl}/classes/igxbuttongroupcomponent.html) to organize buttons into an Angular styled button group.
@@ -69,8 +70,8 @@ igx-buttongroup{
}
```
-
@@ -95,8 +96,8 @@ Use the the [`multiSelection`]({environment:angularApiUrl}/classes/igxbuttongrou
```
-
@@ -104,7 +105,7 @@ Use the the [`multiSelection`]({environment:angularApiUrl}/classes/igxbuttongrou
#### Display Density
Use the [`displayDensity`]({environment:angularApiUrl}/classes/igxbuttongroupcomponent.html#displaydensity) input to set the display density for the button group. This will set the style for the buttons in the group to cosy, compact or comfortable (default value) accordingly.
-> [!NOTE]
+> [!NOTE]
> The display density of a button within a button group is not changed if it is explicitly specified.
```typescript
@@ -138,8 +139,8 @@ public selectDensity(event) {
```
-
@@ -212,8 +213,8 @@ public ngOnInit() {
```
-
@@ -221,15 +222,15 @@ public ngOnInit() {
## API References
-* [IgxButtonDirective]({environment:angularApiUrl}/classes/igxbuttondirective.html)
-* [IgxButtonGroupComponent]({environment:angularApiUrl}/classes/igxbuttongroupcomponent.html)
-* [IgxButtonGroup Styles]({environment:sassApiUrl}/themes#function-button-group-theme)
+- [IgxButtonDirective]({environment:angularApiUrl}/classes/igxbuttondirective.html)
+- [IgxButtonGroupComponent]({environment:angularApiUrl}/classes/igxbuttongroupcomponent.html)
+- [IgxButtonGroup Styles]({environment:sassApiUrl}/themes#function-button-group-theme)
## Additional Resources
Our community is active and always welcoming to new ideas.
-* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
diff --git a/docs/angular/src/content/kr/components/button.md b/docs/angular/src/content/kr/components/button.md
index 305f1af271..f5313390e3 100644
--- a/docs/angular/src/content/kr/components/button.md
+++ b/docs/angular/src/content/kr/components/button.md
@@ -12,8 +12,8 @@ The Button directive within Ignite UI for Angular is intended to be used on any
### Button Demo
-
@@ -102,6 +102,7 @@ A floating action button and use an icon to display:
edit
```
+
@@ -113,11 +114,13 @@ Or use icons as buttons:
search
```
+
```html
```
+
Icon results:
-###API References
+### API References
-* [IgxCarouselComponent]({environment:angularApiUrl}/classes/igxcarouselcomponent.html)
-* [IgxCarouselComponent Styles]({environment:sassApiUrl}/themes#function-carousel-theme)
-* [IgxSlideComponent]({environment:angularApiUrl}/classes/igxslidecomponent.html)
-* [IgxLinearProgressBarComponent]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html)
-* [IgxLinearProgressBarComponent Styles]({environment:sassApiUrl}/themes#function-progress-linear-theme)
-* [IgxButtonDirective]({environment:angularApiUrl}/classes/igxbuttondirective.html)
-* [IgxButton Styles]({environment:sassApiUrl}/themes#function-button-theme)
+- [IgxCarouselComponent]({environment:angularApiUrl}/classes/igxcarouselcomponent.html)
+- [IgxCarouselComponent Styles]({environment:sassApiUrl}/themes#function-carousel-theme)
+- [IgxSlideComponent]({environment:angularApiUrl}/classes/igxslidecomponent.html)
+- [IgxLinearProgressBarComponent]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html)
+- [IgxLinearProgressBarComponent Styles]({environment:sassApiUrl}/themes#function-progress-linear-theme)
+- [IgxButtonDirective]({environment:angularApiUrl}/classes/igxbuttondirective.html)
+- [IgxButton Styles]({environment:sassApiUrl}/themes#function-button-theme)
diff --git a/docs/angular/src/content/kr/components/category-chart-axis-options.md b/docs/angular/src/content/kr/components/category-chart-axis-options.md
index f31dafee63..a53d07dc5d 100644
--- a/docs/angular/src/content/kr/components/category-chart-axis-options.md
+++ b/docs/angular/src/content/kr/components/category-chart-axis-options.md
@@ -154,8 +154,8 @@ Ignite UI for Angular 카테고리 차트 컴포넌트에서는 축은 축 기
이 속성은 -1과 1 사이의 수치 소수값을 허용합니다. 이 값은 각 시리즈에 사용 가능한 픽셀 수에서 상대하는 중복을 나타냅니다.
-- 음수 값(-1까지): 카테고리가 서로 생성하는 갭에 의해 떨어집니다.
-- 양수 값(1까지): 카테고리가 서로 중복됩니다. 값1은 서로 차트 위에 카테고리를 렌더링합니다.
+- 음수 값(-1까지): 카테고리가 서로 생성하는 갭에 의해 떨어집니다.
+- 양수 값(1까지): 카테고리가 서로 중복됩니다. 값1은 서로 차트 위에 카테고리를 렌더링합니다.
다음의 코드 예제는 `XAxisOverlap`을 0으로 설정합니다.
diff --git a/docs/angular/src/content/kr/components/category-chart-config-options.md b/docs/angular/src/content/kr/components/category-chart-config-options.md
index 81f1154fd2..0ea726ab95 100644
--- a/docs/angular/src/content/kr/components/category-chart-config-options.md
+++ b/docs/angular/src/content/kr/components/category-chart-config-options.md
@@ -28,10 +28,10 @@ _language: kr
width="700px"
height="500px"
chartType="waterfall"
- brushes="blue, green"
- negativeBrushes="red, yellow"
- outlines="black"
- thickness="5">
+ brushes="blue, green"
+ negativeBrushes="red, yellow"
+ outlines="black"
+ thickness="5">
```
diff --git a/docs/angular/src/content/kr/components/category-chart-high-frequency.md b/docs/angular/src/content/kr/components/category-chart-high-frequency.md
index adb06467c2..4018793cc0 100644
--- a/docs/angular/src/content/kr/components/category-chart-high-frequency.md
+++ b/docs/angular/src/content/kr/components/category-chart-high-frequency.md
@@ -26,9 +26,9 @@ Ignite UI for Angular 카테고리 차트 컴포넌트는 다음 데모에서
컴포넌트에 바인딩할 속성에 대량의 데이터를 저장할 경우, `@Component` 데코레이터에서 `changeDetection: ChangeDetectionStrategy.OnPush`를 설정해야 합니다. 이것을 설정하면 Angular에서 데이터 배열 내의 변경 사항을 자세히 검사하지 않으며, 변경 검출 주기마다 Angular가 필요하지 않습니다.
-- Angular가 차트에 자동으로 데이터 변경을 알려주는 대신에 바인딩된 데이터가 변경된 방법을 컴포넌트에 알리도록 할 수 했습니다.
- - 이러한 델타 알림은 Angular가 변경 검출을 실행할 때마다 100만 레코드 배열의 모든 변경을 비교하는 것보다 훨씬 효율적으로 실행할 수 있습니다.
- - 바인딩된 데이터의 변경을 차트에 알리는 방법에 대한 자세한 것은 각 차트의 `notify*` 메소드를 참조하십시오.
-- Angular가 디버그 모드에서 실행된 경우, 일부 브라우저에는 퍼포먼스를 저하시키는 오버헤드가 있습니다. 실제 퍼포먼스를 평가할 경우, 항상 `--prod`를 사용하여 서비스하거나 빌드해야 합니다
+- Angular가 차트에 자동으로 데이터 변경을 알려주는 대신에 바인딩된 데이터가 변경된 방법을 컴포넌트에 알리도록 할 수 했습니다.
+ - 이러한 델타 알림은 Angular가 변경 검출을 실행할 때마다 100만 레코드 배열의 모든 변경을 비교하는 것보다 훨씬 효율적으로 실행할 수 있습니다.
+ - 바인딩된 데이터의 변경을 차트에 알리는 방법에 대한 자세한 것은 각 차트의 `notify*` 메소드를 참조하십시오.
+- Angular가 디버그 모드에서 실행된 경우, 일부 브라우저에는 퍼포먼스를 저하시키는 오버헤드가 있습니다. 실제 퍼포먼스를 평가할 경우, 항상 `--prod`를 사용하여 서비스하거나 빌드해야 합니다
> 참고: 애플리케이션에 성능 문제가 있는 경우, 디버그 빌드가 아닌 프로덕션 빌드에서 실행하면 차트 성능이 개선됩니다. 이러한 경우에는 프로덕션 빌드를 실행하십시오.
diff --git a/docs/angular/src/content/kr/components/category-chart-high-volume.md b/docs/angular/src/content/kr/components/category-chart-high-volume.md
index 907cf340f6..14cb7080cb 100644
--- a/docs/angular/src/content/kr/components/category-chart-high-volume.md
+++ b/docs/angular/src/content/kr/components/category-chart-high-volume.md
@@ -26,9 +26,9 @@ Ignite UI for Angular 카테고리 차트 컴포넌트는 다음의 데모에서
컴포넌트에 바인딩할 속성에 대량의 데이터를 저장할 경우, `@Component` 데코레이터에서 `changeDetection: ChangeDetectionStrategy.OnPush`를 설정해야 합니다. 이것을 설정하면 Angular에서 데이터 배열 내의 변경 사항을 자세히 검사하지 않으며, 변경 검출 주기마다 Angular가 필요하지 않습니다.
-- Angular가 차트에 자동으로 데이터 변경을 알려주는 대신에 바인딩된 데이터가 변경된 방법을 컴포넌트에 알리도록 할 수 했습니다.
- - 이러한 델타 알림은 Angular가 변경 검출을 실행할 때마다 100만 레코드 배열의 모든 변경을 비교하는 것보다 훨씬 효율적으로 실행할 수 있습니다.
- - 바인딩된 데이터의 변경을 차트에 알리는 방법에 대한 자세한 것은 각 차트의 `notify*` 메소드를 참조하십시오.
-- Angular가 디버그 모드에서 실행된 경우, 일부 브라우저에는 퍼포먼스를 저하시키는 오버헤드가 있습니다. 실제 퍼포먼스를 평가할 경우, 항상 `--prod`를 사용하여 서비스하거나 빌드해야 합니다
+- Angular가 차트에 자동으로 데이터 변경을 알려주는 대신에 바인딩된 데이터가 변경된 방법을 컴포넌트에 알리도록 할 수 했습니다.
+ - 이러한 델타 알림은 Angular가 변경 검출을 실행할 때마다 100만 레코드 배열의 모든 변경을 비교하는 것보다 훨씬 효율적으로 실행할 수 있습니다.
+ - 바인딩된 데이터의 변경을 차트에 알리는 방법에 대한 자세한 것은 각 차트의 `notify*` 메소드를 참조하십시오.
+- Angular가 디버그 모드에서 실행된 경우, 일부 브라우저에는 퍼포먼스를 저하시키는 오버헤드가 있습니다. 실제 퍼포먼스를 평가할 경우, 항상 `--prod`를 사용하여 서비스하거나 빌드해야 합니다
> 참고: 애플리케이션에 성능 문제가 있는 경우, 디버그 빌드가 아닌 프로덕션 빌드에서 실행하면 차트 성능이 개선됩니다. 이러한 경우에는 프로덕션 빌드를 실행하십시오.
diff --git a/docs/angular/src/content/kr/components/category-chart-highlighting.md b/docs/angular/src/content/kr/components/category-chart-highlighting.md
index 6cc7d2a60a..6d0d509a64 100644
--- a/docs/angular/src/content/kr/components/category-chart-highlighting.md
+++ b/docs/angular/src/content/kr/components/category-chart-highlighting.md
@@ -24,11 +24,11 @@ _language: kr
카테고리 차트 컴포넌트는 항목 위로 마우스를 가져간 경우, 3가지 유형의 강조 표시를 활성화할 수 있습니다.
-1. 시리즈 강조 표시는 포인터가 데이터 점 위에 있을 때 단일 데이터 점을 강조 표시합니다.
+1. 시리즈 강조 표시는 포인터가 데이터 점 위에 있을 때 단일 데이터 점을 강조 표시합니다.
-2. 항목 강조 표시는 해당 위치에 줄무늬 모양을 그리거나 해당 위치에 마커를 렌더링하여 시리즈의 항목을 강조 표시합니다.
+2. 항목 강조 표시는 해당 위치에 줄무늬 모양을 그리거나 해당 위치에 마커를 렌더링하여 시리즈의 항목을 강조 표시합니다.
-3. 카테고리 강조 표시는 차트의 모든 카테고리 축을 대상으로 합니다. 포인터 위치에 가장 가까운 축의 영역을 밝게 하는 모양을 그립니다.
+3. 카테고리 강조 표시는 차트의 모든 카테고리 축을 대상으로 합니다. 포인터 위치에 가장 가까운 축의 영역을 밝게 하는 모양을 그립니다.
```html
The Ignite UI for Angular Checkbox component is a selection control that allows users to make a binary choice for a certain condition. It behaves similarly to the native browser checkbox.
### Checkbox Demo
-
@@ -71,6 +71,7 @@ statusChanged()
// event handler logic
}
```
+
Enhance the component template by adding a checkbox for each task and then setting the corresponding property bindings:
```html
@@ -90,14 +91,14 @@ The final result would be something like that:
## API References
-* [IgxCheckboxComponent]({environment:angularApiUrl}/classes/igxcheckboxcomponent.html)
-* [IgxCheckboxComponent Styles]({environment:sassApiUrl}/themes#function-checkbox-theme)
-* [LabelPosition]({environment:angularApiUrl}/enums/labelposition.html)
+- [IgxCheckboxComponent]({environment:angularApiUrl}/classes/igxcheckboxcomponent.html)
+- [IgxCheckboxComponent Styles]({environment:sassApiUrl}/themes#function-checkbox-theme)
+- [LabelPosition]({environment:angularApiUrl}/enums/labelposition.html)
## Additional Resources
Our community is active and always welcoming to new ideas.
-* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
diff --git a/docs/angular/src/content/kr/components/chip.md b/docs/angular/src/content/kr/components/chip.md
index 9ad888a19e..35f7536be1 100644
--- a/docs/angular/src/content/kr/components/chip.md
+++ b/docs/angular/src/content/kr/components/chip.md
@@ -12,15 +12,15 @@ _language: kr
#### Demo
-
#### Initializing Chips
-The [`IgxChipComponent`]({environment:angularApiUrl}/classes/igxchipcomponent.html) is the main class for a chip elemenent and the [`IgxChipsAreaComponent`]({environment:angularApiUrl}/classes/igxchipsareacomponent.html) is the main class for a chip area. The chip area is used when handling more complex scenarios that require interaction between chips (dragging, selection, navigation etc.). The [`IgxChipComponent`]({environment:angularApiUrl}/classes/igxchipcomponent.html) has an [`id`]({environment:angularApiUrl}/classes/igxchipcomponent.html#id) input so that the different chips can be easily distinguished. If [`id`]({environment:angularApiUrl}/classes/igxchipcomponent.html#id) is not provided it will be automatically generated.
+The [`IgxChipComponent`]({environment:angularApiUrl}/classes/igxchipcomponent.html) is the main class for a chip element and the [`IgxChipsAreaComponent`]({environment:angularApiUrl}/classes/igxchipsareacomponent.html) is the main class for a chip area. The chip area is used when handling more complex scenarios that require interaction between chips (dragging, selection, navigation etc.). The [`IgxChipComponent`]({environment:angularApiUrl}/classes/igxchipcomponent.html) has an [`id`]({environment:angularApiUrl}/classes/igxchipcomponent.html#id) input so that the different chips can be easily distinguished. If [`id`]({environment:angularApiUrl}/classes/igxchipcomponent.html#id) is not provided it will be automatically generated.
Example of using [`igxChip`]({environment:angularApiUrl}/classes/igxchipcomponent.html) with [`igxChipArea`]({environment:angularApiUrl}/classes/igxchipsareacomponent.html):
@@ -194,17 +194,18 @@ The chip can be focused using the `Tab` key or by clicking on it. When in chip a
- SPACE or ENTER Fires the [`remove`]({environment:angularApiUrl}/classes/igxchipcomponent.html#remove) output so the chip deletion can be handled manually.
### Styling
-The igxChip allows styling through the [Ignite UI for Angular Theme Library](../themes/sass/component-themes.md). The chip's [theme]({environment:sassApiUrl}/themes#function-chip-theme) exposes a wide variety of properties, which allow the customization of many of the aspects of the chip.
+The igxChip allows styling through the [Ignite UI for Angular Theme Library](../themes/sass/component-themes.md). The chip's [theme]({environment:sassApiUrl}/themes#function-chip-theme) exposes a wide variety of properties, which allow the customization of many of the aspects of the chip.
- #### Importing global theme
+#### Importing global theme
To begin styling of the predefined chip layout, you need to import the `index` file, where all styling functions and mixins are located.
+
```scss
@import '~igniteui-angular/lib/core/styles/themes/index'
-```
+```
#### Defining custom theme
Next, create a new theme, that extends the [`chip-theme`]({environment:sassApiUrl}/themes#function-chip-theme) and accepts the parameters, required to customize the chip as desired.
-
+
```scss
$custom-theme: chip-theme(
@@ -219,10 +220,10 @@ $custom-theme: chip-theme(
$focus-selected-background: #ffcd0f,
$border-radius: 5px
);
-```
+```
#### Defining a custom color palette
-In the approach, that was described above, the color values were hardcoded. Alternatively, you can achieve greater flexibility, using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions.
+In the approach, that was described above, the color values were hardcoded. Alternatively, you can achieve greater flexibility, using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions.
`igx-palette` generates a color palette, based on provided primary and secondary colors.
```scss
@@ -233,9 +234,9 @@ $custom-palette: palette(
$primary: $black-color,
$secondary: $yellow-color
);
-```
+```
-After the custom palette has been generated, the `igx-color` function can be used to obtain different varieties of the primary and the secondary colors.
+After the custom palette has been generated, the `igx-color` function can be used to obtain different varieties of the primary and the secondary colors.
```scss
$custom-theme: chip-theme(
@@ -253,8 +254,8 @@ $custom-theme: chip-theme(
```
#### Defining custom schemas
-You can go even further and build flexible structure that has all the benefits of a [**schema**](../themes/sass/schemas.md). The **schema** is the recipe of a theme.
-Extend one of the two predefined schemas, that are provided for every component. In our case, we would use `$_light_chip`.
+You can go even further and build flexible structure that has all the benefits of a [**schema**](../themes/sass/schemas.md). The **schema** is the recipe of a theme.
+Extend one of the two predefined schemas, that are provided for every component. In our case, we would use `$_light_chip`.
```scss
$custom-chip-schema: extend($_light-chip, (
@@ -269,8 +270,9 @@ $custom-chip-schema: extend($_light-chip, (
focus-selected-background: (igx-color("secondary", 500)),
border-radius: 5px
));
-```
-In order for the custom schema to be applied, either `light`, or `dark` globals has to be extended. The whole process is actually supplying a component with a custom schema and adding it to the respective component theme afterwards.
+```
+
+In order for the custom schema to be applied, either `light`, or `dark` globals has to be extended. The whole process is actually supplying a component with a custom schema and adding it to the respective component theme afterwards.
```scss
$my-custom-schema: extend($light-schema, (
@@ -284,7 +286,8 @@ $custom-theme: chip-theme(
```
#### Applying the custom theme
-The easiest way to apply your theme is with a `sass` `@include` statement in the global styles file:
+The easiest way to apply your theme is with a `sass` `@include` statement in the global styles file:
+
```scss
@include chip($custom-theme);
```
@@ -298,7 +301,7 @@ This way, due to Angular's [ViewEncapsulation](https://angular.io/api/core/Compo
>[!NOTE]
>If the component is using an [`Emulated`](../themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, it is necessary to penetrate this encapsulation using `::ng-deep` in order to style the grid.
>[!NOTE]
- >Wrap the statement inside of a `:host` selector to prevent your styles from affecting elements *outside of* our component:
+ >Wrap the statement inside of a `:host` selector to prevent your styles from affecting elements _outside of_ our component:
```scss
:host {
@@ -306,22 +309,22 @@ This way, due to Angular's [ViewEncapsulation](https://angular.io/api/core/Compo
@include chip($custom-theme);
}
}
-```
+```
#### Demo
-
### API
-* [IgxChipComponent]({environment:angularApiUrl}/classes/igxchipcomponent.html)
-* [IgxChipComponent Styles]({environment:sassApiUrl}/themes#function-chip-theme)
-* [IgxChipsAreaComponent]({environment:angularApiUrl}/classes/igxchipsareacomponent.html)
+- [IgxChipComponent]({environment:angularApiUrl}/classes/igxchipcomponent.html)
+- [IgxChipComponent Styles]({environment:sassApiUrl}/themes#function-chip-theme)
+- [IgxChipsAreaComponent]({environment:angularApiUrl}/classes/igxchipsareacomponent.html)
### References
diff --git a/docs/angular/src/content/kr/components/circular-progress.md b/docs/angular/src/content/kr/components/circular-progress.md
index f51c01d840..098e717bc7 100644
--- a/docs/angular/src/content/kr/components/circular-progress.md
+++ b/docs/angular/src/content/kr/components/circular-progress.md
@@ -5,7 +5,7 @@ keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI w
_language: kr
---
-##Circular Progress
+## Circular Progress
The Ignite UI for Angular Circular Progress Indicator component provides a visual indicator of an application’s process as it changes. The circular indicator updates its appearance as its state changes.
@@ -19,8 +19,8 @@ The following example specifies the animation duration set to 5 seconds.
### Circular Progress Demo
-
@@ -29,6 +29,7 @@ The following example specifies the animation duration set to 5 seconds.
### Usage
Circular Progress Indicator can be used to show a user that he is in a process.
To get started with the Ignite UI for Angular Circular Progress, we should first import import the **IgxProgressBarModule** in the **app.module.ts** file:
+
```typescript
// app.module.ts
@@ -42,6 +43,7 @@ import { IgxProgressBarModule } from 'igniteui-angular';
})
export class AppModule {}
```
+
And now to have a better understanding how everything works, let's create a simple example, in which we will simulate a real process progress, that is
triggered on button click. In order to make our example better we will need to import some additional modules in the **app.module.ts** file.
@@ -57,6 +59,7 @@ import {
})
export class AppModule {}
```
+
Notice that the **igx-circular-bar** emits [`onProgressChanged`]({environment:angularApiUrl}/classes/igxcircularprogressbarcomponent.html#onprogresschanged) event that outputs an object that gives us `{currentValue: 65, previousValue: 64}` on each step.
```html
@@ -112,10 +115,10 @@ Notice that the **igx-circular-bar** emits [`onProgressChanged`]({environment:an
}
```
-And now if we set up everything correctly we should have the folllowing displayed in our browser:
+And now if we set up everything correctly we should have the following displayed in our browser:
-
@@ -124,11 +127,11 @@ And now if we set up everything correctly we should have the folllowing displaye
> [!NOTE]
> The default progress update is **1% of the [`max`]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html#max) value**, this occurs when the [`step`]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html#step) value is not defined. For faster progress, the [`step`]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html#step) value should be defined greater than (**[`max`]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html#max) * 1%**), for slower, it should be less than the default progress update.
-> When providing a value for the [`step`]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html#step) input, define this value greater than the [`value`]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html#value) input, otherwise there will be only one update, which gets **the value that is passed for progress update**.
+> When providing a value for the [`step`]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html#step) input, define this value greater than the [`value`]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html#value) input, otherwise there will be only one update, which gets **the value that is passed for progress update**.
### API
-* [IgxCircularProgressBarComponent]({environment:angularApiUrl}/classes/igxcircularprogressbarcomponent.html)
-* [IgxCircularProgressBarComponent Styles]({environment:sassApiUrl}/themes#function-progress-circular-theme)
+- [IgxCircularProgressBarComponent]({environment:angularApiUrl}/classes/igxcircularprogressbarcomponent.html)
+- [IgxCircularProgressBarComponent Styles]({environment:sassApiUrl}/themes#function-progress-circular-theme)
diff --git a/docs/angular/src/content/kr/components/combo-features.md b/docs/angular/src/content/kr/components/combo-features.md
index 9e5aaf6bdc..b501edf815 100644
--- a/docs/angular/src/content/kr/components/combo-features.md
+++ b/docs/angular/src/content/kr/components/combo-features.md
@@ -41,6 +41,7 @@ export class AppModule {}
```
The demo uses [igx-switch]({environment:angularApiUrl}/classes/igxswitchcomponent.html) component to toggle [igx-combo]({environment:angularApiUrl}/classes/igxcombocomponent.html) properties' values. Note that grouping is enabled/disabled by setting [groupKey]({environment:angularApiUrl}/classes/igxcombocomponent.html#groupkey) to corresponding data source entity or setting it to empty string.
+
```html
-* IgxComboComponent [**API Reference**]({environment:angularApiUrl}/classes/igxcombocomponent.html) and
+- IgxComboComponent [**API Reference**]({environment:angularApiUrl}/classes/igxcombocomponent.html) and
[**Themes Reference**]({environment:sassApiUrl}/themes#function-combo-theme).
## Additional Resources
-* [Combo Remote Binding](combo-remote.md)
-* [Combo Templates](combo-templates.md)
-* [Template Driven Forms Integration](input-group.md)
-* [Reactive Forms Integration](angular-reactive-form-validation.md)
-* [Single Select ComboBox](simple-combo.md)
-* [IgxSwitch](switch.md)
+- [Combo Remote Binding](combo-remote.md)
+- [Combo Templates](combo-templates.md)
+- [Template Driven Forms Integration](input-group.md)
+- [Reactive Forms Integration](angular-reactive-form-validation.md)
+- [Single Select ComboBox](simple-combo.md)
+- [IgxSwitch](switch.md)
Our community is active and always welcoming to new ideas.
-* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
diff --git a/docs/angular/src/content/kr/components/combo-remote.md b/docs/angular/src/content/kr/components/combo-remote.md
index 3a76561b4c..4a9f236298 100644
--- a/docs/angular/src/content/kr/components/combo-remote.md
+++ b/docs/angular/src/content/kr/components/combo-remote.md
@@ -70,6 +70,7 @@ When the data is returned from the service as an observable, then we can set it
```
+
Let's define the cases, when the [igx-combo]({environment:angularApiUrl}/classes/igxcombocomponent.html) will need to request new data:
- when combo is initialized
- when we scroll combo's list. Then combo will emit [dataPreLoad]({environment:angularApiUrl}/classes/igxcombocomponent.html#datapreload) along with the new combo `virtualizationState`, which allows to make a new request to the remote service.
@@ -135,13 +136,13 @@ export class ComboRemoteComponent implements OnInit {
## Additional Resources
-* [Combo Features](combo-features.md)
-* [Combo Templates](combo-templates.md)
-* [Template Driven Forms Integration](input-group.md)
-* [Reactive Forms Integration](angular-reactive-form-validation.md)
-* [Single Select ComboBox](simple-combo.md)
+- [Combo Features](combo-features.md)
+- [Combo Templates](combo-templates.md)
+- [Template Driven Forms Integration](input-group.md)
+- [Reactive Forms Integration](angular-reactive-form-validation.md)
+- [Single Select ComboBox](simple-combo.md)
Our community is active and always welcoming to new ideas.
-* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
diff --git a/docs/angular/src/content/kr/components/combo-templates.md b/docs/angular/src/content/kr/components/combo-templates.md
index b678bbe336..ddfd712249 100644
--- a/docs/angular/src/content/kr/components/combo-templates.md
+++ b/docs/angular/src/content/kr/components/combo-templates.md
@@ -74,12 +74,12 @@ Use selector `[igxComboItem]`:
```html
-
-
+
```
@@ -156,6 +156,7 @@ Use selector `[igxComboClearIcon]`:
### Templating combo input
The above-mentioned selectors, `[igxComboClearIcon]` and `[igxComboToggleIcon]`, used with templates will change how the respective buttons appear in the combo input.
Passing content inside of the `igx-combo` also allows templating of the combo input similar to the way an `igx-input-group` can be templated (using `igx-prefix`, `igx-suffix` and `[igxLabel]`). The code snippet below illustrates how to add an appropriate label and `igx-prefix` to the combo input, as well as changing the `clear` button icon:
+
```html
...
@@ -171,13 +172,13 @@ Passing content inside of the `igx-combo` also allows templating of the combo in
## Additional Resources
-* [Combo Features](combo-features.md)
-* [Combo Remote Binding](combo-remote.md)
-* [Template Driven Forms Integration](input-group.md)
-* [Reactive Forms Integration](angular-reactive-form-validation.md)
-* [Single Select ComboBox](simple-combo.md)
+- [Combo Features](combo-features.md)
+- [Combo Remote Binding](combo-remote.md)
+- [Template Driven Forms Integration](input-group.md)
+- [Reactive Forms Integration](angular-reactive-form-validation.md)
+- [Single Select ComboBox](simple-combo.md)
Our community is active and always welcoming to new ideas.
-* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
diff --git a/docs/angular/src/content/kr/components/combo.md b/docs/angular/src/content/kr/components/combo.md
index 1464feefe5..40db9b6876 100644
--- a/docs/angular/src/content/kr/components/combo.md
+++ b/docs/angular/src/content/kr/components/combo.md
@@ -63,6 +63,7 @@ export class ComboDemo implements OnInit {
}
}
```
+
> Note: If [displayKey]({environment:angularApiUrl}/classes/igxcombocomponent.html#displaykey) is omitted then [valueKey]({environment:angularApiUrl}/classes/igxcombocomponent.html#valuekey) entity will instead be used as item text.
## Features
@@ -110,9 +111,9 @@ When igxCombo is opened, allow custom values are enabled and add item button is
## API
-* [IgxComboComponent]({environment:angularApiUrl}/classes/igxcombocomponent.html)
-* [IgxComboComponent Styles]({environment:sassApiUrl}/themes#function-combo-theme)
-* [IgxOverlay Styles]({environment:sassApiUrl}/themes#function-overlay-theme)
+- [IgxComboComponent]({environment:angularApiUrl}/classes/igxcombocomponent.html)
+- [IgxComboComponent Styles]({environment:sassApiUrl}/themes#function-combo-theme)
+- [IgxOverlay Styles]({environment:sassApiUrl}/themes#function-overlay-theme)
## Known Issues
@@ -126,16 +127,16 @@ When igxCombo is opened, allow custom values are enabled and add item button is
## Additional Resources
-* [Combo Features](combo-features.md)
-* [Combo Remote Binding](combo-remote.md)
-* [Combo Templates](combo-templates.md)
-* [Template Driven Forms Integration](input-group.md)
-* [Reactive Forms Integration](angular-reactive-form-validation.md)
-* [Single Select ComboBox](simple-combo.md)
-* [IgxDropDownComponent]({environment:angularApiUrl}/classes/igxdropdowncomponent.html)
-* [IgxInputGroup]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html)
+- [Combo Features](combo-features.md)
+- [Combo Remote Binding](combo-remote.md)
+- [Combo Templates](combo-templates.md)
+- [Template Driven Forms Integration](input-group.md)
+- [Reactive Forms Integration](angular-reactive-form-validation.md)
+- [Single Select ComboBox](simple-combo.md)
+- [IgxDropDownComponent]({environment:angularApiUrl}/classes/igxdropdowncomponent.html)
+- [IgxInputGroup]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html)
Our community is active and always welcoming to new ideas.
-* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
diff --git a/docs/angular/src/content/kr/components/data-chart-axis-annotations.md b/docs/angular/src/content/kr/components/data-chart-axis-annotations.md
index 13101407ac..08559ad8a8 100644
--- a/docs/angular/src/content/kr/components/data-chart-axis-annotations.md
+++ b/docs/angular/src/content/kr/components/data-chart-axis-annotations.md
@@ -21,9 +21,9 @@ In the Ignite UI for Angular data chart component, you are able to add annotatio
In the Ignite UI for Angular data chart, the following are the series and layers that support axis annotations:
-- [`IgxCrosshairLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcrosshairlayercomponent.html)
-- [`IgxFinalValueLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxfinalvaluelayercomponent.html)
-- [`IgxValueOverlayComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxvalueoverlaycomponent.html)
+- [`IgxCrosshairLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcrosshairlayercomponent.html)
+- [`IgxFinalValueLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxfinalvaluelayercomponent.html)
+- [`IgxValueOverlayComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxvalueoverlaycomponent.html)
You can enable the axis annotations by setting the [`isAxisAnnotationEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxvalueoverlaycomponent.html#isaxisannotationenabled) property of the corresponding layer or overlay to `true`. In doing so, this will place a box on the corresponding owning axis or axes with the value that that particular overlay or layer represents at the point that it is currently at. For example, with the [`IgxCrosshairLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcrosshairlayercomponent.html), these annotations can appear on both the X and Y axes and will move around and change as you scroll around the plot area.
@@ -54,5 +54,5 @@ This code demonstrates how to create a Ignite UI for Angular data chart with eac
## Additional Resources
-- [Data Chart Series Annotations](data-chart-series-annotations.md)
-- [Value Overlay](data-chart-value-overlay.md)
+- [Data Chart Series Annotations](data-chart-series-annotations.md)
+- [Value Overlay](data-chart-value-overlay.md)
diff --git a/docs/angular/src/content/kr/components/data-chart-axis-locations.md b/docs/angular/src/content/kr/components/data-chart-axis-locations.md
index b88cd12a81..19b1beba49 100644
--- a/docs/angular/src/content/kr/components/data-chart-axis-locations.md
+++ b/docs/angular/src/content/kr/components/data-chart-axis-locations.md
@@ -63,6 +63,6 @@ _language: kr
## 추가 리소스
-- [축 유형](data-chart-axis-types.md)
-- [축 공유](data-chart-axis-sharing.md)
-- [시리즈 유형](data-chart-series-types.md)
+- [축 유형](data-chart-axis-types.md)
+- [축 공유](data-chart-axis-sharing.md)
+- [시리즈 유형](data-chart-series-types.md)
diff --git a/docs/angular/src/content/kr/components/data-chart-axis-sharing.md b/docs/angular/src/content/kr/components/data-chart-axis-sharing.md
index fcea0396e3..51ff58f008 100644
--- a/docs/angular/src/content/kr/components/data-chart-axis-sharing.md
+++ b/docs/angular/src/content/kr/components/data-chart-axis-sharing.md
@@ -63,5 +63,5 @@ _language: kr
## 추가 리소스
-- [축 유형](data-chart-axis-types.md)
-- [시리즈 유형](data-chart-series-types.md)
+- [축 유형](data-chart-axis-types.md)
+- [시리즈 유형](data-chart-series-types.md)
diff --git a/docs/angular/src/content/kr/components/data-chart-axis-types.md b/docs/angular/src/content/kr/components/data-chart-axis-types.md
index 5ab8b1e85d..284180651f 100644
--- a/docs/angular/src/content/kr/components/data-chart-axis-types.md
+++ b/docs/angular/src/content/kr/components/data-chart-axis-types.md
@@ -157,9 +157,9 @@ _language: kr
## 추가 리소스
-- [축 유형](data-chart-axis-types.md)
-- [축 공유](data-chart-axis-sharing.md)
-- [축 설정](data-chart-axis-settings.md)
-- [차트 범례](data-chart-legends.md)
-- [시리즈 마커](data-chart-series-markers.md)
-- [시리즈 유형](data-chart-series-types.md)
+- [축 유형](data-chart-axis-types.md)
+- [축 공유](data-chart-axis-sharing.md)
+- [축 설정](data-chart-axis-settings.md)
+- [차트 범례](data-chart-legends.md)
+- [시리즈 마커](data-chart-series-markers.md)
+- [시리즈 유형](data-chart-series-types.md)
diff --git a/docs/angular/src/content/kr/components/data-chart-data-sources.md b/docs/angular/src/content/kr/components/data-chart-data-sources.md
index 49d58022a7..9ca59e03bd 100644
--- a/docs/angular/src/content/kr/components/data-chart-data-sources.md
+++ b/docs/angular/src/content/kr/components/data-chart-data-sources.md
@@ -10,14 +10,14 @@ _language: kr
[`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxdatachartcomponent.html) 제어에서 모든 시리즈를 올바르게 렌더링하려면 특정 수치와 데이터 열 유형이 필요합니다. 이 항목에서는 각 시리즈 그룹에 데이터 소스를 구현하는 방법에 대한 예제를 표시합니다.
-- [카테고리 시리즈](data-chart-type-category-series.md)의 [SampleCategoryData](data-chart-data-sources-category.md)
-- [금융 시리즈](data-chart-type-financial-series.md)의 [SampleFinancialData](data-chart-data-sources-financial.md)
-- [폴라 시리즈](data-chart-type-polar-series.md)의 [SamplePolarData](data-chart-data-sources-polar.md)
-- [레이디얼 시리즈](data-chart-type-radial-series.md)의 [SampleRadialData](data-chart-data-sources-radial.md)
-- [범위 시리즈](data-chart-type-range-series.md)의 [SampleRangeData](data-chart-data-sources-range.md)
-- [분산 HD 시리즈](data-chart-type-scatter-hd-series.md)의 [SampleDensityData](data-chart-data-sources-density.md)
-- [분산 영역 시리즈](data-chart-type-scatter-contour-series.md)의 [SampleScatterData](data-chart-data-sources-scatter.md)
-- [분산 등고선 시리즈](data-chart-type-scatter-contour-series.md)의 [SampleScatterData](data-chart-data-sources-scatter.md)
-- [분산 버블 시리즈](data-chart-type-scatter-bubble-series.md)의 [SampleScatterStats](data-chart-data-sources-stats.md)
-- [분산 마커 시리즈](data-chart-type-scatter-point-series.md)의 [SampleScatterStats](data-chart-data-sources-stats.md)
-- [분산 모양 시리즈](data-chart-type-shape-series.md)의 [SampleShapeData](data-chart-data-sources-shape.md)
+- [카테고리 시리즈](data-chart-type-category-series.md)의 [SampleCategoryData](data-chart-data-sources-category.md)
+- [금융 시리즈](data-chart-type-financial-series.md)의 [SampleFinancialData](data-chart-data-sources-financial.md)
+- [폴라 시리즈](data-chart-type-polar-series.md)의 [SamplePolarData](data-chart-data-sources-polar.md)
+- [레이디얼 시리즈](data-chart-type-radial-series.md)의 [SampleRadialData](data-chart-data-sources-radial.md)
+- [범위 시리즈](data-chart-type-range-series.md)의 [SampleRangeData](data-chart-data-sources-range.md)
+- [분산 HD 시리즈](data-chart-type-scatter-hd-series.md)의 [SampleDensityData](data-chart-data-sources-density.md)
+- [분산 영역 시리즈](data-chart-type-scatter-contour-series.md)의 [SampleScatterData](data-chart-data-sources-scatter.md)
+- [분산 등고선 시리즈](data-chart-type-scatter-contour-series.md)의 [SampleScatterData](data-chart-data-sources-scatter.md)
+- [분산 버블 시리즈](data-chart-type-scatter-bubble-series.md)의 [SampleScatterStats](data-chart-data-sources-stats.md)
+- [분산 마커 시리즈](data-chart-type-scatter-point-series.md)의 [SampleScatterStats](data-chart-data-sources-stats.md)
+- [분산 모양 시리즈](data-chart-type-shape-series.md)의 [SampleShapeData](data-chart-data-sources-shape.md)
diff --git a/docs/angular/src/content/kr/components/data-chart-navigation.md b/docs/angular/src/content/kr/components/data-chart-navigation.md
index cd03d4b241..e6a40e060f 100644
--- a/docs/angular/src/content/kr/components/data-chart-navigation.md
+++ b/docs/angular/src/content/kr/components/data-chart-navigation.md
@@ -52,20 +52,20 @@ UI에서 탐색을 허용하려면 확대/축소를 허용하려는 방향에
[`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxdatachartcomponent.html) 제어의 탐색은 마우스나 키보드가 활성화된 상태에서 실행됩니다. 다음 조작은 기본적으로 다음의 마우스 또는 키보드 조작을 사용하여 호출할 수 있습니다:
-- **Panning**: 키보드의 화살표 키를 사용하거나 Shift 키를 누른 상태에서 마우스로 클릭하고 드래그합니다.
-- **Zoom In**: 키보드의 PageUp 키를 사용하거나 마우스 휠을 위로 회전시킵니다.
-- **Zoom Out**: 키보드의 PageDown 키를 사용하거나 마우스 휠을 아래로 회전시킵니다.
-- **차트 플롯 영역에 맞춤**: 키보드의 Home 키입니다. 이것에 대한 마우스 조작은 없습니다.
-- **영역 줌**: `DefaultInteraction` 속성을 기본값인 `DragZoom`으로 설정하고 플롯 영역 내에서 마우스를 클릭하고 드래그합니다.
+- **Panning**: 키보드의 화살표 키를 사용하거나 Shift 키를 누른 상태에서 마우스로 클릭하고 드래그합니다.
+- **Zoom In**: 키보드의 PageUp 키를 사용하거나 마우스 휠을 위로 회전시킵니다.
+- **Zoom Out**: 키보드의 PageDown 키를 사용하거나 마우스 휠을 아래로 회전시킵니다.
+- **차트 플롯 영역에 맞춤**: 키보드의 Home 키입니다. 이것에 대한 마우스 조작은 없습니다.
+- **영역 줌**: `DefaultInteraction` 속성을 기본값인 `DragZoom`으로 설정하고 플롯 영역 내에서 마우스를 클릭하고 드래그합니다.
확대/축소 및 이동 조작은 `DragModifier` 및 `PanModifier` 속성을 각각 설정하고 보조 키를 사용하여 활성화할 수도 있습니다. 이러한 속성은 다음의 보조 키로 설정할 수 있으며 누르면 해당 조작이 활성화됩니다:
-- Shift
-- Alt
-- Control
-- Windows 키
-- Apple 키
-- None
+- Shift
+- Alt
+- Control
+- Windows 키
+- Apple 키
+- None
다음 코드 조각은 차트에서 UI 탐색을 활성화하는 방법을 보여줍니다: 다음은 **Shift** 키를 누른 상태에서 확대/축소, **Alt** 키를 누른 상태에서 이동만 가능합니다:
@@ -113,11 +113,11 @@ The following code snippet demonstrates how to enable the overview plus detail p
[`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxdatachartcomponent.html) 제어는 차트에서 확대/축소 또는 이동 조작이 발생할 때마다 업데이트되는 여러 탐색 속성을 제공합니다. 이러한 각 속성을 설정하여 차트를 프로그래밍 방식으로 확대/축소 또는 이동할 수도 있습니다. 다음은 이러한 속성 목록입니다:
-- `WindowPositionHorizontal`: 차트에 표시되는 콘텐츠 뷰 직사각형의 X부분을 나타내는 수치 값입니다.
-- `WindowPositionVertical`: 차트에 표시되는 콘텐츠 뷰 직사각형의 Y부분을 나타내는 수치 값입니다.
-- `WindowRect`: 현재 뷰에 있는 차트 부분을 표시하는 직사각형을 나타내는 `IgRect` 객체입니다. 예를 들면, "0, 0, 1, 1"의 `WindowRect`는 전체 차트입니다.
-- [`windowScaleHorizontal`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxdatachartcomponent.html#windowscalehorizontal): 차트에 표시되는 콘텐츠 뷰 직사각형의 너비 부분을 나타내는 수치 값입니다.
-- [`windowScaleVertical`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxdatachartcomponent.html#windowscalevertical): 차트에 표시되는 콘텐츠 뷰 직사각형의 높이 부분을 나타내는 수치 값입니다.
+- `WindowPositionHorizontal`: 차트에 표시되는 콘텐츠 뷰 직사각형의 X부분을 나타내는 수치 값입니다.
+- `WindowPositionVertical`: 차트에 표시되는 콘텐츠 뷰 직사각형의 Y부분을 나타내는 수치 값입니다.
+- `WindowRect`: 현재 뷰에 있는 차트 부분을 표시하는 직사각형을 나타내는 `IgRect` 객체입니다. 예를 들면, "0, 0, 1, 1"의 `WindowRect`는 전체 차트입니다.
+- [`windowScaleHorizontal`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxdatachartcomponent.html#windowscalehorizontal): 차트에 표시되는 콘텐츠 뷰 직사각형의 너비 부분을 나타내는 수치 값입니다.
+- [`windowScaleVertical`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxdatachartcomponent.html#windowscalevertical): 차트에 표시되는 콘텐츠 뷰 직사각형의 높이 부분을 나타내는 수치 값입니다.
다음의 코드 조각은 [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxdatachartcomponent.html) 제어의 뷰를 프로그래밍 방식으로 변경하는 방법을 보여줍니다. 다음은 [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxdatachartcomponent.html) 제어를 나타내는 "chart"라는 변수가 있다고 가정한 경우입니다:
diff --git a/docs/angular/src/content/kr/components/data-chart-series-markers.md b/docs/angular/src/content/kr/components/data-chart-series-markers.md
index 25b8c65786..244b3edb23 100644
--- a/docs/angular/src/content/kr/components/data-chart-series-markers.md
+++ b/docs/angular/src/content/kr/components/data-chart-series-markers.md
@@ -24,14 +24,14 @@ _language: kr
대부분의 차트 시리즈는 다음과 같은 마커를 지원합니다:
-- 모든 [카테고리 시리즈](data-chart-type-category-series.md)
-- 모든 [폴라 시리즈](data-chart-type-polar-series.md)
-- 모든 [레이디얼 시리즈](data-chart-type-radial-series.md)
-- 분산 시리즈:
- - [분산 버블 시리즈](data-chart-type-scatter-bubble-series.md)
- - [분산점 시리즈](data-chart-type-scatter-point-series.md)
- - [분산 라인 시리즈](data-chart-type-scatter-point-series.md)
- - [분산 스플라인 시리즈](data-chart-type-scatter-point-series.md)
+- 모든 [카테고리 시리즈](data-chart-type-category-series.md)
+- 모든 [폴라 시리즈](data-chart-type-polar-series.md)
+- 모든 [레이디얼 시리즈](data-chart-type-radial-series.md)
+- 분산 시리즈:
+ - [분산 버블 시리즈](data-chart-type-scatter-bubble-series.md)
+ - [분산점 시리즈](data-chart-type-scatter-point-series.md)
+ - [분산 라인 시리즈](data-chart-type-scatter-point-series.md)
+ - [분산 스플라인 시리즈](data-chart-type-scatter-point-series.md)
## 마커 속성
@@ -74,6 +74,6 @@ This code snippet below demonstrate how to create custom marker with values of
## 추가 리소스
-- [축 유형](data-chart-axis-types.md)
-- [시리즈 유형](data-chart-series-types.md)
-- [시리즈 도구 설명](data-chart-series-tooltips.md)
+- [축 유형](data-chart-axis-types.md)
+- [시리즈 유형](data-chart-series-types.md)
+- [시리즈 도구 설명](data-chart-series-tooltips.md)
diff --git a/docs/angular/src/content/kr/components/data-chart-series-trendlines.md b/docs/angular/src/content/kr/components/data-chart-series-trendlines.md
index fb2126d08d..3bcbc189e3 100644
--- a/docs/angular/src/content/kr/components/data-chart-series-trendlines.md
+++ b/docs/angular/src/content/kr/components/data-chart-series-trendlines.md
@@ -24,20 +24,20 @@ _language: kr
추세선은 스택 시리즈 및 범위 시리즈를 제외한 모든 시리즈에서 지원됩니다. 다음은 차트 시리즈에서 사용할 수 있는 추세선 목록입니다:
-- [`None`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#none)
-- [`CubicFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#cubicfit)
-- [`CumulativeAverage`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#cumulativeaverage)
-- [`ExponentialAverage`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#exponentialaverage)
-- [`ExponentialFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#exponentialfit)
-- [`LinearFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#linearfit)
-- [`LogarithmicFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#logarithmicfit)
-- [`ModifiedAverage`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#modifiedaverage)
-- [`PowerLawFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#powerlawfit)
-- [`QuadraticFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#quadraticfit)
-- [`QuarticFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#quarticfit)
-- [`QuinticFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#quinticfit)
-- [`SimpleAverage`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#simpleaverage)
-- [`WeightedAverage`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#weightedaverage)
+- [`None`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#none)
+- [`CubicFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#cubicfit)
+- [`CumulativeAverage`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#cumulativeaverage)
+- [`ExponentialAverage`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#exponentialaverage)
+- [`ExponentialFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#exponentialfit)
+- [`LinearFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#linearfit)
+- [`LogarithmicFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#logarithmicfit)
+- [`ModifiedAverage`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#modifiedaverage)
+- [`PowerLawFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#powerlawfit)
+- [`QuadraticFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#quadraticfit)
+- [`QuarticFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#quarticfit)
+- [`QuinticFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#quinticfit)
+- [`SimpleAverage`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#simpleaverage)
+- [`WeightedAverage`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#weightedaverage)
다음 코드 조각은 [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxdatachartcomponent.html) 제어의 시리즈에 추세선을 추가하는 방법을 보여 줍니다:
diff --git a/docs/angular/src/content/kr/components/data-chart-series-types.md b/docs/angular/src/content/kr/components/data-chart-series-types.md
index 80278d0501..59b4e726f2 100644
--- a/docs/angular/src/content/kr/components/data-chart-series-types.md
+++ b/docs/angular/src/content/kr/components/data-chart-series-types.md
@@ -16,88 +16,88 @@ _language: kr
### 카테고리 시리즈
-- [AreaSeries](data-chart-type-category-series.md)
-- [BarSeries](data-chart-type-category-series.md)
-- [ColumnSeries](data-chart-type-category-series.md)
-- [LineSeries](data-chart-type-category-series.md)
-- [PointSeries](data-chart-type-category-series.md)
-- [SplineSeries](data-chart-type-category-series.md)
-- [SplineAreaSeries](data-chart-type-category-series.md)
-- [StepAreaSeries](data-chart-type-category-series.md)
-- [StepLineSeries](data-chart-type-category-series.md)
-- [WaterfallSeries](data-chart-type-category-series.md)
+- [AreaSeries](data-chart-type-category-series.md)
+- [BarSeries](data-chart-type-category-series.md)
+- [ColumnSeries](data-chart-type-category-series.md)
+- [LineSeries](data-chart-type-category-series.md)
+- [PointSeries](data-chart-type-category-series.md)
+- [SplineSeries](data-chart-type-category-series.md)
+- [SplineAreaSeries](data-chart-type-category-series.md)
+- [StepAreaSeries](data-chart-type-category-series.md)
+- [StepLineSeries](data-chart-type-category-series.md)
+- [WaterfallSeries](data-chart-type-category-series.md)
### 폴라 시리즈
-- [PolarAreaSeries](data-chart-type-polar-series.md)
-- [PolarLineSeries](data-chart-type-polar-series.md)
-- [PolarScatterSeries](data-chart-type-polar-series.md)
-- [PolarSplineSeries](data-chart-type-polar-series.md)
-- [PolarSplineAreaSeries](data-chart-type-polar-series.md)
+- [PolarAreaSeries](data-chart-type-polar-series.md)
+- [PolarLineSeries](data-chart-type-polar-series.md)
+- [PolarScatterSeries](data-chart-type-polar-series.md)
+- [PolarSplineSeries](data-chart-type-polar-series.md)
+- [PolarSplineAreaSeries](data-chart-type-polar-series.md)
### Radial Series
-- [RadialAreaSeries](data-chart-type-radial-series.md)
-- [RadialLineSeries](data-chart-type-radial-series.md)
-- [RadialColumnSeries](data-chart-type-radial-series.md)
-- [RadialPieSeries](data-chart-type-radial-series.md)
+- [RadialAreaSeries](data-chart-type-radial-series.md)
+- [RadialLineSeries](data-chart-type-radial-series.md)
+- [RadialColumnSeries](data-chart-type-radial-series.md)
+- [RadialPieSeries](data-chart-type-radial-series.md)
### 범위 시리즈
-- [RangeAreaSeries](data-chart-type-range-series.md)
-- [RangeColumnSeries](data-chart-type-range-series.md)
+- [RangeAreaSeries](data-chart-type-range-series.md)
+- [RangeColumnSeries](data-chart-type-range-series.md)
### 분산 시리즈
-- [분산 영역 시리즈](data-chart-type-scatter-area-series.md)
-- [분산 버블 시리즈](data-chart-type-scatter-bubble-series.md)
-- [분산 등고선 시리즈](data-chart-type-scatter-contour-series.md)
-- [분산 마커 시리즈](data-chart-type-scatter-point-series.md)
-- [분산 라인 시리즈](data-chart-type-scatter-point-series.md)
-- [분산 스플라인 시리즈](data-chart-type-scatter-point-series.md)
-- [분산 폴리곤 시리즈](data-chart-type-shape-series.md)
-- [분산 폴리라인 시리즈](data-chart-type-shape-series.md)
+- [분산 영역 시리즈](data-chart-type-scatter-area-series.md)
+- [분산 버블 시리즈](data-chart-type-scatter-bubble-series.md)
+- [분산 등고선 시리즈](data-chart-type-scatter-contour-series.md)
+- [분산 마커 시리즈](data-chart-type-scatter-point-series.md)
+- [분산 라인 시리즈](data-chart-type-scatter-point-series.md)
+- [분산 스플라인 시리즈](data-chart-type-scatter-point-series.md)
+- [분산 폴리곤 시리즈](data-chart-type-shape-series.md)
+- [분산 폴리라인 시리즈](data-chart-type-shape-series.md)
### 금융 시리즈
-- [FinancialPriceSeries(OHLC)](data-chart-type-financial-series.md)
-- [FinancialPriceSeries(Candlestick)](data-chart-type-financial-series.md)
+- [FinancialPriceSeries(OHLC)](data-chart-type-financial-series.md)
+- [FinancialPriceSeries(Candlestick)](data-chart-type-financial-series.md)
### 금융 오버레이
-- [BollingerBandsOverlay](data-chart-type-financial-series.md)
-- [PriceChannelOverlay](data-chart-type-financial-series.md)
+- [BollingerBandsOverlay](data-chart-type-financial-series.md)
+- [PriceChannelOverlay](data-chart-type-financial-series.md)
### 금융지표
-- [AbsoluteVolumeOscillatorIndicator](data-chart-type-financial-series.md)
-- [AccumulationDistributionIndicator](data-chart-type-financial-series.md)
-- [BollingerBandWidthIndicator](data-chart-type-financial-series.md)
-- [ChaikinVolatilityIndicator](data-chart-type-financial-series.md)
-- [ChaikinOscillatorIndicator](data-chart-type-financial-series.md)
-- [DetrendedPriceOscillatorIndicator](data-chart-type-financial-series.md)
-- [CommodityChannelIndexIndicator](data-chart-type-financial-series.md)
-- [EaseOfMovementIndicator](data-chart-type-financial-series.md)
-- [FastStochasticOscillatorIndicator](data-chart-type-financial-series.md)
-- [ForceIndexIndicator](data-chart-type-financial-series.md)
-- [FullStochasticOscillatorIndicator](data-chart-type-financial-series.md)
-- [MarketFacilitationIndexIndicator](data-chart-type-financial-series.md)
-- [MassIndexIndicator](data-chart-type-financial-series.md)
-- [MedianPriceIndicator](data-chart-type-financial-series.md)
-- [MoneyFlowIndexIndicator](data-chart-type-financial-series.md)
-- [MovingAverageConvergenceDivergenceIndicator](data-chart-type-financial-series.md)
-- [NegativeVolumeIndexIndicator](data-chart-type-financial-series.md)
-- [OnBalanceVolumeIndicator](data-chart-type-financial-series.md)
-- [PercentageVolumeOscillatorIndicator](data-chart-type-financial-series.md)
-- [PercentagePriceOscillatorIndicator](data-chart-type-financial-series.md)
-- [PositiveVolumeIndexIndicator](data-chart-type-financial-series.md)
-- [RateOfChangeAndMomentumIndicator](data-chart-type-financial-series.md)
-- [RelativeStrengthIndexIndicator](data-chart-type-financial-series.md)
-- [SlowStochasticOscillatorIndicator](data-chart-type-financial-series.md)
-- [StandardDeviationIndicator](data-chart-type-financial-series.md)
-- [StochRSIIndicator](data-chart-type-financial-series.md)
-- [TRIXIndicator](data-chart-type-financial-series.md)
-- [TypicalPriceIndicator](data-chart-type-financial-series.md)
-- [UltimateOscillatorIndicator](data-chart-type-financial-series.md)
-- [WeightedCloseIndicator](data-chart-type-financial-series.md)
-- [WilliamsPercentRIndicator](data-chart-type-financial-series.md)
+- [AbsoluteVolumeOscillatorIndicator](data-chart-type-financial-series.md)
+- [AccumulationDistributionIndicator](data-chart-type-financial-series.md)
+- [BollingerBandWidthIndicator](data-chart-type-financial-series.md)
+- [ChaikinVolatilityIndicator](data-chart-type-financial-series.md)
+- [ChaikinOscillatorIndicator](data-chart-type-financial-series.md)
+- [DetrendedPriceOscillatorIndicator](data-chart-type-financial-series.md)
+- [CommodityChannelIndexIndicator](data-chart-type-financial-series.md)
+- [EaseOfMovementIndicator](data-chart-type-financial-series.md)
+- [FastStochasticOscillatorIndicator](data-chart-type-financial-series.md)
+- [ForceIndexIndicator](data-chart-type-financial-series.md)
+- [FullStochasticOscillatorIndicator](data-chart-type-financial-series.md)
+- [MarketFacilitationIndexIndicator](data-chart-type-financial-series.md)
+- [MassIndexIndicator](data-chart-type-financial-series.md)
+- [MedianPriceIndicator](data-chart-type-financial-series.md)
+- [MoneyFlowIndexIndicator](data-chart-type-financial-series.md)
+- [MovingAverageConvergenceDivergenceIndicator](data-chart-type-financial-series.md)
+- [NegativeVolumeIndexIndicator](data-chart-type-financial-series.md)
+- [OnBalanceVolumeIndicator](data-chart-type-financial-series.md)
+- [PercentageVolumeOscillatorIndicator](data-chart-type-financial-series.md)
+- [PercentagePriceOscillatorIndicator](data-chart-type-financial-series.md)
+- [PositiveVolumeIndexIndicator](data-chart-type-financial-series.md)
+- [RateOfChangeAndMomentumIndicator](data-chart-type-financial-series.md)
+- [RelativeStrengthIndexIndicator](data-chart-type-financial-series.md)
+- [SlowStochasticOscillatorIndicator](data-chart-type-financial-series.md)
+- [StandardDeviationIndicator](data-chart-type-financial-series.md)
+- [StochRSIIndicator](data-chart-type-financial-series.md)
+- [TRIXIndicator](data-chart-type-financial-series.md)
+- [TypicalPriceIndicator](data-chart-type-financial-series.md)
+- [UltimateOscillatorIndicator](data-chart-type-financial-series.md)
+- [WeightedCloseIndicator](data-chart-type-financial-series.md)
+- [WilliamsPercentRIndicator](data-chart-type-financial-series.md)
diff --git a/docs/angular/src/content/kr/components/data-chart-type-category-series.md b/docs/angular/src/content/kr/components/data-chart-type-category-series.md
index 9c6bfbf8c0..f8044184a9 100644
--- a/docs/angular/src/content/kr/components/data-chart-type-category-series.md
+++ b/docs/angular/src/content/kr/components/data-chart-type-category-series.md
@@ -57,10 +57,10 @@ _language: kr
카테고리 시리즈에는 다음과 같은 데이터 요구 사항이 있습니다:
-- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함
-- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 카테고리 시리즈를 렌더링하지 않습니다.
-- 모든 데이터 항목에는 카테고리 축(예: [`IgxCategoryXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcategoryxaxiscomponent.html))의 [`IgxLabelComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxlabelcomponent.html) 속성에 매핑해야 하는 하나 이상의 데이터 열(문자열 또는 날짜 시간)이 포함되어 있어야 함
-- 모든 데이터 항목에는 카테고리 시리즈(예: [`IgxLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxlineseriescomponent.html))의 `ValueMemberPath` 속성을 사용하여 매핑하는 숫자 데이터 열이 하나 이상 있어야 합니다
+- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함
+- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 카테고리 시리즈를 렌더링하지 않습니다.
+- 모든 데이터 항목에는 카테고리 축(예: [`IgxCategoryXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcategoryxaxiscomponent.html))의 [`IgxLabelComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxlabelcomponent.html) 속성에 매핑해야 하는 하나 이상의 데이터 열(문자열 또는 날짜 시간)이 포함되어 있어야 함
+- 모든 데이터 항목에는 카테고리 시리즈(예: [`IgxLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxlineseriescomponent.html))의 `ValueMemberPath` 속성을 사용하여 매핑하는 숫자 데이터 열이 하나 이상 있어야 합니다
[SampleCategoryData](data-chart-data-sources-category.md)는 위의 데이터 요구 사항을 충족하는 데이터 소스로 사용할 수 있습니다.
@@ -146,12 +146,12 @@ import { IgxDataChartCategoryModule } from 'igniteui-angular-charts';
## 추가 리소스
-- [축 유형](data-chart-axis-types.md)
-- [축 공유](data-chart-axis-sharing.md)
-- [차트 범례](data-chart-legends.md)
-- [시리즈 주석](data-chart-series-annotations.md)
-- [시리즈 강조 표시](data-chart-series-highlighting.md)
-- [시리즈 마커](data-chart-series-markers.md)
-- [시리즈 도구 설명](data-chart-series-tooltips.md)
-- [시리즈 추세선](data-chart-series-trendlines.md)
-- [시리즈 유형](data-chart-series-types.md)
+- [축 유형](data-chart-axis-types.md)
+- [축 공유](data-chart-axis-sharing.md)
+- [차트 범례](data-chart-legends.md)
+- [시리즈 주석](data-chart-series-annotations.md)
+- [시리즈 강조 표시](data-chart-series-highlighting.md)
+- [시리즈 마커](data-chart-series-markers.md)
+- [시리즈 도구 설명](data-chart-series-tooltips.md)
+- [시리즈 추세선](data-chart-series-trendlines.md)
+- [시리즈 유형](data-chart-series-types.md)
diff --git a/docs/angular/src/content/kr/components/data-chart-type-financial-series.md b/docs/angular/src/content/kr/components/data-chart-type-financial-series.md
index d4940776fd..a6da816c36 100644
--- a/docs/angular/src/content/kr/components/data-chart-type-financial-series.md
+++ b/docs/angular/src/content/kr/components/data-chart-type-financial-series.md
@@ -29,47 +29,47 @@ _language: kr
금융 오버레이는 일반적으로 [`IgxFinancialPriceSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxfinancialpriceseriescomponent.html)
뒤에 표시되며 주가의 동향을 보여줍니다. 이러한 오버레이는 Y축에서 동일한 비율의 값을 사용하기 때문에 [`IgxFinancialPriceSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxfinancialpriceseriescomponent.html)를 표시하는 동일한 데이터 차트에 표시할 수 있습니다. 다음 목록은 모든 금융 오버레이 유형을 보여줍니다:
-- [`IgxBollingerBandsOverlayComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxbollingerbandsoverlaycomponent.html)(BBO)는 가격의 표준 편차를 기반으로 하므로 가격 변동폭을 반영합니다. 밴드는 표준 편차가 증가할 때 더 넓어지고 표준 편차가 감소할 때 더 좁아지며 이동 평균에 의해 평탄해집니다. 사용자가 조정할 수 있는 표준 편차 및 평탄한 기간을 제외하고 BollingerBandsOverlay 너비의 비율에 영향을 주는 사용자가 조정 가능한 승수가 있으며,
-- [`IgxPriceChannelOverlayComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxpricechanneloverlaycomponent.html)(PCO)는 가격 변동성 또는 2개의 평행선 간의 시간에 따른 가격 변화입니다. 아래 줄은 추세선으로 저가에 그려지고, 위쪽 줄은 채널선으로 고가에 기초합니다. 채널은 모든 시간대의 추세 방향을 보여줍니다. 가격 채널 또는 추세, 위, 아래 또는 옆으로 가능
+- [`IgxBollingerBandsOverlayComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxbollingerbandsoverlaycomponent.html)(BBO)는 가격의 표준 편차를 기반으로 하므로 가격 변동폭을 반영합니다. 밴드는 표준 편차가 증가할 때 더 넓어지고 표준 편차가 감소할 때 더 좁아지며 이동 평균에 의해 평탄해집니다. 사용자가 조정할 수 있는 표준 편차 및 평탄한 기간을 제외하고 BollingerBandsOverlay 너비의 비율에 영향을 주는 사용자가 조정 가능한 승수가 있으며,
+- [`IgxPriceChannelOverlayComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxpricechanneloverlaycomponent.html)(PCO)는 가격 변동성 또는 2개의 평행선 간의 시간에 따른 가격 변화입니다. 아래 줄은 추세선으로 저가에 그려지고, 위쪽 줄은 채널선으로 고가에 기초합니다. 채널은 모든 시간대의 추세 방향을 보여줍니다. 가격 채널 또는 추세, 위, 아래 또는 옆으로 가능
## 금융지표
금융지표는 종종 거래자들이 변화를 측정하고 주가의 추세를 보여 주기 위해 사용됩니다. 이러한 지표는 일반적으로 동일한 Y축 비율을 공유하지 않기 때문에 [`IgxFinancialPriceSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxfinancialpriceseriescomponent.html)의 차트 위 또는 아래에 별도의 차트로 표시됩니다. 단, 차트 제어는 원하는 경우, 여러 축을 사용하고 축을 공유하여 동일한 플롯 영역에 가격 시리즈와 지표를 나타내도록 지원합니다. 이에 대한 자세한 것은 [Axis Sharing and Multiple Axes](data-chart-axis-sharing.md) 항목을 참조하십시오. 또한, 모든 금융지표에는 인디케이터가 선, 열 또는 영역을 사용하여 렌더링되는지 여부를 결정하는 [`displayType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxfinancialpriceseriescomponent.html#displaytype) 속성이 있습니다. 다음 목록은 모든 금융지표 유형을 보여줍니다:
-- [`IgxAbsoluteVolumeOscillatorIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxabsolutevolumeoscillatorindicatorcomponent.html)(AVO)는 2개의 평균 볼륨 측정값의 차이를 계산합니다. 백분율 볼륨 오실레이터와 유사하지만 점수 범위는 -100%~+100%입니다. 인디케이터는 볼륨 추세가 증가하는지 또는 감소하는지 식별하는 데 사용됩니다. 사용자는 분석 기간을 선택할 수 있으며
-- [`IgxAccumulationDistributionIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxaccumulationdistributionindicatorcomponent.html)(ADI)는 매우 인기 있는 볼륨 관련 인디케이터입니다. 투자자가 매도 또는 매수에 대한 차이를 살펴봄으로써 주식, 증권 또는 지수의 공급 및 수요를 시간 경과에 따라 평가하며
-- [`IgxAverageDirectionalIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxaveragedirectionalindexindicatorcomponent.html) | (ADX)는 추세 방향에 상관없이 추세 강도를 측정합니다. 이 인디케이터는 일반적으로 주식 동향의 강도와 방향을 결정하는 데 사용되며
-- [`IgxAverageTrueRangeIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxaveragetruerangeindicatorcomponent.html) | (ATR)는 주어진 기간 내에 증권의 가격 이동이나 변동성을 측정합니다. 이 인디케이터는 가격 방향이나 지속 기간의 측정이 아니라 가격 이동 또는 변동성의 양입니다. 평균 참 범위(ATR)은 종종 매일, 매주 또는 매월을 포함한 여러 기준을 사용하여 14일 기간을 주기로 계산됩니다. 평균 참 범위는 지난 14일 기간의 TR 값의 지수 이동 평균입니다. 실제 사용된 기간은 사용자 선호에 따라 다를 수 있으며
-- [`IgxBollingerBandWidthIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxbollingerbandwidthindicatorcomponent.html) | (BBW)는 [`IgxBollingerBandsOverlayComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxbollingerbandsoverlaycomponent.html)와 함께 사용됩니다. 이 인디케이터는 주어진 점에서 볼링거 밴드 폭을 나타냅니다. 편차가 클수록 밴드가 넓어집니다. 대역폭(하한값)을 줄이면 표준 편차가 줄어들고 대역폭(상한값)을 넓히면 가격의 표준 편차가 증가함을 나타냅니다. [`IgxBollingerBandsOverlayComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxbollingerbandsoverlaycomponent.html)와 같은 계수 인자를 지원하여 값을 일치시킬 수 있으며
-- [`IgxChaikinVolatilityIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxchaikinvolatilityindicatorcomponent.html)(CHV)는 특정 기간 동안의 고가 및 저가 가격 차이의 지수 이동 평균의 변화율을 보여줌으로써 증권의 변동성을 반영합니다.
-- [`IgxChaikinOscillatorIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxchaikinoscillatorindicatorcomponent.html)(COI)는 누적/분포 인디케이터의 추세를 식별하는 데 사용됩니다. 체킨 오실레이터는 누적/분포 인디케이터의 3일 지수 이동 평균(EMA)에서 뺀 누적/분포 인디케이터의 10일 EMA입니다.
-- [`IgxCommodityChannelIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcommoditychannelindexindicatorcomponent.html)(CCI)는 증권의 주기적 추세를 파악하는 데 사용됩니다. 이 인디케이터는 증권 가격이 식별할 수 있는 주기에 따라 변한다는 가정에 기초한 것입니다. 특정 기간 동안의 표준 가격(SMATP)의 단순 이동 평균(SMA)과 이전 기간의 표준 가격(TP)의 차이를 상수와 절대 평균 편차의 곱으로 나눠 계산한 것입니다.
-- [`IgxDetrendedPriceOscillatorIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxdetrendedpriceoscillatorindicatorcomponent.html) (DPO)는 단기 추세를 파악하기 위해 장기 가격 동향을 제어하도록 설계되었습니다. 이것은 이동 평균의 변화에 의한 것이며 모멘텀 오실레이터가 아닙니다.
-- [`IgxEaseOfMovementIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxeaseofmovementindicatorcomponent.html)(EOM)는 증권 가격 변동에 필요한 볼륨을 파악하는 데 사용됩니다. 일반적으로 이동 평균으로 부드럽게 처리됩니다.
-- [`IgxFastStochasticOscillatorIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxfaststochasticoscillatorindicatorcomponent.html)(FSO)는 특정 기간 동안 고-저 범위에 비례하여 종가를 표시합니다. 스탁캐스틱 오실레이터의 3가지 유형: 패스트, 슬로우, 풀. 이 인디케이터는 0~100 비율을 사용하여 특정 기간 동안 고/저 범위에 비례한 현재 마감가의 관계를 나타내는 모멘텀 인디케이터입니다. 상승하는 시장에서는 가격이 100에 가깝고, 하락하는 시장에서는 가격이 0에 가깝다는 전제에 기반하고 있습니다. 이 인디케이터는 매수 또는 매도 차이를 식별하는 데 사용됩니다.
-- [`IgxForceIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxforceindexindicatorcomponent.html)(FII)는 금융 분석가들이 주식 추세가 긍정적인지 부정적인지를 판단하기 위해 사용하는 가격 및 볼륨 오실레이터입니다. 강도 지수는 오늘 종가에서 어제 종가를 뺀 다음 그 차액을 현재 날짜의 볼륨과 곱하여 계산합니다. 오늘 종가가 어제보다 높은 경우에는 강도는 긍정적입니다. 종가가 어제보다 낮은 경우에는 강도는 부정적입니다.
-- [`IgxFullStochasticOscillatorIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxfullstochasticoscillatorindicatorcomponent.html)(FSO)는 특정 기간 동안 고-저 범위에 비례하여 종가를 표시합니다. 이 인디케이터는 [`IgxSlowStochasticOscillatorIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxslowstochasticoscillatorindicatorcomponent.html)와 유사하지만 시간대 사용자 지정이 가능합니다.
-- [`IgxMarketFacilitationIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxmarketfacilitationindexindicatorcomponent.html)(MFI)는 효율성 측정을 위해 분석에 가격과 볼륨을 결합합니다. 낮은 가격과 높은 가격의 차이를 볼륨으로 나누어 계산됩니다.
-- [`IgxMassIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxmassindexindicatorcomponent.html)(MII)는 추세 역전을 찾는 데 사용됩니다. 가격 범위가 넓어지면 반전이 일어날 수 있다는 전제에 기반하고 있습니다. 이 계산은 이전 거래 범위(하이 마이너스 로우)를 비교합니다. EMA는 이러한 용도로 사용됩니다. 이 인디케이터는 상당한 움직임이 있으면 증가하고 작은 움직임이 있으면 감소하며
-- [`IgxMedianPriceIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxmedianpriceindicatorcomponent.html)(MPI)는 고가와 저가 사이의 중간점을 나타냅니다. 중간값은 중심 경향의 척도입니다. 이 인디케이터는 중간값의 차트를 표시합니다.
-- [`IgxMarketFacilitationIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxmarketfacilitationindexindicatorcomponent.html)(MFI)는 모멘텀 지표로 상대 강도 지수(RSI)와 유사하며, MFI는 증권에 들어오고 나가는 자금 흐름의 척도로 사용되며 추세 역전을 예측하는 데 사용할 수 있습니다. MFI 범위는 0~100까지이며 RSI처럼 해석됩니다.
-- [`IgxMovingAverageConvergenceDivergenceIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxmovingaverageconvergencedivergenceindicatorcomponent.html)(MACD)는 금융 서비스에서 가장 대표적인 인디케이터 중 하나입니다. 주가 추세의 강도, 방향, 모멘텀 또는 길이 변화를 파악하는 데 사용됩니다. MACD는 종가의 두 지수 이동 평균(EMA)의 차이로 계산됩니다. 그 차이는 시간 경과에 따라 차이의 이동 평균으로 차트화됩니다.
-- [`IgxNegativeVolumeIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxnegativevolumeindexindicatorcomponent.html)(NVI)는 [`IgxPositiveVolumeIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxpositivevolumeindexindicatorcomponent.html)와 함께 자주 사용됩니다. 이 인디케이터는 불 마켓을 파악하는 데 사용할 수 있습니다. 이 두 인디케이터는 적은 볼륨의 날에 스마트 머니 거래를 하며, 많은 볼륨의 날에 정보가 부족하거나 지나치게 낙관적인 투자자가 거래한다는 전제에 기반하고 있습니다.
-- [`IgxOnBalanceVolumeIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxonbalancevolumeindicatorcomponent.html)(OBV)는 주식의 총 판매량의 누계를 계산하고 해당 주식의 유입(구매) 또는 유출(판매) 여부를 표시합니다. 하루 동안의 총 판매량은 전날보다 가격이 높았는지 낮았는지에 따라 양수 또는 음수 값이 부여됩니다. 높은 종가는 양수 값을 산출하고, 낮은 종가는 음수 값을 발생합니다. 이 값은 누계에 누적됩니다.
-- [`IgxPercentagePriceOscillatorIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxpercentagepriceoscillatorindicatorcomponent.html)(PPO)는 두 이동 평균 사이의 차이를 보여줍니다. 이 차이는 큰 이동 평균의 백분율로 표시됩니다. 최종 사용자는 분석 기간을 선택합니다.
-- [`IgxPercentageVolumeOscillatorIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxpercentagevolumeoscillatorindicatorcomponent.html)(PVO)는 장기 및 단기 기간을 사용하여 완만해진 볼륨 사이의 백분율 차이입니다. 이 인디케이터는 0을 중심으로 맴돕니다. 사용자는 분석할 다양한 기간 값을 선택할 수 있습니다. 이 인디케이터는 그래픽으로 표시하면 볼륨 패턴을 감지하는 데 유용할 수 있습니다. PVO가 증가하면 볼륨 수준이 증가하고, PVO가 감소하면 볼륨 수준이 감소함을 나타냅니다.
-- [`IgxPositiveVolumeIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxpositivevolumeindexindicatorcomponent.html)(PVI)는 네거티브 볼륨 인덱스와 함께 사용되며 불 마켓을 파악하는 데 사용할 수 있습니다. 이 두 인디케이터는 적은 볼륨의 날에 스마트 머니 거래를 하며, 많은 볼륨의 날에 정보가 부족하거나 지나치게 낙관적인 투자자가 거래한다는 전제에 기반하고 있습니다.
-- [`IgxPriceVolumeTrendIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxpricevolumetrendindicatorcomponent.html)(PVT)는 일일 볼륨의 일부를 더하거나 빼서 금전 흐름을 측정하는 데 사용되는 모멘텀 기반의 인디케이터입니다. 이 가산 또는 감산 값은 전날 종가 대비 현재 날의 가격 상승 또는 하락 량에 따라 달라집니다. 이 인디케이터는 주로 추세를 확인하는 데 사용되며 또한 차이로 인해 발생할 수 있는 거래 신호를 포착하기 위해 사용됩니다.
-- [`IgxPriceVolumeTrendIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxpricevolumetrendindicatorcomponent.html)(PVT)는 일일 볼륨의 일부를 더하거나 빼서 금전 흐름을 측정하는 데 사용되는 모멘텀 기반의 인디케이터입니다. 이 가산 또는 감산 값은 전날 종가 대비 현재 날의 가격 상승 또는 하락 량에 따라 달라집니다. 이 인디케이터는 주로 추세를 확인하는 데 사용되며 또한 차이로 인해 발생할 수 있는 거래 신호를 포착하기 위해 사용됩니다.
-- [`IgxRelativeStrengthIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxrelativestrengthindexindicatorcomponent.html)(RSI)는 일반적으로 특정 기간 동안 종가에 따라 산출된 시장 강세/약세의 측정에 사용됩니다. 가격은 시장이 강세 기간일 때 높고, 약세 기간일 때 낮다는 전제에 기반하고 있습니다. RSI는 최고치 대 최저치의 비율입니다. 범위는 0~100입니다.
-- [`IgxSlowStochasticOscillatorIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxslowstochasticoscillatorindicatorcomponent.html)(SSO)는 특정 기간 동안 고-저 범위에 비례하여 종가를 표시합니다. 이 인디케이터는 구매 또는 판매 차이를 파악하는 데 사용되며, 이동 평균(SMA)에 3일 기간을 사용합니다.
-- [`IgxStandardDeviationIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxstandarddeviationindicatorcomponent.html)(SDI)는 주가나 변동성의 통계적 변이성을 측정합니다. 개인 증권의 종가와 평균 증권의 종가 차이를 분산이라고 합니다. 분산이 클수록 표준 편차는 더 커지며 따라서 변동성이 커집니다. 분산이 작을수록(개인 종가와 평균 가격의 차이) 표준 편차가 작아지고 가격 변동성이 낮아집니다.
-- [`IgxStochRSIIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxstochrsiindicatorcomponent.html)(SRSI)는 특정 기간 내에 증권을 과도하게 구매하거나 초과 판매할 경우에 측정합니다. 값 범위는 0~1입니다. 이 인디케이터는 [`IgxRelativeStrengthIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxrelativestrengthindexindicatorcomponent.html) (RSI) 데이터에 스탁캐스틱 오실레이터 수식을 적용하여 계산합니다.
-- [`IgxTRIXIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxtrixindicatorcomponent.html)(TRIX)는 과다 매입 또는 과다 매도된 증권을 식별하는 데 사용되는 모멘텀 측정입니다. 다른 오실레이터와 마찬가지로 TRIX 점수도 0을 중심으로 맴돕니다. 양수 값은 과다 매입된 증권을 나타내며, 음수 값은 과다 매도된 증권을 나타냅니다. TRIX는 특정 기간 동안 가격의 3배 지수 이동 평균을 사용하여 계산합니다. 신호 라인은 증권 가격이 향후 어디에 위치 할지를 나타내는 데 자주 사용됩니다.
-- [`IgxTypicalPriceIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxtypicalpriceindicatorcomponent.html)(TPI)는 특정 기간 동안 증권의 고가, 저가 및 종가의 산술 평균을 나타내는 일반적인 금융 피벗 포인트입니다.
-- [`IgxUltimateOscillatorIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxultimateoscillatorindicatorcomponent.html)(UOI)는 단일 기간을 기준으로 하는 다른 인디케이터와 관련된 변동성과 노이즈를 줄이기 위해 3가지 다른 기간의 가중 평균을 사용합니다. 이것은 범위 제한 인디케이터이므로 지수는 0~100입니다.
-- [`IgxWeightedCloseIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxweightedcloseindicatorcomponent.html)(WCI)는 하루 동안의 고가, 저가 및 종가 평균을 나타내는 점에서 [`IgxTypicalPriceIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxtypicalpriceindicatorcomponent.html)와 유사합니다. 단, 이 인디케이터는 종가에 더 중점을 두며 산술 평균을 계산할 때 2번 포함됩니다.
-- [`IgxWilliamsPercentRIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxwilliamspercentrindicatorcomponent.html)(WPRI)는 스탁캐스틱 오실레이터와 유사합니다. 단, 비율 범위는 0~-100입니다. 과다 매입 및 과다 매도 증권을 식별하는 데 유용합니다. 이 인디케이터는 해당 기간의 가장 높은 최고치와 해당 기간의 가장 높은 최고치에서 가장 낮은 최저치를 뺀 값의 현재 종가 사이의 차이로 나누어 계산합니다.
+- [`IgxAbsoluteVolumeOscillatorIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxabsolutevolumeoscillatorindicatorcomponent.html)(AVO)는 2개의 평균 볼륨 측정값의 차이를 계산합니다. 백분율 볼륨 오실레이터와 유사하지만 점수 범위는 -100%~+100%입니다. 인디케이터는 볼륨 추세가 증가하는지 또는 감소하는지 식별하는 데 사용됩니다. 사용자는 분석 기간을 선택할 수 있으며
+- [`IgxAccumulationDistributionIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxaccumulationdistributionindicatorcomponent.html)(ADI)는 매우 인기 있는 볼륨 관련 인디케이터입니다. 투자자가 매도 또는 매수에 대한 차이를 살펴봄으로써 주식, 증권 또는 지수의 공급 및 수요를 시간 경과에 따라 평가하며
+- [`IgxAverageDirectionalIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxaveragedirectionalindexindicatorcomponent.html) | (ADX)는 추세 방향에 상관없이 추세 강도를 측정합니다. 이 인디케이터는 일반적으로 주식 동향의 강도와 방향을 결정하는 데 사용되며
+- [`IgxAverageTrueRangeIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxaveragetruerangeindicatorcomponent.html) | (ATR)는 주어진 기간 내에 증권의 가격 이동이나 변동성을 측정합니다. 이 인디케이터는 가격 방향이나 지속 기간의 측정이 아니라 가격 이동 또는 변동성의 양입니다. 평균 참 범위(ATR)은 종종 매일, 매주 또는 매월을 포함한 여러 기준을 사용하여 14일 기간을 주기로 계산됩니다. 평균 참 범위는 지난 14일 기간의 TR 값의 지수 이동 평균입니다. 실제 사용된 기간은 사용자 선호에 따라 다를 수 있으며
+- [`IgxBollingerBandWidthIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxbollingerbandwidthindicatorcomponent.html) | (BBW)는 [`IgxBollingerBandsOverlayComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxbollingerbandsoverlaycomponent.html)와 함께 사용됩니다. 이 인디케이터는 주어진 점에서 볼링거 밴드 폭을 나타냅니다. 편차가 클수록 밴드가 넓어집니다. 대역폭(하한값)을 줄이면 표준 편차가 줄어들고 대역폭(상한값)을 넓히면 가격의 표준 편차가 증가함을 나타냅니다. [`IgxBollingerBandsOverlayComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxbollingerbandsoverlaycomponent.html)와 같은 계수 인자를 지원하여 값을 일치시킬 수 있으며
+- [`IgxChaikinVolatilityIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxchaikinvolatilityindicatorcomponent.html)(CHV)는 특정 기간 동안의 고가 및 저가 가격 차이의 지수 이동 평균의 변화율을 보여줌으로써 증권의 변동성을 반영합니다.
+- [`IgxChaikinOscillatorIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxchaikinoscillatorindicatorcomponent.html)(COI)는 누적/분포 인디케이터의 추세를 식별하는 데 사용됩니다. 체킨 오실레이터는 누적/분포 인디케이터의 3일 지수 이동 평균(EMA)에서 뺀 누적/분포 인디케이터의 10일 EMA입니다.
+- [`IgxCommodityChannelIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcommoditychannelindexindicatorcomponent.html)(CCI)는 증권의 주기적 추세를 파악하는 데 사용됩니다. 이 인디케이터는 증권 가격이 식별할 수 있는 주기에 따라 변한다는 가정에 기초한 것입니다. 특정 기간 동안의 표준 가격(SMATP)의 단순 이동 평균(SMA)과 이전 기간의 표준 가격(TP)의 차이를 상수와 절대 평균 편차의 곱으로 나눠 계산한 것입니다.
+- [`IgxDetrendedPriceOscillatorIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxdetrendedpriceoscillatorindicatorcomponent.html) (DPO)는 단기 추세를 파악하기 위해 장기 가격 동향을 제어하도록 설계되었습니다. 이것은 이동 평균의 변화에 의한 것이며 모멘텀 오실레이터가 아닙니다.
+- [`IgxEaseOfMovementIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxeaseofmovementindicatorcomponent.html)(EOM)는 증권 가격 변동에 필요한 볼륨을 파악하는 데 사용됩니다. 일반적으로 이동 평균으로 부드럽게 처리됩니다.
+- [`IgxFastStochasticOscillatorIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxfaststochasticoscillatorindicatorcomponent.html)(FSO)는 특정 기간 동안 고-저 범위에 비례하여 종가를 표시합니다. 스탁캐스틱 오실레이터의 3가지 유형: 패스트, 슬로우, 풀. 이 인디케이터는 0~100 비율을 사용하여 특정 기간 동안 고/저 범위에 비례한 현재 마감가의 관계를 나타내는 모멘텀 인디케이터입니다. 상승하는 시장에서는 가격이 100에 가깝고, 하락하는 시장에서는 가격이 0에 가깝다는 전제에 기반하고 있습니다. 이 인디케이터는 매수 또는 매도 차이를 식별하는 데 사용됩니다.
+- [`IgxForceIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxforceindexindicatorcomponent.html)(FII)는 금융 분석가들이 주식 추세가 긍정적인지 부정적인지를 판단하기 위해 사용하는 가격 및 볼륨 오실레이터입니다. 강도 지수는 오늘 종가에서 어제 종가를 뺀 다음 그 차액을 현재 날짜의 볼륨과 곱하여 계산합니다. 오늘 종가가 어제보다 높은 경우에는 강도는 긍정적입니다. 종가가 어제보다 낮은 경우에는 강도는 부정적입니다.
+- [`IgxFullStochasticOscillatorIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxfullstochasticoscillatorindicatorcomponent.html)(FSO)는 특정 기간 동안 고-저 범위에 비례하여 종가를 표시합니다. 이 인디케이터는 [`IgxSlowStochasticOscillatorIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxslowstochasticoscillatorindicatorcomponent.html)와 유사하지만 시간대 사용자 지정이 가능합니다.
+- [`IgxMarketFacilitationIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxmarketfacilitationindexindicatorcomponent.html)(MFI)는 효율성 측정을 위해 분석에 가격과 볼륨을 결합합니다. 낮은 가격과 높은 가격의 차이를 볼륨으로 나누어 계산됩니다.
+- [`IgxMassIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxmassindexindicatorcomponent.html)(MII)는 추세 역전을 찾는 데 사용됩니다. 가격 범위가 넓어지면 반전이 일어날 수 있다는 전제에 기반하고 있습니다. 이 계산은 이전 거래 범위(하이 마이너스 로우)를 비교합니다. EMA는 이러한 용도로 사용됩니다. 이 인디케이터는 상당한 움직임이 있으면 증가하고 작은 움직임이 있으면 감소하며
+- [`IgxMedianPriceIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxmedianpriceindicatorcomponent.html)(MPI)는 고가와 저가 사이의 중간점을 나타냅니다. 중간값은 중심 경향의 척도입니다. 이 인디케이터는 중간값의 차트를 표시합니다.
+- [`IgxMarketFacilitationIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxmarketfacilitationindexindicatorcomponent.html)(MFI)는 모멘텀 지표로 상대 강도 지수(RSI)와 유사하며, MFI는 증권에 들어오고 나가는 자금 흐름의 척도로 사용되며 추세 역전을 예측하는 데 사용할 수 있습니다. MFI 범위는 0~100까지이며 RSI처럼 해석됩니다.
+- [`IgxMovingAverageConvergenceDivergenceIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxmovingaverageconvergencedivergenceindicatorcomponent.html)(MACD)는 금융 서비스에서 가장 대표적인 인디케이터 중 하나입니다. 주가 추세의 강도, 방향, 모멘텀 또는 길이 변화를 파악하는 데 사용됩니다. MACD는 종가의 두 지수 이동 평균(EMA)의 차이로 계산됩니다. 그 차이는 시간 경과에 따라 차이의 이동 평균으로 차트화됩니다.
+- [`IgxNegativeVolumeIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxnegativevolumeindexindicatorcomponent.html)(NVI)는 [`IgxPositiveVolumeIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxpositivevolumeindexindicatorcomponent.html)와 함께 자주 사용됩니다. 이 인디케이터는 불 마켓을 파악하는 데 사용할 수 있습니다. 이 두 인디케이터는 적은 볼륨의 날에 스마트 머니 거래를 하며, 많은 볼륨의 날에 정보가 부족하거나 지나치게 낙관적인 투자자가 거래한다는 전제에 기반하고 있습니다.
+- [`IgxOnBalanceVolumeIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxonbalancevolumeindicatorcomponent.html)(OBV)는 주식의 총 판매량의 누계를 계산하고 해당 주식의 유입(구매) 또는 유출(판매) 여부를 표시합니다. 하루 동안의 총 판매량은 전날보다 가격이 높았는지 낮았는지에 따라 양수 또는 음수 값이 부여됩니다. 높은 종가는 양수 값을 산출하고, 낮은 종가는 음수 값을 발생합니다. 이 값은 누계에 누적됩니다.
+- [`IgxPercentagePriceOscillatorIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxpercentagepriceoscillatorindicatorcomponent.html)(PPO)는 두 이동 평균 사이의 차이를 보여줍니다. 이 차이는 큰 이동 평균의 백분율로 표시됩니다. 최종 사용자는 분석 기간을 선택합니다.
+- [`IgxPercentageVolumeOscillatorIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxpercentagevolumeoscillatorindicatorcomponent.html)(PVO)는 장기 및 단기 기간을 사용하여 완만해진 볼륨 사이의 백분율 차이입니다. 이 인디케이터는 0을 중심으로 맴돕니다. 사용자는 분석할 다양한 기간 값을 선택할 수 있습니다. 이 인디케이터는 그래픽으로 표시하면 볼륨 패턴을 감지하는 데 유용할 수 있습니다. PVO가 증가하면 볼륨 수준이 증가하고, PVO가 감소하면 볼륨 수준이 감소함을 나타냅니다.
+- [`IgxPositiveVolumeIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxpositivevolumeindexindicatorcomponent.html)(PVI)는 네거티브 볼륨 인덱스와 함께 사용되며 불 마켓을 파악하는 데 사용할 수 있습니다. 이 두 인디케이터는 적은 볼륨의 날에 스마트 머니 거래를 하며, 많은 볼륨의 날에 정보가 부족하거나 지나치게 낙관적인 투자자가 거래한다는 전제에 기반하고 있습니다.
+- [`IgxPriceVolumeTrendIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxpricevolumetrendindicatorcomponent.html)(PVT)는 일일 볼륨의 일부를 더하거나 빼서 금전 흐름을 측정하는 데 사용되는 모멘텀 기반의 인디케이터입니다. 이 가산 또는 감산 값은 전날 종가 대비 현재 날의 가격 상승 또는 하락 량에 따라 달라집니다. 이 인디케이터는 주로 추세를 확인하는 데 사용되며 또한 차이로 인해 발생할 수 있는 거래 신호를 포착하기 위해 사용됩니다.
+- [`IgxPriceVolumeTrendIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxpricevolumetrendindicatorcomponent.html)(PVT)는 일일 볼륨의 일부를 더하거나 빼서 금전 흐름을 측정하는 데 사용되는 모멘텀 기반의 인디케이터입니다. 이 가산 또는 감산 값은 전날 종가 대비 현재 날의 가격 상승 또는 하락 량에 따라 달라집니다. 이 인디케이터는 주로 추세를 확인하는 데 사용되며 또한 차이로 인해 발생할 수 있는 거래 신호를 포착하기 위해 사용됩니다.
+- [`IgxRelativeStrengthIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxrelativestrengthindexindicatorcomponent.html)(RSI)는 일반적으로 특정 기간 동안 종가에 따라 산출된 시장 강세/약세의 측정에 사용됩니다. 가격은 시장이 강세 기간일 때 높고, 약세 기간일 때 낮다는 전제에 기반하고 있습니다. RSI는 최고치 대 최저치의 비율입니다. 범위는 0~100입니다.
+- [`IgxSlowStochasticOscillatorIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxslowstochasticoscillatorindicatorcomponent.html)(SSO)는 특정 기간 동안 고-저 범위에 비례하여 종가를 표시합니다. 이 인디케이터는 구매 또는 판매 차이를 파악하는 데 사용되며, 이동 평균(SMA)에 3일 기간을 사용합니다.
+- [`IgxStandardDeviationIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxstandarddeviationindicatorcomponent.html)(SDI)는 주가나 변동성의 통계적 변이성을 측정합니다. 개인 증권의 종가와 평균 증권의 종가 차이를 분산이라고 합니다. 분산이 클수록 표준 편차는 더 커지며 따라서 변동성이 커집니다. 분산이 작을수록(개인 종가와 평균 가격의 차이) 표준 편차가 작아지고 가격 변동성이 낮아집니다.
+- [`IgxStochRSIIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxstochrsiindicatorcomponent.html)(SRSI)는 특정 기간 내에 증권을 과도하게 구매하거나 초과 판매할 경우에 측정합니다. 값 범위는 0~1입니다. 이 인디케이터는 [`IgxRelativeStrengthIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxrelativestrengthindexindicatorcomponent.html) (RSI) 데이터에 스탁캐스틱 오실레이터 수식을 적용하여 계산합니다.
+- [`IgxTRIXIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxtrixindicatorcomponent.html)(TRIX)는 과다 매입 또는 과다 매도된 증권을 식별하는 데 사용되는 모멘텀 측정입니다. 다른 오실레이터와 마찬가지로 TRIX 점수도 0을 중심으로 맴돕니다. 양수 값은 과다 매입된 증권을 나타내며, 음수 값은 과다 매도된 증권을 나타냅니다. TRIX는 특정 기간 동안 가격의 3배 지수 이동 평균을 사용하여 계산합니다. 신호 라인은 증권 가격이 향후 어디에 위치 할지를 나타내는 데 자주 사용됩니다.
+- [`IgxTypicalPriceIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxtypicalpriceindicatorcomponent.html)(TPI)는 특정 기간 동안 증권의 고가, 저가 및 종가의 산술 평균을 나타내는 일반적인 금융 피벗 포인트입니다.
+- [`IgxUltimateOscillatorIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxultimateoscillatorindicatorcomponent.html)(UOI)는 단일 기간을 기준으로 하는 다른 인디케이터와 관련된 변동성과 노이즈를 줄이기 위해 3가지 다른 기간의 가중 평균을 사용합니다. 이것은 범위 제한 인디케이터이므로 지수는 0~100입니다.
+- [`IgxWeightedCloseIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxweightedcloseindicatorcomponent.html)(WCI)는 하루 동안의 고가, 저가 및 종가 평균을 나타내는 점에서 [`IgxTypicalPriceIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxtypicalpriceindicatorcomponent.html)와 유사합니다. 단, 이 인디케이터는 종가에 더 중점을 두며 산술 평균을 계산할 때 2번 포함됩니다.
+- [`IgxWilliamsPercentRIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxwilliamspercentrindicatorcomponent.html)(WPRI)는 스탁캐스틱 오실레이터와 유사합니다. 단, 비율 범위는 0~-100입니다. 과다 매입 및 과다 매도 증권을 식별하는 데 유용합니다. 이 인디케이터는 해당 기간의 가장 높은 최고치와 해당 기간의 가장 높은 최고치에서 가장 낮은 최저치를 뺀 값의 현재 종가 사이의 차이로 나누어 계산합니다.
## 필요한 축
@@ -79,10 +79,10 @@ _language: kr
금융 시리즈, 인디케이터 및 오버레이의 데이터 요구 사항은 다음과 같습니다:
-- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함
-- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 금융 시리즈를 렌더링하지 않습니다.
-- 모든 데이터 항목에는 금융 축의 `라벨` 속성(예: [`IgxCategoryXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcategoryxaxiscomponent.html))에 매핑해야 하는 하나 이상의 데이터 열(문자열 또는 날짜 시간)이 포함되어 있어야 함
-- 모든 데이터 항목에는 금융 시리즈의 속성을 사용하여 매핑해야 하는 5개의 숫자 데이터 열을 이 포함되어 있어야 함: `OpenMemberPath`, `HighMemberPath`, `LowMemberPath`, `CloseMemberPath`, `VolumeMemberPath`
+- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함
+- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 금융 시리즈를 렌더링하지 않습니다.
+- 모든 데이터 항목에는 금융 축의 `라벨` 속성(예: [`IgxCategoryXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcategoryxaxiscomponent.html))에 매핑해야 하는 하나 이상의 데이터 열(문자열 또는 날짜 시간)이 포함되어 있어야 함
+- 모든 데이터 항목에는 금융 시리즈의 속성을 사용하여 매핑해야 하는 5개의 숫자 데이터 열을 이 포함되어 있어야 함: `OpenMemberPath`, `HighMemberPath`, `LowMemberPath`, `CloseMemberPath`, `VolumeMemberPath`
[SampleFinancialData](data-chart-data-sources-financial.md)는 위의 데이터 요구 사항을 충족하는 데이터 소스로 사용할 수 있습니다.
@@ -166,12 +166,12 @@ import { IgxDataChartCoreModule } from 'igniteui-angular-charts';
## 추가 리소스
-- [축 유형](data-chart-axis-types.md)
-- [축 공유](data-chart-axis-sharing.md)
-- [차트 범례](data-chart-legends.md)
-- [시리즈 주석](data-chart-series-annotations.md)
-- [시리즈 강조 표시](data-chart-series-highlighting.md)
-- [시리즈 마커](data-chart-series-markers.md)
-- [시리즈 도구 설명](data-chart-series-tooltips.md)
-- [시리즈 추세선](data-chart-series-trendlines.md)
-- [시리즈 유형](data-chart-series-types.md)
+- [축 유형](data-chart-axis-types.md)
+- [축 공유](data-chart-axis-sharing.md)
+- [차트 범례](data-chart-legends.md)
+- [시리즈 주석](data-chart-series-annotations.md)
+- [시리즈 강조 표시](data-chart-series-highlighting.md)
+- [시리즈 마커](data-chart-series-markers.md)
+- [시리즈 도구 설명](data-chart-series-tooltips.md)
+- [시리즈 추세선](data-chart-series-trendlines.md)
+- [시리즈 유형](data-chart-series-types.md)
diff --git a/docs/angular/src/content/kr/components/data-chart-type-polar-series.md b/docs/angular/src/content/kr/components/data-chart-type-polar-series.md
index ca762f7a11..068a0b6d72 100644
--- a/docs/angular/src/content/kr/components/data-chart-type-polar-series.md
+++ b/docs/angular/src/content/kr/components/data-chart-type-polar-series.md
@@ -50,9 +50,9 @@ _language: kr
폴라 시리즈에는 다음과 같은 데이터 요구 사항이 있습니다:
-- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함
-- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 폴라 시리즈를 렌더링하지 않습니다.
-- 모든 데이터 항목에는 폴라 시리즈의 `AngleMemberPath` 및 `RadiusMemberPath` 속성(예: [`IgxPolarAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxpolarareaseriescomponent.html))을 사용하여 매핑하는 숫자 데이터 열이 2개 이상 있어야 합니다
+- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함
+- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 폴라 시리즈를 렌더링하지 않습니다.
+- 모든 데이터 항목에는 폴라 시리즈의 `AngleMemberPath` 및 `RadiusMemberPath` 속성(예: [`IgxPolarAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxpolarareaseriescomponent.html))을 사용하여 매핑하는 숫자 데이터 열이 2개 이상 있어야 합니다
폴라 좌표계의 데이터 점의 위치는 "극"이라고 하는 고정 방향에서의 각도(각도 좌표)와 고정점(데카르트 좌표의 원점과 유사)에서의 거리(반경 좌표)로 결정됩니다. 극에서 시작하여 바깥 쪽을 향하는 선은 각도 축의 격자선([`IgxNumericAngleAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxnumericangleaxiscomponent.html))이며, 극을 둘러싸는 동심원은 반경 축의 격자선([`IgxNumericRadiusAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxnumericradiusaxiscomponent.html))입니다
@@ -119,8 +119,8 @@ import { IgxDataChartPolarModule } from 'igniteui-angular-charts';
## 추가 리소스
-- [축 유형](data-chart-axis-types.md)
-- [축 공유](data-chart-axis-sharing.md)
-- [차트 범례](data-chart-legends.md)
-- [시리즈 마커](data-chart-series-markers.md)
-- [시리즈 유형](data-chart-series-types.md)
+- [축 유형](data-chart-axis-types.md)
+- [축 공유](data-chart-axis-sharing.md)
+- [차트 범례](data-chart-legends.md)
+- [시리즈 마커](data-chart-series-markers.md)
+- [시리즈 유형](data-chart-series-types.md)
diff --git a/docs/angular/src/content/kr/components/data-chart-type-radial-series.md b/docs/angular/src/content/kr/components/data-chart-type-radial-series.md
index a23690f6cb..1ab189e2a9 100644
--- a/docs/angular/src/content/kr/components/data-chart-type-radial-series.md
+++ b/docs/angular/src/content/kr/components/data-chart-type-radial-series.md
@@ -47,10 +47,10 @@ _language: kr
레이디얼 시리즈에는 다음과 같은 데이터 요구 사항이 있습니다:
-- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함
-- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 레이디얼 시리즈를 렌더링하지 않습니다.
-- 모든 데이터 항목에는 카테고리 축(예: [`IgxCategoryAngleAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcategoryangleaxiscomponent.html))의 [`IgxLabelComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxlabelcomponent.html) 속성에 매핑해야 하는 하나 이상의 라벨 데이터 열(문자열 또는 날짜 시간)이 포함되어 있어야 함
-- 모든 데이터 항목에는 카테고리 시리즈(예: [`IgxRadialAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxradialareaseriescomponent.html))의 `ValueMemberPath` 속성을 사용하여 매핑하는 숫자 데이터 열이 하나 이상 있어야 합니다
+- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함
+- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 레이디얼 시리즈를 렌더링하지 않습니다.
+- 모든 데이터 항목에는 카테고리 축(예: [`IgxCategoryAngleAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcategoryangleaxiscomponent.html))의 [`IgxLabelComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxlabelcomponent.html) 속성에 매핑해야 하는 하나 이상의 라벨 데이터 열(문자열 또는 날짜 시간)이 포함되어 있어야 함
+- 모든 데이터 항목에는 카테고리 시리즈(예: [`IgxRadialAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxradialareaseriescomponent.html))의 `ValueMemberPath` 속성을 사용하여 매핑하는 숫자 데이터 열이 하나 이상 있어야 합니다
[SampleRadialData](data-chart-data-sources-radial.md)는 위의 데이터 요구 사항을 충족하는 데이터 소스로 사용할 수 있습니다.
@@ -114,8 +114,8 @@ import { IgxDataChartRadialModule } from 'igniteui-angular-charts';
## 추가 리소스
-- [축 유형](data-chart-axis-types.md)
-- [축 공유](data-chart-axis-sharing.md)
-- [차트 범례](data-chart-legends.md)
-- [시리즈 마커](data-chart-series-markers.md)
-- [시리즈 유형](data-chart-series-types.md)
+- [축 유형](data-chart-axis-types.md)
+- [축 공유](data-chart-axis-sharing.md)
+- [차트 범례](data-chart-legends.md)
+- [시리즈 마커](data-chart-series-markers.md)
+- [시리즈 유형](data-chart-series-types.md)
diff --git a/docs/angular/src/content/kr/components/data-chart-type-range-series.md b/docs/angular/src/content/kr/components/data-chart-type-range-series.md
index 123535effe..f62214d397 100644
--- a/docs/angular/src/content/kr/components/data-chart-type-range-series.md
+++ b/docs/angular/src/content/kr/components/data-chart-type-range-series.md
@@ -42,10 +42,10 @@ _language: kr
범위 시리즈에는 다음과 같은 데이터 요구 사항이 있습니다:
-- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함
-- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 범위 시리즈를 렌더링하지 않습니다.
-- 모든 데이터 항목에는 카테고리 축(예: [`IgxCategoryXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcategoryxaxiscomponent.html))의 [`IgxLabelComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxlabelcomponent.html) 속성에 매핑해야 하는 하나 이상의 라벨 데이터 열(문자열 또는 날짜 시간)이 포함되어 있어야 함
-- 모든 데이터 항목에는 범위 시리즈의 `HighMemberPath` 및 `LowMemberPath` 속성(예: [`IgxRangeAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxrangeareaseriescomponent.html))을 사용하여 매핑하는 숫자 데이터 열이 2개 이상 있어야 합니다
+- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함
+- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 범위 시리즈를 렌더링하지 않습니다.
+- 모든 데이터 항목에는 카테고리 축(예: [`IgxCategoryXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcategoryxaxiscomponent.html))의 [`IgxLabelComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxlabelcomponent.html) 속성에 매핑해야 하는 하나 이상의 라벨 데이터 열(문자열 또는 날짜 시간)이 포함되어 있어야 함
+- 모든 데이터 항목에는 범위 시리즈의 `HighMemberPath` 및 `LowMemberPath` 속성(예: [`IgxRangeAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxrangeareaseriescomponent.html))을 사용하여 매핑하는 숫자 데이터 열이 2개 이상 있어야 합니다
[SampleRangeData](data-chart-data-sources-range.md)는 위의 데이터 요구 사항을 충족하는 데이터 소스로 사용할 수 있습니다.
@@ -106,12 +106,12 @@ import { IgxDataChartCategoryModule } from 'igniteui-angular-charts';
## 추가 리소스
-- [축 유형](data-chart-axis-types.md)
-- [축 공유](data-chart-axis-sharing.md)
-- [차트 범례](data-chart-legends.md)
-- [시리즈 주석](data-chart-series-annotations.md)
-- [시리즈 강조 표시](data-chart-series-highlighting.md)
-- [시리즈 마커](data-chart-series-markers.md)
-- [시리즈 도구 설명](data-chart-series-tooltips.md)
-- [시리즈 추세선](data-chart-series-trendlines.md)
-- [시리즈 유형](data-chart-series-types.md)
+- [축 유형](data-chart-axis-types.md)
+- [축 공유](data-chart-axis-sharing.md)
+- [차트 범례](data-chart-legends.md)
+- [시리즈 주석](data-chart-series-annotations.md)
+- [시리즈 강조 표시](data-chart-series-highlighting.md)
+- [시리즈 마커](data-chart-series-markers.md)
+- [시리즈 도구 설명](data-chart-series-tooltips.md)
+- [시리즈 추세선](data-chart-series-trendlines.md)
+- [시리즈 유형](data-chart-series-types.md)
diff --git a/docs/angular/src/content/kr/components/data-chart-type-scatter-area-series.md b/docs/angular/src/content/kr/components/data-chart-type-scatter-area-series.md
index dcea9d26d7..640aa48028 100644
--- a/docs/angular/src/content/kr/components/data-chart-type-scatter-area-series.md
+++ b/docs/angular/src/content/kr/components/data-chart-type-scatter-area-series.md
@@ -28,9 +28,9 @@ _language: kr
[`IgxScatterAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxscatterareaseriescomponent.html)에는 다음과 같은 데이터 요구 사항이 있습니다:
-- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함
-- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 분산형 시리즈를 렌더링하지 않습니다.
-- 모든 데이터 항목에는 `XMemberPath`, `YMemberPath` 및 [`colorMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxscatterareaseriescomponent.html#colormemberpath) 속성에 매핑되는 3개의 숫자 데이터 열이 있어야 합니다.
+- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함
+- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 분산형 시리즈를 렌더링하지 않습니다.
+- 모든 데이터 항목에는 `XMemberPath`, `YMemberPath` 및 [`colorMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxscatterareaseriescomponent.html#colormemberpath) 속성에 매핑되는 3개의 숫자 데이터 열이 있어야 합니다.
[SampleScatterData](data-chart-data-sources-scatter.md)는 위의 데이터 요구 사항을 충족하는 데이터 소스로 사용할 수 있습니다.
@@ -97,13 +97,13 @@ export class AppModule { /* ... */ }
다음 표에는 [`IgxScatterAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxscatterareaseriescomponent.html)의 면 채색에 영향을 주는 [`IgxCustomPaletteColorScaleComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcustompalettecolorscalecomponent.html)의 속성이 열거되어 있습니다 .
-- [`palette`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcustompalettecolorscalecomponent.html#palette)는 선택하거나 보간하는 컬러의 컬렉션을 설정합니다.
-- [`interpolationMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcustompalettecolorscalecomponent.html#interpolationmode)는 팔레트에서 컬러를 가져오는 메소드를 설정합니다.
-- [`maximumValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcustompalettecolorscalecomponent.html#maximumvalue)는 컬러를 할당할 수 있는 상한값을 설정합니다. 지정한 값이 이 값보다 큰 경우에는 투명하게 됩니다.
-- [`minimumValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcustompalettecolorscalecomponent.html#minimumvalue)는 컬러를 할당할 수 있는 최소값을 설정합니다. 지정한 값이 이 값보다 작은 경우에는 투명하게 됩니다.
+- [`palette`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcustompalettecolorscalecomponent.html#palette)는 선택하거나 보간하는 컬러의 컬렉션을 설정합니다.
+- [`interpolationMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcustompalettecolorscalecomponent.html#interpolationmode)는 팔레트에서 컬러를 가져오는 메소드를 설정합니다.
+- [`maximumValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcustompalettecolorscalecomponent.html#maximumvalue)는 컬러를 할당할 수 있는 상한값을 설정합니다. 지정한 값이 이 값보다 큰 경우에는 투명하게 됩니다.
+- [`minimumValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcustompalettecolorscalecomponent.html#minimumvalue)는 컬러를 할당할 수 있는 최소값을 설정합니다. 지정한 값이 이 값보다 작은 경우에는 투명하게 됩니다.
## 추가 리소스
-- [축 유형](data-chart-axis-types.md)
-- [차트 범례](data-chart-legends.md)
-- [시리즈 유형](data-chart-series-types.md)
+- [축 유형](data-chart-axis-types.md)
+- [차트 범례](data-chart-legends.md)
+- [시리즈 유형](data-chart-series-types.md)
diff --git a/docs/angular/src/content/kr/components/data-chart-type-scatter-bubble-series.md b/docs/angular/src/content/kr/components/data-chart-type-scatter-bubble-series.md
index 749dae3ca7..3f8c73ab0e 100644
--- a/docs/angular/src/content/kr/components/data-chart-type-scatter-bubble-series.md
+++ b/docs/angular/src/content/kr/components/data-chart-type-scatter-bubble-series.md
@@ -29,9 +29,9 @@ _language: kr
[`IgxBubbleSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxbubbleseriescomponent.html)에는 다음과 같은 데이터 요구 사항이 있습니다:
-- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함
-- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 분산형 시리즈를 렌더링하지 않습니다.
-- 모든 데이터 항목에는 `XMemberPath`, `YMemberPath` 및 [`radiusMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxbubbleseriescomponent.html#radiusmemberpath) 속성에 매핑되는 3개의 숫자 데이터 열이 있어야 합니다
+- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함
+- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 분산형 시리즈를 렌더링하지 않습니다.
+- 모든 데이터 항목에는 `XMemberPath`, `YMemberPath` 및 [`radiusMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxbubbleseriescomponent.html#radiusmemberpath) 속성에 매핑되는 3개의 숫자 데이터 열이 있어야 합니다
[SampleScatterStats](data-chart-data-sources-stats.md)는 위의 데이터 요구 사항을 충족하는 데이터 소스로 사용할 수 있습니다.
@@ -115,15 +115,15 @@ export class AppModule { /* ... */ }
`FillScale`은 단일 [`IgxBubbleSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxbubbleseriescomponent.html) 내의 컬러 패턴을 결정하는 옵션 기능입니다. 이 시리즈는 다음과 같은 채우기 비율을 지원합니다:
-- [`IgxValueBrushScaleComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxvaluebrushscalecomponent.html)은 `FillMemberPath` 속성에 매핑된 데이터 열의 값 집합을 사용하여 버블의 보간 브러시를 결정합니다. 또한, 사용자가 지정한 [`minimumValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxvaluebrushscalecomponent.html#minimumvalue) 및 [`maximumValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxvaluebrushscalecomponent.html#maximumvalue)를 가질 수 있습니다. 이 비율로 범위를 설정하면 범위 밖에 있는 값을 가진 버블은 `Brushes` 컬렉션으로부터 브러시를 얻지 못하고 컬러도 없습니다.
-- [`IgxCustomPaletteBrushScaleComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcustompalettebrushscalecomponent.html)은 버블 마커의 인덱스를 사용하여 `Brushes` 컬렉션으로부터 브러시를 선택합니다. [`brushSelectionMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcustompalettebrushscalecomponent.html#brushselectionmode) 속성을 `Select` enumerable 값으로 설정하면 버블이 순차적으로 색칠되어 `Interpolate`로 설정되고, 브러시는 버블의 인덱스와 컬렉션의 브러시 수에 따라 보간됩니다.
+- [`IgxValueBrushScaleComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxvaluebrushscalecomponent.html)은 `FillMemberPath` 속성에 매핑된 데이터 열의 값 집합을 사용하여 버블의 보간 브러시를 결정합니다. 또한, 사용자가 지정한 [`minimumValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxvaluebrushscalecomponent.html#minimumvalue) 및 [`maximumValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxvaluebrushscalecomponent.html#maximumvalue)를 가질 수 있습니다. 이 비율로 범위를 설정하면 범위 밖에 있는 값을 가진 버블은 `Brushes` 컬렉션으로부터 브러시를 얻지 못하고 컬러도 없습니다.
+- [`IgxCustomPaletteBrushScaleComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcustompalettebrushscalecomponent.html)은 버블 마커의 인덱스를 사용하여 `Brushes` 컬렉션으로부터 브러시를 선택합니다. [`brushSelectionMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcustompalettebrushscalecomponent.html#brushselectionmode) 속성을 `Select` enumerable 값으로 설정하면 버블이 순차적으로 색칠되어 `Interpolate`로 설정되고, 브러시는 버블의 인덱스와 컬렉션의 브러시 수에 따라 보간됩니다.
## 추가 리소스
-- [축 유형](data-chart-axis-types.md)
-- [축 공유](data-chart-axis-sharing.md)
-- [차트 범례](data-chart-legends.md)
-- [시리즈 마커](data-chart-series-markers.md)
-- [시리즈 도구 설명](data-chart-series-tooltips.md)
-- [시리즈 추세선](data-chart-series-trendlines.md)
-- [시리즈 유형](data-chart-series-types.md)
+- [축 유형](data-chart-axis-types.md)
+- [축 공유](data-chart-axis-sharing.md)
+- [차트 범례](data-chart-legends.md)
+- [시리즈 마커](data-chart-series-markers.md)
+- [시리즈 도구 설명](data-chart-series-tooltips.md)
+- [시리즈 추세선](data-chart-series-trendlines.md)
+- [시리즈 유형](data-chart-series-types.md)
diff --git a/docs/angular/src/content/kr/components/data-chart-type-scatter-contour-series.md b/docs/angular/src/content/kr/components/data-chart-type-scatter-contour-series.md
index 42ac702496..9c1e21604f 100644
--- a/docs/angular/src/content/kr/components/data-chart-type-scatter-contour-series.md
+++ b/docs/angular/src/content/kr/components/data-chart-type-scatter-contour-series.md
@@ -29,9 +29,9 @@ _language: kr
[`IgxScatterContourSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxscattercontourseriescomponent.html)에는 다음과 같은 데이터 요구 사항이 있습니다:
-- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함
-- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 분산형 시리즈를 렌더링하지 않습니다.
-- 모든 데이터 항목에는 `XMemberPath`, `YMemberPath` 및 [`valueMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxscattercontourseriescomponent.html#valuememberpath) 속성에 매핑되는 3개의 숫자 데이터 열이 있어야 합니다.
+- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함
+- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 분산형 시리즈를 렌더링하지 않습니다.
+- 모든 데이터 항목에는 `XMemberPath`, `YMemberPath` 및 [`valueMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxscattercontourseriescomponent.html#valuememberpath) 속성에 매핑되는 3개의 숫자 데이터 열이 있어야 합니다.
[SampleScatterData](data-chart-data-sources-scatter.md)는 위의 데이터 요구 사항을 충족하는 데이터 소스로 사용할 수 있습니다.
@@ -96,9 +96,9 @@ export class AppModule { /* ... */ }
제공된 [`IgxValueBrushScaleComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxvaluebrushscalecomponent.html) 클래스는 대부분의 착색 요구 사항을 만족시킬 수 있지만 이 클래스에서 상속하고 독자적인 착색 논리를 제공할 수 있습니다. 다음 표에는 [`IgxScatterContourSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxscattercontourseriescomponent.html)의 면 채색에 영향을 주는 [`IgxValueBrushScaleComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxvaluebrushscalecomponent.html)의 속성이 열거되어 있습니다:
-- `Brushes`는 등고선을 채우기 위한 브러시 컬렉션을 설정합니다.
-- [`maximumValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxvaluebrushscalecomponent.html#maximumvalue)는 브러시를 할당할 수 있는 상한값을 설정합니다. 지정한 값이 이 값보다 큰 경우에는 투명하게 됩니다.
-- [`minimumValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxvaluebrushscalecomponent.html#minimumvalue)는 브러시를 할당할 수 있는 최소값을 설정합니다. 지정한 값이 이 값보다 작은 경우에는 투명하게 됩니다.
+- `Brushes`는 등고선을 채우기 위한 브러시 컬렉션을 설정합니다.
+- [`maximumValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxvaluebrushscalecomponent.html#maximumvalue)는 브러시를 할당할 수 있는 상한값을 설정합니다. 지정한 값이 이 값보다 큰 경우에는 투명하게 됩니다.
+- [`minimumValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxvaluebrushscalecomponent.html#minimumvalue)는 브러시를 할당할 수 있는 최소값을 설정합니다. 지정한 값이 이 값보다 작은 경우에는 투명하게 됩니다.
## 등고선 값 리졸버
@@ -108,6 +108,6 @@ export class AppModule { /* ... */ }
## 추가 리소스
-- [축 유형](data-chart-axis-types.md)
-- [차트 범례](data-chart-legends.md)
-- [시리즈 유형](data-chart-series-types.md)
+- [축 유형](data-chart-axis-types.md)
+- [차트 범례](data-chart-legends.md)
+- [시리즈 유형](data-chart-series-types.md)
diff --git a/docs/angular/src/content/kr/components/data-chart-type-scatter-point-series.md b/docs/angular/src/content/kr/components/data-chart-type-scatter-point-series.md
index 11c12572e5..67714c6830 100644
--- a/docs/angular/src/content/kr/components/data-chart-type-scatter-point-series.md
+++ b/docs/angular/src/content/kr/components/data-chart-type-scatter-point-series.md
@@ -44,9 +44,9 @@ _language: kr
분산 마커 시리즈에는 다음과 같은 데이터 요구 사항이 있습니다:
-- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함
-- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 분산형 시리즈를 렌더링하지 않습니다.
-- 모든 데이터 항목에는 `XMemberPath` 및 `YMemberPath` 속성에 매핑되는 2개의 숫자 데이터 열이 있어야 합니다
+- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함
+- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 분산형 시리즈를 렌더링하지 않습니다.
+- 모든 데이터 항목에는 `XMemberPath` 및 `YMemberPath` 속성에 매핑되는 2개의 숫자 데이터 열이 있어야 합니다
[SampleScatterStats](data-chart-data-sources-stats.md)는 위의 데이터 요구 사항을 충족하는 데이터 소스로 사용할 수 있습니다.
@@ -124,10 +124,10 @@ export class AppModule { /* ... */ }
## 추가 리소스
-- [축 유형](data-chart-axis-types.md)
-- [축 공유](data-chart-axis-sharing.md)
-- [차트 범례](data-chart-legends.md)
-- [시리즈 마커](data-chart-series-markers.md)
-- [시리즈 도구 설명](data-chart-series-tooltips.md)
-- [시리즈 추세선](data-chart-series-trendlines.md)
-- [시리즈 유형](data-chart-series-types.md)
+- [축 유형](data-chart-axis-types.md)
+- [축 공유](data-chart-axis-sharing.md)
+- [차트 범례](data-chart-legends.md)
+- [시리즈 마커](data-chart-series-markers.md)
+- [시리즈 도구 설명](data-chart-series-tooltips.md)
+- [시리즈 추세선](data-chart-series-trendlines.md)
+- [시리즈 유형](data-chart-series-types.md)
diff --git a/docs/angular/src/content/kr/components/data-chart-type-shape-series.md b/docs/angular/src/content/kr/components/data-chart-type-shape-series.md
index 0c21f7154e..eaa9f1b2c9 100644
--- a/docs/angular/src/content/kr/components/data-chart-type-shape-series.md
+++ b/docs/angular/src/content/kr/components/data-chart-type-shape-series.md
@@ -44,9 +44,9 @@ _language: kr
분산 모양 시리즈에는 다음과 같은 데이터 요구 사항이 있습니다:
-- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함
-- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 분산형 시리즈를 렌더링하지 않습니다.
-- 모든 데이터 항목에는 분산 모양 시리즈의 `ShapeMemberPath` 속성(예: [`IgxScatterPolygonSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxscatterpolygonseriescomponent.html))에 매핑되어야 하는 하나의 모양 데이터 열(배열 또는 X/Y 좌표 배열)이 있어야 합니다
+- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함
+- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 분산형 시리즈를 렌더링하지 않습니다.
+- 모든 데이터 항목에는 분산 모양 시리즈의 `ShapeMemberPath` 속성(예: [`IgxScatterPolygonSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxscatterpolygonseriescomponent.html))에 매핑되어야 하는 하나의 모양 데이터 열(배열 또는 X/Y 좌표 배열)이 있어야 합니다
[SampleShapeData](data-chart-data-sources-shape.md)는 위의 데이터 요구 사항을 충족하는 데이터 소스로 사용할 수 있습니다.
@@ -107,8 +107,8 @@ export class AppModule { /* ... */ }
## 추가 리소스
-- [축 유형](data-chart-axis-types.md)
-- [축 공유](data-chart-axis-sharing.md)
-- [차트 범례](data-chart-legends.md)
-- [시리즈 마커](data-chart-series-markers.md)
-- [시리즈 유형](data-chart-series-types.md)
+- [축 유형](data-chart-axis-types.md)
+- [축 공유](data-chart-axis-sharing.md)
+- [차트 범례](data-chart-legends.md)
+- [시리즈 마커](data-chart-series-markers.md)
+- [시리즈 유형](data-chart-series-types.md)
diff --git a/docs/angular/src/content/kr/components/data-chart-type-stacked-series.md b/docs/angular/src/content/kr/components/data-chart-type-stacked-series.md
index be98335eb0..e55bcaec81 100644
--- a/docs/angular/src/content/kr/components/data-chart-type-stacked-series.md
+++ b/docs/angular/src/content/kr/components/data-chart-type-stacked-series.md
@@ -66,10 +66,10 @@ namespace: Infragistics.Controls.Charts
스택 시리즈에는 다음과 같은 데이터 요구 사항이 있습니다:
-- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함
-- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 스택 시리즈를 렌더링하지 않습니다.
-- 모든 데이터 항목에는 카테고리 축(예: [`IgxCategoryXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcategoryxaxiscomponent.html))의 [`label`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxaxiscomponent.html#label) 속성에 매핑해야 하는 하나 이상의 데이터 열(문자열 또는 날짜 시간)이 포함되어 있어야 함
-- 모든 데이터 항목에는스택 시리즈의 `시리즈` 컬렉션에 추가할 [`IgxStackedFragmentSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxstackedfragmentseriescomponent.html)의 [`valueMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxstackedfragmentseriescomponent.html#valuememberpath) 속성을 사용하여 매핑해야 하는 숫자 데이터 열이 적어도 하나 이상 포함되어야 합니다.
+- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함
+- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 스택 시리즈를 렌더링하지 않습니다.
+- 모든 데이터 항목에는 카테고리 축(예: [`IgxCategoryXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcategoryxaxiscomponent.html))의 [`label`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxaxiscomponent.html#label) 속성에 매핑해야 하는 하나 이상의 데이터 열(문자열 또는 날짜 시간)이 포함되어 있어야 함
+- 모든 데이터 항목에는스택 시리즈의 `시리즈` 컬렉션에 추가할 [`IgxStackedFragmentSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxstackedfragmentseriescomponent.html)의 [`valueMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxstackedfragmentseriescomponent.html#valuememberpath) 속성을 사용하여 매핑해야 하는 숫자 데이터 열이 적어도 하나 이상 포함되어야 합니다.
## 필요한 모듈
diff --git a/docs/angular/src/content/kr/components/data-chart.md b/docs/angular/src/content/kr/components/data-chart.md
index 67da2199bf..a50a4d65ca 100644
--- a/docs/angular/src/content/kr/components/data-chart.md
+++ b/docs/angular/src/content/kr/components/data-chart.md
@@ -25,8 +25,8 @@ _language: kr
차트 패키지를 설치할 때 코어 패키지도 설치해야 합니다.
-- **npm install --save igniteui-angular-core**
-- **npm install --save igniteui-angular-charts**
+- **npm install --save igniteui-angular-core**
+- **npm install --save igniteui-angular-charts**
## 필요한 모듈
@@ -107,9 +107,9 @@ export class AppModule { /* ... */ }
## 추가 리소스
-- [축 유형](data-chart-axis-types.md)
-- [축 공유](data-chart-axis-sharing.md)
-- [축 설정](data-chart-axis-settings.md)
-- [차트 범례](data-chart-legends.md)
-- [시리즈 마커](data-chart-series-markers.md)
-- [시리즈 유형](data-chart-series-types.md)
+- [축 유형](data-chart-axis-types.md)
+- [축 공유](data-chart-axis-sharing.md)
+- [축 설정](data-chart-axis-settings.md)
+- [차트 범례](data-chart-legends.md)
+- [시리즈 마커](data-chart-series-markers.md)
+- [시리즈 유형](data-chart-series-types.md)
diff --git a/docs/angular/src/content/kr/components/date-picker.md b/docs/angular/src/content/kr/components/date-picker.md
index 91291f2906..b1c6842ae7 100644
--- a/docs/angular/src/content/kr/components/date-picker.md
+++ b/docs/angular/src/content/kr/components/date-picker.md
@@ -57,22 +57,27 @@ public date = new Date(2000, 0, 1);
```
If a string is bound to the picker, it needs to be a date-only string in the `ISO 8601` format:
+
```html
```
+
More information about this can be found in [DateTime Editor's ISO section](date-time-editor.md#iso).
Two-way binding is possible through `ngModel`:
+
```html
```
As well as through the `value` input:
+
```html
```
Additionally, `formControlName` can be set on the picker, to use it in a reactive form:
+
```html
```
-***Note:*** It is strongly advised that the parent container of the [`igxForOf`]({environment:angularApiUrl}/classes/igxforofdirective.html#igxforof) template for has the related dimension set (`height` for vertical and `width` for horizontal), `overflow: hidden` and `position: relative` CSS rules applied. This is because the smooth scrolling behavior is achieved through content offsets that could visually affect other parts of the page if they remain visible.
+_**Note:**_ It is strongly advised that the parent container of the [`igxForOf`]({environment:angularApiUrl}/classes/igxforofdirective.html#igxforof) template for has the related dimension set (`height` for vertical and `width` for horizontal), `overflow: hidden` and `position: relative` CSS rules applied. This is because the smooth scrolling behavior is achieved through content offsets that could visually affect other parts of the page if they remain visible.
### Horizontal and vertical virtualization
@@ -106,6 +106,7 @@ The directive can be used to virtualize the data in vertical, horizontal or both
```
+
### igxFor bound to remote service
The [`igxForOf`]({environment:angularApiUrl}/classes/igxforofdirective.html#igxforof) directive can be bound to remote service. You need to use `Observable` property - `remoteData`(in the following case). Also the `chunkLoading` event should be utilized to trigger the requests to the data.
@@ -124,16 +125,20 @@ The [`igxForOf`]({environment:angularApiUrl}/classes/igxforofdirective.html#igxf
```
Also there is a requirement to set the [`totalItemCount`]({environment:angularApiUrl}/classes/igxforofdirective.html#totalitemcount) property in the instance of [`igxForOf`]({environment:angularApiUrl}/classes/igxforofdirective.html#igxforof).
+
```typescript
this.virtDirRemote.totalItemCount = data["@odata.count"];
```
In order access the directive instance from the component it should be marked as `ViewChild`:
+
```typescript
@ViewChild("virtDirRemote", { read: IgxForOfDirective })
public virtDirRemote: IgxForOfDirective;
```
+
And after the request to load the first chunk, the [`totalItemCount`]({environment:angularApiUrl}/classes/igxforofdirective.html#totalitemcount) can be set:
+
```typescript
public ngAfterViewInit() {
this.remoteService.getData(this.virtDirRemote.state, (data) => {
@@ -141,7 +146,9 @@ public ngAfterViewInit() {
});
}
```
-When requesting data you can take advantage of [`IgxForOfState`]({environment:angularApiUrl}/classes/igxforofdirective.html#state) interface, which provides the [`startIndex`]({environment:angularApiUrl}/classes/igxforofdirective.html#state.startindex) and [`chunkSize`]({environment:angularApiUrl}/classes/igxforofdirective.html#state.chunksize). But note, that initialy the chunkSize will be 0, so you have to specify the size of the first loaded chunk(the best value is [`igxForContainerSize`]({environment:angularApiUrl}/classes/igxforofdirective.html#igxforcontainersize) initially divided by [`igxForItemSize`]({environment:angularApiUrl}/classes/igxforofdirective.html#igxforitemsize)).
+
+When requesting data you can take advantage of [`IgxForOfState`]({environment:angularApiUrl}/classes/igxforofdirective.html#state) interface, which provides the [`startIndex`]({environment:angularApiUrl}/classes/igxforofdirective.html#state.startindex) and [`chunkSize`]({environment:angularApiUrl}/classes/igxforofdirective.html#state.chunksize). But note, that initially the chunkSize will be 0, so you have to specify the size of the first loaded chunk(the best value is [`igxForContainerSize`]({environment:angularApiUrl}/classes/igxforofdirective.html#igxforcontainersize) initially divided by [`igxForItemSize`]({environment:angularApiUrl}/classes/igxforofdirective.html#igxforitemsize)).
+
```typescript
public getData(data?: IForOfState, cb?: (any) => void): any {
var dataState = data;
@@ -172,7 +179,9 @@ private buildUrl(dataState: any): string {
return `${this.url}${qS}`;
}
```
+
And every time the [`chunkPreload`]({environment:angularApiUrl}/classes/igxforofdirective.html#chunkPreload) event is thrown the new chunk of data should be requested:
+
```typescript
chunkLoading(evt) {
if(this.prevRequest){
@@ -199,6 +208,7 @@ The following code snippet demonstrates how to use the `even` property in an `ng
```
+
In the example above, an `even` class is assigned to every even div element.
## Known Limitations
@@ -209,5 +219,5 @@ In the example above, an `even` class is assigned to every even div element.
## API References
-* [IgxForOfDirective]({environment:angularApiUrl}/classes/igxforofdirective.html)
-* [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html)
+- [IgxForOfDirective]({environment:angularApiUrl}/classes/igxforofdirective.html)
+- [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html)
diff --git a/docs/angular/src/content/kr/components/general-licensing.md b/docs/angular/src/content/kr/components/general-licensing.md
index 2adb967a98..e08755bf79 100644
--- a/docs/angular/src/content/kr/components/general-licensing.md
+++ b/docs/angular/src/content/kr/components/general-licensing.md
@@ -30,20 +30,20 @@ Infragistics Ignite UI for Angular is available as npm packages and you can add
## How to setup your environment to use the private npm feed
-### First you need to setup the private registry and to associate this registry with the Infragistics scope.
+### First you need to setup the private registry and to associate this registry with the Infragistics scope
This will allow you to seamlessly use a mix of packages from the public npm registry and the Infragistics private registry. You will be asked to provide the username and the password that you use for logging into your Infragistics account. You should also provide the email that is registered to your Infragistics profile.
> \[!Note]
> **npm** is disallowing the use of the **"@"** symbol inside your username as it is considered as being "not safe for the net". Because your username is actually the email that you use for your Infragistics account it always contains the symbol **"@"**. That's why you must escape this limitation by replacing the **"@"** symbol with **"!!"** (two exclamation marks). For example, if your username is **"username@example.com"** when asked about your username you should provide the following input: **"username!!example.com"**.
-### Now, to log in to our private feed using npm, run the adduser command and specify a user account and password:
+### Now, to log in to our private feed using npm, run the adduser command and specify a user account and password
```cmd
npm adduser --registry=https://packages.infragistics.com/npm/js-licensed/ --scope=@infragistics --always-auth
```
-### After this is done, you will be logged in and you will be able to install the latest versions of the Ignite UI packages into your project:
+### After this is done, you will be logged in and you will be able to install the latest versions of the Ignite UI packages into your project
```cmd
npm uninstall igniteui-dockmanager
diff --git a/docs/angular/src/content/kr/components/general/cli-overview.md b/docs/angular/src/content/kr/components/general/cli-overview.md
index 01ccc33109..ea8bf8794c 100644
--- a/docs/angular/src/content/kr/components/general/cli-overview.md
+++ b/docs/angular/src/content/kr/components/general/cli-overview.md
@@ -12,13 +12,16 @@ _language: kr
### Getting Started
Let's start by opening a preferred terminal and installing the [`Ignite UI CLI`](https://github.com/IgniteUI/igniteui-cli):
+
```cmd
npm install -g igniteui-cli
```
+
Once the [`Ignite UI CLI`](https://github.com/IgniteUI/igniteui-cli) is installed, there are two possible options/modes to start the tool - guided experience and using specific commands.
#### Using guided experience
-The shortest and easiest way to bootstrap an application is to use the Ignite UI CLI guided [`step by step mode`](https://github.com/IgniteUI/igniteui-cli/wiki/step-by-step), which creates a configured app that can be up and running with the ease of a single command.
+The shortest and easiest way to bootstrap an application is to use the Ignite UI CLI guided [`step by step mode`](https://github.com/IgniteUI/igniteui-cli/wiki/step-by-step), which creates a configured app that can be up and running with the ease of a single command.
+
```cmd
ig
```
@@ -33,12 +36,14 @@ ig
#### Using commands
We can always use the Ignite UI CLI [commands](#available-commands) for generating an Ignite UI project, adding a new component or building and serving the project by ourselves. For that purpose, we can use the following commands:
+
```cmd
ig new --framework=angular --type=igx-ts
cd
ig add
ig start
```
+
- The full list of available **component/template** values is [here](https://github.com/IgniteUI/igniteui-cli/wiki/add#ignite-ui-for-angular-templates), you can run [`ig list`](#available-commands) command in your project directory to list all the available templates.
- Both the **project name** and the **component_name** are custom values, provided by the developer.
Here is an example of creating a new Ignite UI for Angular project with an igxGrid control:
@@ -58,7 +63,7 @@ A full list of the available Ignite UI CLI commands as well as details on the us
| Command | Alias | Description |
| --- | --- | --- |
-| [ig new](https://github.com/IgniteUI/igniteui-cli/wiki/new) | | Create a new Angular, jQuery or React application. The application will be configured to use either Ignite UI for Angular, or Ignite UI for JavaScript controls.
+| [ig new](https://github.com/IgniteUI/igniteui-cli/wiki/new) | | Create a new Angular, jQuery or React application. The application will be configured to use either Ignite UI for Angular, or Ignite UI for JavaScript controls.
| [ig add](https://github.com/IgniteUI/igniteui-cli/wiki/add) | | Adds a template by its ID and providing a name to an existing project
| [ig start](https://github.com/IgniteUI/igniteui-cli/wiki/start) | | Builds the application, starts a web server and opens the application in the default browser.
| [ig build](https://github.com/IgniteUI/igniteui-cli/wiki/build) | | Builds the application into an output directory
diff --git a/docs/angular/src/content/kr/components/general/getting-started.md b/docs/angular/src/content/kr/components/general/getting-started.md
index 82eab8e113..7f5999ca43 100644
--- a/docs/angular/src/content/kr/components/general/getting-started.md
+++ b/docs/angular/src/content/kr/components/general/getting-started.md
@@ -47,7 +47,7 @@ npm install -g igniteui-cli
#### Using guided experience
-The shortest and easiest way to bootstrap an application is to use the Ignite UI CLI [`guided experience`](https://github.com/IgniteUI/igniteui-cli/wiki/step-by-step), which builds a configured app that the developer can get up and running with the ease of a single command.
+The shortest and easiest way to bootstrap an application is to use the Ignite UI CLI [`guided experience`](https://github.com/IgniteUI/igniteui-cli/wiki/step-by-step), which builds a configured app that the developer can get up and running with the ease of a single command.
```cmd
ig
@@ -223,18 +223,18 @@ The final result should look something like this:
In this article we learned how to create our own Ignite UI for Angular application from scratch by taking advantage of the fully-automated process of Ignite UI for Angular projects creation in the Ignite UI CLI. We also learned and how to add Ignite UI for Angular to an existing application by using the Angular CLI. We designed our own page by including the [`IgxGridComponent`]({environment:angularApiUrl}/classes/igxgridcomponent.html) to it, which itself offers some awesome features, which you can take a look at by referring to the navigation menu.
-* [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html)
-* [IgxGridComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme)
+- [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html)
+- [IgxGridComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme)
## Additional Resources
-* [Ignite UI CLI](https://github.com/IgniteUI/igniteui-cli)
-* [Ignite UI CLI Commands](https://github.com/IgniteUI/igniteui-cli/wiki#available-commands)
-* [Grid overview](../grid/grid.md)
+- [Ignite UI CLI](https://github.com/IgniteUI/igniteui-cli)
+- [Ignite UI CLI Commands](https://github.com/IgniteUI/igniteui-cli/wiki#available-commands)
+- [Grid overview](../grid/grid.md)
Our community is active and always welcoming to new ideas.
-* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
diff --git a/docs/angular/src/content/kr/components/general/localization.md b/docs/angular/src/content/kr/components/general/localization.md
index 821bdadf7f..d41c018527 100644
--- a/docs/angular/src/content/kr/components/general/localization.md
+++ b/docs/angular/src/content/kr/components/general/localization.md
@@ -10,8 +10,8 @@ _language: kr
With only a few lines of code, users can easily localize the strings in Ignite UI for Angular components.
-
@@ -38,6 +38,7 @@ public ngOnInit(): void {
...
}
```
+
...
```
+
```typescript
@ViewChildren(IgxLinearProgressBarComponent, { read: IgxLinearProgressBarComponent })
public linearBars: QueryList;
@@ -85,10 +87,11 @@ that the speed of loading depends on the [`max`]({environment:angularApiUrl}/cla
return Math.floor(Math.random() * (max - min + 1) + min);
}
```
+
If all went well, you should see something like the following in your browser:
-
@@ -155,10 +158,11 @@ And now let's enhance our example and create different types of loading bars, th
return Math.floor(Math.random() * (max - min + 1) + min);
}
```
+
So if we set up everything correctly, let's see what happened in the browser:
-
@@ -166,6 +170,7 @@ So if we set up everything correctly, let's see what happened in the browser:
Finally let's make our sample even more exciting and good as we set the following attributes: [`textAlign`]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html#textalign), [`textVisibility`]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html#textvisibility), [`textTop`]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html#texttop) and [`text`]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html#text).
And now let's see how our code looks:
+
```html
...
@@ -251,8 +256,8 @@ export class LinearProgressbarSample2Component implements OnInit {
And now let's see it in the browser:
-
@@ -261,12 +266,12 @@ And now let's see it in the browser:
> [!NOTE]
> If the [`step`]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html#step) input value is not defined, the progress update is **1% of the [`max`]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html#max) value**. In case you want the progress to be faster, the [`step`]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html#step) value should be greater than (**[`max`]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html#max) * 1%**), respectfully for slower progress the [`step`]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html#step) should be less than the default progress update.
-> If the [`step`]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html#step) value is defined greater than the [`value`]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html#value) input, there is only one update, which gets **the value that is passed for progress update**.
+> If the [`step`]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html#step) value is defined greater than the [`value`]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html#value) input, there is only one update, which gets **the value that is passed for progress update**.
### API
-* [IgxLinearProgressBarComponent]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html)
-* [IgxLinearProgressBarComponent Styles]({environment:sassApiUrl}/themes#function-progress-linear-theme)
-* [IgxTextAlign]({environment:angularApiUrl}/enums/igxtextalign.html)
+- [IgxLinearProgressBarComponent]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html)
+- [IgxLinearProgressBarComponent Styles]({environment:sassApiUrl}/themes#function-progress-linear-theme)
+- [IgxTextAlign]({environment:angularApiUrl}/enums/igxtextalign.html)
diff --git a/docs/angular/src/content/kr/components/list.md b/docs/angular/src/content/kr/components/list.md
index 510b391608..d3d28e1cb3 100644
--- a/docs/angular/src/content/kr/components/list.md
+++ b/docs/angular/src/content/kr/components/list.md
@@ -85,6 +85,7 @@ Sometimes there may be a delay in your data loading. In this case you can set th
```
+
```css
/* contacts.component.css */
@@ -479,6 +480,7 @@ igx-icon {
align-items: center;
}
```
+
And finally here is the typescript code handling the panning events:
```typescript
@@ -630,16 +632,16 @@ public selectItem(item) {
In this article we covered a lot of ground with the list component. We created a list of contact items. Used some additional Ignite UI for Angular components inside our list items, like avatars and icons. Created some custom item layout and styled it. Finally, we added list filtering. The list component has a few more APIs to explore, which are listed below.
-* [IgxListComponent API]({environment:angularApiUrl}/classes/igxlistcomponent.html)
-* [IgxListComponent Styles]({environment:sassApiUrl}/themes#function-list-theme)
-* [IgxListItemComponent API]({environment:angularApiUrl}/classes/igxlistitemcomponent.html)
+- [IgxListComponent API]({environment:angularApiUrl}/classes/igxlistcomponent.html)
+- [IgxListComponent Styles]({environment:sassApiUrl}/themes#function-list-theme)
+- [IgxListItemComponent API]({environment:angularApiUrl}/classes/igxlistitemcomponent.html)
Additional components that were used:
-* [IgxAvatarComponent API]({environment:angularApiUrl}/classes/igxavatarcomponent.html)
-* [IgxAvatarComponent Styles]({environment:sassApiUrl}/themes#function-avatar-theme)
-* [IgxIconComponent API]({environment:angularApiUrl}/classes/igxiconcomponent.html)
-* [IgxIconComponent Styles]({environment:sassApiUrl}/themes#function-icon-theme)
+- [IgxAvatarComponent API]({environment:angularApiUrl}/classes/igxavatarcomponent.html)
+- [IgxAvatarComponent Styles]({environment:sassApiUrl}/themes#function-avatar-theme)
+- [IgxIconComponent API]({environment:angularApiUrl}/classes/igxiconcomponent.html)
+- [IgxIconComponent Styles]({environment:sassApiUrl}/themes#function-icon-theme)
@@ -648,5 +650,5 @@ Additional components that were used:
Our community is active and always welcoming to new ideas.
-* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
diff --git a/docs/angular/src/content/kr/components/mask.md b/docs/angular/src/content/kr/components/mask.md
index 2e74bd4ec3..a55051335f 100644
--- a/docs/angular/src/content/kr/components/mask.md
+++ b/docs/angular/src/content/kr/components/mask.md
@@ -5,14 +5,14 @@ keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI w
_language: kr
---
-##Mask
+## Mask
By applying [`igxMask`]({environment:angularApiUrl}/classes/igxmaskdirective.html) directive on a **text input field**, the developer can control user input and format the visible value, based on configurable mask rules. It provides different input options and ease in use and configuration.
### Mask Demo
-
@@ -74,14 +74,14 @@ In the following example, we apply a phone number with an extension mask to an i
If the sample is configured properly, an input with the applied formatting mask appears.
-
#### Bind to Formatted/Raw Value
-Use the [`includeLiterals`]({environment:angularApiUrl}/classes/igxmaskdirective.html#includeliterals) input to configure which input value (formatted or raw) to bind in your form when a specific mask is applied. By default, [`includeLiterals`]({environment:angularApiUrl}/classes/igxmaskdirective.html#includeliterals) is set to *false* and the raw value is used.
+Use the [`includeLiterals`]({environment:angularApiUrl}/classes/igxmaskdirective.html#includeliterals) input to configure which input value (formatted or raw) to bind in your form when a specific mask is applied. By default, [`includeLiterals`]({environment:angularApiUrl}/classes/igxmaskdirective.html#includeliterals) is set to _false_ and the raw value is used.
```html
@@ -116,8 +116,8 @@ public clear() {
```
-
@@ -215,6 +215,7 @@ export class Person {
In addition to the default mask behavior, the user can implement his own custom pipes and take advantage of the [`focusedValuePipe`]({environment:angularApiUrl}/classes/igxmaskdirective.html#focusedvaluepipe) and [`displayValuePipe`]({environment:angularApiUrl}/classes/igxmaskdirective.html#displayvaluepipe) input properties, to transform the value to a desired output when the input gets or loses focus. This will not affect the underlying model value. Let's demonstrate how this can be achieved!
Implement two pipes that will append/remove a '%' sign at the end of the displayed value:
+
```typescript
@Pipe({ name: 'displayFormat' })
export class DisplayFormatPipe implements PipeTransform {
@@ -246,6 +247,7 @@ value = 1230;
displayFormat = new DisplayFormatPipe();
inputFormat = new InputFormatPipe();
```
+
```html
@@ -259,8 +261,8 @@ inputFormat = new InputFormatPipe();
As a result, a '%' sign should be appended to the value on blur (i.e. when the user clicks outside the input) and will be removed once the input gets focus!
-
@@ -271,6 +273,7 @@ The user can also take advantage of the [`placeholder`]({environment:angularApiU
```typescript
value = null;
```
+
```html
@@ -281,8 +284,8 @@ value = null;
```
-
@@ -290,14 +293,14 @@ value = null;
## API References
-* [IgxInputDirective]({environment:angularApiUrl}/classes/igxinputdirective.html)
-* [IgxInputGroupComponent]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html)
-* [IgxMaskDirective]({environment:angularApiUrl}/classes/igxmaskdirective.html)
-* [IgxSnackbarComponent]({environment:angularApiUrl}/classes/igxsnackbarcomponent.html)
+- [IgxInputDirective]({environment:angularApiUrl}/classes/igxinputdirective.html)
+- [IgxInputGroupComponent]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html)
+- [IgxMaskDirective]({environment:angularApiUrl}/classes/igxmaskdirective.html)
+- [IgxSnackbarComponent]({environment:angularApiUrl}/classes/igxsnackbarcomponent.html)
## Additional Resources
Our community is active and always welcoming to new ideas.
-* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
diff --git a/docs/angular/src/content/kr/components/material-icons-extended.md b/docs/angular/src/content/kr/components/material-icons-extended.md
index 5dd90e353d..9add988f95 100644
--- a/docs/angular/src/content/kr/components/material-icons-extended.md
+++ b/docs/angular/src/content/kr/components/material-icons-extended.md
@@ -78,5 +78,5 @@ For more info and other types of usages, goo to our * [GitHub repo](https://gith
Our community is active and always welcoming to new ideas.
-* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
diff --git a/docs/angular/src/content/kr/components/month-picker.md b/docs/angular/src/content/kr/components/month-picker.md
index b768b6eeac..7f952b044d 100644
--- a/docs/angular/src/content/kr/components/month-picker.md
+++ b/docs/angular/src/content/kr/components/month-picker.md
@@ -12,8 +12,8 @@ In general, the Angular Month Picker offers two basic ways for choosing a date -
### Angular Month Picker Example
What you see here is a basic Angular Month Picker example with a the component's default view, enabling users to select the year and the month.
-
@@ -102,8 +102,8 @@ public numericFormatOptions = {
Here is an example of modifying the default format options of the month picker:
-
@@ -130,40 +130,40 @@ public formatOptions = {
Here is an example of localizing the month picker component:
-
### Keyboard navigation
- When the **igxMonthPicker** component is focused, use
- - PageUp key to move to the previous year,
- - PageDown key to move to the next year,
- - Home key to focus the first month of the current year,
- - End key to focus the last month of the current year,
- - Tab key to navigate through the sub-header buttons.
+ - PageUp key to move to the previous year,
+ - PageDown key to move to the next year,
+ - Home key to focus the first month of the current year,
+ - End key to focus the last month of the current year,
+ - Tab key to navigate through the sub-header buttons.
- When `<` (previous) or `>` (next) year button (in the sub-header) is focused, use
- - Space or Enter key to scroll into view the next or previous year.
+ - Space or Enter key to scroll into view the next or previous year.
-- When years button (in the sub-header) is focused, use
- - Space or Enter key to open the years view,
- - Right or Left arrow key to scroll the previous/next year into view.
+- When years button (in the sub-header) is focused, use
+ - Space or Enter key to open the years view,
+ - Right or Left arrow key to scroll the previous/next year into view.
-- When a month inside the months view is focused, use
- - Arrow keys to navigate through the months,
- - Home key to focus the first month inside the months view,
- - End key to focus the last month inside the months view,
- - Enter key to select the currently focused month and close the view,
- - Tab key to navigate through the months.
+- When a month inside the months view is focused, use
+ - Arrow keys to navigate through the months,
+ - Home key to focus the first month inside the months view,
+ - End key to focus the last month inside the months view,
+ - Enter key to select the currently focused month and close the view,
+ - Tab key to navigate through the months.
## API References
-* [IgxMonthPickerComponent]({environment:angularApiUrl}/classes/igxmonthpickercomponent.html)
-* [IgxCalendarComponent]({environment:angularApiUrl}/classes/igxcalendarcomponent.html)
-* [IgxCalendarComponent Styles]({environment:sassApiUrl}/themes#function-calendar-theme)
+- [IgxMonthPickerComponent]({environment:angularApiUrl}/classes/igxmonthpickercomponent.html)
+- [IgxCalendarComponent]({environment:angularApiUrl}/classes/igxcalendarcomponent.html)
+- [IgxCalendarComponent Styles]({environment:sassApiUrl}/themes#function-calendar-theme)
@@ -171,5 +171,5 @@ Here is an example of localizing the month picker component:
Our community is active and always welcoming to new ideas.
-* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
diff --git a/docs/angular/src/content/kr/components/navbar.md b/docs/angular/src/content/kr/components/navbar.md
index 22fa459f0b..6e5ebd552b 100644
--- a/docs/angular/src/content/kr/components/navbar.md
+++ b/docs/angular/src/content/kr/components/navbar.md
@@ -14,8 +14,8 @@ The Ignite UI for Angular [`IgxNavbarComponent`]({environment:angularApiUrl}/cla
### Navbar Demo
-
@@ -63,6 +63,7 @@ Good, we know which application we have opened. Now, let's see what capabilities
#### Adding Icons
Now that our app has its menu in place, we can make it a little more functional by adding options for searching, favorites and more. To do that let's grab the [**IgxIcon**](icon.md) module and import it in our **app.module.ts** file.
+
```typescript
// app.module.ts
@@ -93,8 +94,8 @@ Next, we need to update our template with an icon for each of the options we wan
If all went well, you should see the following in your browser:
-
@@ -134,36 +135,36 @@ We can easily achieve this by using the [`igx-action-icon`]({environment:angular
Finally, this is how our navbar should look like with its custom action icon:
-
> [!NOTE]
-> If [`igx-action-icon`]({environment:angularApiUrl}/classes/igxactionicondirective.html) is provided, the default [`actionButtonIcon`]({environment:angularApiUrl}/classes/igxnavbarcomponent.html#actionbuttonicon) will not be used.
+> If [`igx-action-icon`]({environment:angularApiUrl}/classes/igxactionicondirective.html) is provided, the default [`actionButtonIcon`]({environment:angularApiUrl}/classes/igxnavbarcomponent.html#actionbuttonicon) will not be used.
## API References
In this article we show a few scenarios where the navbar component may come in handy. The APIs, we used to achieve them, are listed in the links below.
-* [`IgxNavbarComponent`]({environment:angularApiUrl}/classes/igxnavbarcomponent.html)
-* [`IgxActionIconDirective`]({environment:angularApiUrl}/classes/igxactionicondirective.html)
+- [`IgxNavbarComponent`]({environment:angularApiUrl}/classes/igxnavbarcomponent.html)
+- [`IgxActionIconDirective`]({environment:angularApiUrl}/classes/igxactionicondirective.html)
Additional components and/or directives with relative APIs that were used:
-* [`IgxIconComponent`]({environment:angularApiUrl}/classes/igxiconcomponent.html)
+- [`IgxIconComponent`]({environment:angularApiUrl}/classes/igxiconcomponent.html)
Styles:
-* [`IgxNavbarComponent Styles`]({environment:sassApiUrl}/themes#function-navbar-theme)
-* [`IgxIconComponent Styles`]({environment:sassApiUrl}/themes#function-icon-theme)
+- [`IgxNavbarComponent Styles`]({environment:sassApiUrl}/themes#function-navbar-theme)
+- [`IgxIconComponent Styles`]({environment:sassApiUrl}/themes#function-icon-theme)
## Additional Resources
Our community is active and always welcoming to new ideas.
-* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
diff --git a/docs/angular/src/content/kr/components/navdrawer.md b/docs/angular/src/content/kr/components/navdrawer.md
index 0c9755bb93..3d4a1fc852 100644
--- a/docs/angular/src/content/kr/components/navdrawer.md
+++ b/docs/angular/src/content/kr/components/navdrawer.md
@@ -11,8 +11,8 @@ _language: kr
### Navigation Drawer Demo
-
@@ -20,6 +20,7 @@ _language: kr
### Dependencies
To started with all needed dependencies you can use the `IgxNavigationDrawerModule` and import it in your application IgxNavigationDrawerModule } from 'igniteui { IgxNavigationDrawerModule } from 'igniteui-angular/navigation-drawer';
+
```
@NgModule({
imports: [
@@ -44,8 +45,10 @@ With the dependencies imported, the Navigation Drawer can be defined in the app
```
+
The content for the drawer should be provided via `` decorated with `igxDrawer` directive.
While any content can be provided in the template, the [`igxDrawerItem`]({environment:angularApiUrl}/classes/igxnavdraweritemdirective.html) directive (see [Item styling](#item-styling)) is available to apply out-of-the-box styling to items. The [`igxRipple`](ripple.md) directive completes the look and feel:
+
```html
@@ -67,12 +70,14 @@ While any content can be provided in the template, the [`igxDrawerItem`]({enviro
```
+
> An additional template decorated with `igxDrawerMini` directive can be provided for the alternative [Mini variant](#mini-variant) as closed state.
> [!NOTE]
> The Navigation Drawer can either sit above content or be pinned alongside it and by default will switch between those depending the view size. See [Modes](#modes) for more.
To accommodate for the drawer switching modes, a simple flexible wrapper around the two content sections can be styled like so:
+
```css
/* app.component.css */
.content-wrap
@@ -82,13 +87,17 @@ To accommodate for the drawer switching modes, a simple flexible wrapper around
display: flex;
}
```
-There are various ways to open and close the drawer. Input properties can be bound to app state, programatic access to the API in the component using a [`@ViewChild(IgxNavigationDrawerComponent)`](https://angular.io/api/core/ViewChild) reference or even in this case using the `#drawer` [template reference variable](https://angular.io/guide/template-syntax#ref-vars):
+
+There are various ways to open and close the drawer. Input properties can be bound to app state, programmatic access to the API in the component using a [`@ViewChild(IgxNavigationDrawerComponent)`](https://angular.io/api/core/ViewChild) reference or even in this case using the `#drawer` [template reference variable](https://angular.io/guide/template-syntax#ref-vars):
+
```html
```
+
The Navigation Drawer also integrates with [`igxNavigationService`]({environment:angularApiUrl}/classes/igxnavigationservice.html) and can be targeted by id with an [`igxToggleAction`](toggle.md#automatic-toggle-actions) directive.
Let's replace the `` in **app.component.html** with the following, adding [`igxButton`](button.md) and [Icon component](icon.md) to style our toggle:
+
```html
@@ -99,8 +108,8 @@ Let's replace the `` in **app.component.html** with the following, adding
And the final result should look like this:
-
@@ -109,7 +118,7 @@ And the final result should look like this:
### Modes
-Unpinned (elevated above content) mode is the normal behavior where the drawer sits above and applies a darkened overlay over all content. Generally used to provide a temporary navigation suitable for mobile devices.
+Unpinned (elevated above content) mode is the normal behavior where the drawer sits above and applies a darkened overlay over all content. Generally used to provide a temporary navigation suitable for mobile devices.
The drawer can be pinned to take advantage of larger screens, placing it within normal content flow with relative position. Depending on whether the app provides a way to toggle the drawer, the pinned mode can be used to achieve either [permanent or persistent behavior](https://material.io/guidelines/patterns/navigation-drawer.html#navigation-drawer-behavior).
@@ -120,7 +129,8 @@ The drawer can be pinned to take advantage of larger screens, placing it within
#### Pinned (persistent) setup
Pin changes the position of the drawer from `fixed` to `relative` to put it on the same flow as content. Therefore, the app styling should account for such layout, especially if the drawer needs to be toggled in this mode. While there's more than one way to achieve such fluid layout (including programmatically), the easiest way is using [`igxLayout`]({environment:angularApiUrl}/classes/igxlayoutdirective.html) and [`igxFlex`]({environment:angularApiUrl}/classes/igxflexdirective.html) directives.
-Here's how that would would look applied to the previous example:
+Here's how that would would look applied to the previous example:
+
```html
@@ -131,6 +141,7 @@ Here's how that would would look applied to the previous example:
```
+
```css
.content-wrap {
width: 100%;
@@ -138,14 +149,15 @@ Here's how that would would look applied to the previous example:
```
-
The drawer applies `flex-basis` on its host element, allowing the rest of the content to take up the remaining width.
Alternatively, skipping using directives, manual styling can be applied similar to:
+
```css
.main {
position: absolute;
@@ -169,6 +181,7 @@ Most commonly used to maintain quick selection available on the side at all time
This variant is enabled simply by the presence of an alternative mini template decorated with `igxDrawerMini` directive.
The mini variant is commonly used in a persistent setup, so we've set `pin` and disabled the responsive threshold:
+
```html
@@ -187,8 +200,8 @@ The mini variant is commonly used in a persistent setup, so we've set `pin` and
```
-
@@ -210,6 +223,7 @@ The directive has two `@Input` properties:
Selected Item
```
+
The directive is exported both from the main `IgxNavigationDrawerModule` and separately as `IgxNavDrawerItemDirective`.
@@ -217,6 +231,7 @@ The directive is exported both from the main `IgxNavigationDrawerModule` and sep
#### Example: Use default item styles with Angular Router
To make use of the [`igxDrawerItem`]({environment:angularApiUrl}/classes/igxnavdraweritemdirective.html) directive to style items normally the `active` input should be set, however with routing that state is controlled externally.
Take the following items defined in `app`:
+
```typescript
export class AppComponent {
public componentLinks = [
@@ -232,6 +247,7 @@ export class AppComponent {
];
}
```
+
One way to tie in the active state is to directly use the [`routerLinkActive`](https://angular.io/api/router/RouterLinkActive) default functionality and pass the drawer items active class `igx-nav-drawer__item--active`, so the `` template would look like:
```html
@@ -247,7 +263,9 @@ One way to tie in the active state is to directly use the [`routerLinkActive`](h
```
+
This approach, of course, does not affect the actual directive active state and could be affected by styling changes. An alternative would be the more advanced use of `routerLinkActive` where it's assigned to a template variable and the `isActive` can be used for binding:
+
```html
@@ -265,4 +283,4 @@ This approach, of course, does not affect the actual directive active state and
### API Reference
-* [IgxNavigationDrawerComponent]({environment:angularApiUrl}/classes/igxnavigationdrawercomponent.html)
+- [IgxNavigationDrawerComponent]({environment:angularApiUrl}/classes/igxnavigationdrawercomponent.html)
diff --git a/docs/angular/src/content/kr/components/overlay-position.md b/docs/angular/src/content/kr/components/overlay-position.md
index 754d718b4a..a03910513c 100644
--- a/docs/angular/src/content/kr/components/overlay-position.md
+++ b/docs/angular/src/content/kr/components/overlay-position.md
@@ -13,34 +13,41 @@ Position strategies determine where to display the component in the provided Igx
| horizontalDirection | verticalDirection |
|:---------------------------|:-------------------------|
| HorizontalAlignment.Center | VerticalAlignment.Middle |
+
-2. **Connected** - Positions the element based on the directions and start point passed in through [`positionSettings`] ({environment:angularApiUrl}/interfaces/positionsettings.html). It is possible to either pass a start point (type [`Point`] ({environment:angularApiUrl}/classes/point.html)) or an `HTMLElement` as a positioning base. Defaults to:
+1. **Connected** - Positions the element based on the directions and start point passed in through [`positionSettings`] ({environment:angularApiUrl}/interfaces/positionsettings.html). It is possible to either pass a start point (type [`Point`] ({environment:angularApiUrl}/classes/point.html)) or an `HTMLElement` as a positioning base. Defaults to:
| target | horizontalDirection | verticalDirection | horizontalStartPoint | verticalStartPoint |
|:----------------|:--------------------------|:-------------------------|:-------------------------|:-------------------------|
| new Point(0, 0) | HorizontalAlignment.Right | VerticalAlignment.Bottom | HorizontalAlignment.Left | VerticalAlignment.Bottom |
+
-3. **Auto** - **Auto** - Positions the element the same way as the **Connected** positioning strategy. It also calculates a different starting point in case the element goes partially out of the view port. The **Auto** strategy will initially try to show the element as the **Connected** strategy does. If the element goes out of the view port **Auto** will flip the starting point and the direction, i.e. if the direction is 'bottom', it will switch it to 'top' and so on. After the flipping, if the element is still out of the view port, **Auto** will use the initial directions and the starting point to push the element into the view port. For example - if the element goes out of the right side of the view port by 50px, **Auto** will push it with 50px to the left. Afterwards if the element is partially out of the view port, then its height or width were greater than the view port's, **Auto** will align the element's left/top edge with the view port's left/top edge. Defaults to:
+1. **Auto** - **Auto** - Positions the element the same way as the **Connected** positioning strategy. It also calculates a different starting point in case the element goes partially out of the view port. The **Auto** strategy will initially try to show the element as the **Connected** strategy does. If the element goes out of the view port **Auto** will flip the starting point and the direction, i.e. if the direction is 'bottom', it will switch it to 'top' and so on. After the flipping, if the element is still out of the view port, **Auto** will use the initial directions and the starting point to push the element into the view port. For example - if the element goes out of the right side of the view port by 50px, **Auto** will push it with 50px to the left. Afterwards if the element is partially out of the view port, then its height or width were greater than the view port's, **Auto** will align the element's left/top edge with the view port's left/top edge. Defaults to:
+
| target | horizontalDirection | verticalDirection | horizontalStartPoint | verticalStartPoint |
|:----------------|:--------------------------|:-------------------------|:-------------------------|:-------------------------|
| new Point(0, 0) | HorizontalAlignment.Right | VerticalAlignment.Bottom | HorizontalAlignment.Left | VerticalAlignment.Bottom |
+
-4. **Elastic** - Positions the element as in **Connected** positioning strategy and re-sizes the element to fit inside of the view port (re-calculating width and/or height) in case the element is partially out of view. `minSize :{ width: number, height: number}` can be passed in `positionSettings` to prevent resizing if it would put the element dimensions below a certain threshold. Defaults to:
+1. **Elastic** - Positions the element as in **Connected** positioning strategy and re-sizes the element to fit inside of the view port (re-calculating width and/or height) in case the element is partially out of view. `minSize :{ width: number, height: number}` can be passed in `positionSettings` to prevent resizing if it would put the element dimensions below a certain threshold. Defaults to:
+
| target | horizontalDirection | verticalDirection | horizontalStartPoint | verticalStartPoint | minSize |
|:----------------|:--------------------------|:-------------------------|:-------------------------|:-------------------------|-----------------------|
| new Point(0, 0) | HorizontalAlignment.Right | VerticalAlignment.Bottom | HorizontalAlignment.Left | VerticalAlignment.Bottom |{ width: 0, height: 0 }|
+
> [!NOTE]
> Will not try to reposition the element if the strategy is using HorizontalDirection = Center / VerticalDirection = Middle.
> [!NOTE]
-> The overlay element **will be** resized, but the positioning strategy **does not** handle `overflow`. For example, if the element needs to have `overflow-y` when resized, incorporate the appropriate style to provide that.
+> The overlay element **will be** resized, but the positioning strategy **does not** handle `overflow`. For example, if the element needs to have `overflow-y` when resized, incorporate the appropriate style to provide that.
## Usage
Position an element based on an existing button as a target, so it's start point is the button's Bottom/Left corner.
+
```typescript
const positionSettings: PositionSettings = {
target: buttonElement.nativeElement,
@@ -56,6 +63,7 @@ strategy.position(contentWrapper, size);
### Getting Started
The position strategy is passed as a property in the [`overlaySettings`] ({environment:angularApiUrl}/interfaces/overlaysettings.html) parameter when the [`overlay.show()`] ({environment:angularApiUrl}/classes/igxoverlayservice.html#show) method is called:
+
```typescript
// Initializing and using overlay settings
const overlaySettings: OverlaySettings = {
@@ -65,19 +73,23 @@ The position strategy is passed as a property in the [`overlaySettings`] ({envir
closeOnOutsideClick: true
}
overlay.show(dummyElement, overlaySettings);
-```
+```
+
To change the position strategy used by the overlay, override the [`positionStrategy`] ({environment:angularApiUrl}/interfaces/ipositionstrategy.html) property of the [`overlaySettings`] ({environment:angularApiUrl}/interfaces/overlaysettings.html) object passed to the overlay:
+
```typescript
// overlaySettings is an existing object of type OverlaySettings
// to override the position strategy
const positionStrategy = new AutoPositionStrategy();
overlay.show(dummyElement, { positionStrategy });
```
+
To change the position settings an already existing strategy is using, override any of the settings of that strategy:
+
```typescript
// overlaySettings is an existing object of type OverlaySettings
// overlaySettings.positionStrategy is an existing PositionStrategy with settings of type PositionSettings
@@ -91,6 +103,7 @@ To change the position settings an already existing strategy is using, override
// the element will now start to the left of the target (dimmyHTMLElement)
// and will align itself to the left
```
+
### Dependencies
@@ -100,14 +113,15 @@ Import the desired position strategy if needed like:
```typescript
import {AutoPositionStrategy, GlobalPositionStrategy, ConnectedPositioningStrategy, ElasticPositionStrategy } from 'igniteui-angular';
```
-## Demos
+
+## Demos
### Horizontal and Vertical Direction
Changing the horizontal and/or vertical direction of the positioning settings determined where the content will align itself. Depending on the positioning strategy chosen, the content will either align relative to the target's container ([`AutoPositionStrategy`] ({environment:angularApiUrl}/classes/autopositionstrategy.html), [`ElasticPositionStrategy`] ({environment:angularApiUrl}/classes/elasticpositionstrategy.html) and [`ConnectedPositioningStrategy`] ({environment:angularApiUrl}/classes/connectedpositioningstrategy.html)) or the body of the document ([`GlobalPositioningStrategy`] ({environment:angularApiUrl}/classes/globalpositionstrategy.html))
-
@@ -140,8 +154,8 @@ Changing the horizontal and/or vertical start point of the positioning settings
In the demo below, the overlay element will position itself starting from the target element depending on the start point chosen. Directions are always [`HorizontalAlignment.Right`] ({environment:angularApiUrl}/enums/horizontalalignment.html#right) and [`VerticalAlignment.Bottom`] ({environment:angularApiUrl}/enums/verticalalignment.html#bottom):
-
@@ -150,4 +164,4 @@ In the demo below, the overlay element will position itself starting from the ta
## API References
-* [IPositionStrategy] ({environment:angularApiUrl}/interfaces/ipositionstrategy.html)
+- [IPositionStrategy] ({environment:angularApiUrl}/interfaces/ipositionstrategy.html)
diff --git a/docs/angular/src/content/kr/components/overlay-scroll.md b/docs/angular/src/content/kr/components/overlay-scroll.md
index 48185cab1b..98a1d20016 100644
--- a/docs/angular/src/content/kr/components/overlay-scroll.md
+++ b/docs/angular/src/content/kr/components/overlay-scroll.md
@@ -7,7 +7,7 @@ _language: kr
## Scroll strategies
Scroll strategies determines how the scrolling will be handled in the provided IgxOverlayService. There are four scroll strategies:
-1. **NoOperation** - does nothing.
+1. **NoOperation** - does nothing.
2. **Block** - the component do not scroll with the window. The event is canceled. No scrolling happens.
3. **Close** - uses a tolerance and closes an expanded component upon scrolling if the tolerance is exceeded.
4. **Absolute** - scrolls everything.
@@ -15,19 +15,21 @@ Scroll strategies determines how the scrolling will be handled in the provided I
## Usage
Every scroll strategy has the following method used to :
- - [`initialize`] ({environment:angularApiUrl}/interfaces/iscrollstrategy.html#initialize) - initializes the scroll strategy. It needs a reference to the document, overlay service and the id of the component rendered
- - [`attach`] ({environment:angularApiUrl}/interfaces/iscrollstrategy.html#attach) - attaches the scroll strategy to the specified element or to the document
- - [`detach`] ({environment:angularApiUrl}/interfaces/iscrollstrategy.html#detach) - detaches the scroll strategy
+- [`initialize`] ({environment:angularApiUrl}/interfaces/iscrollstrategy.html#initialize) - initializes the scroll strategy. It needs a reference to the document, overlay service and the id of the component rendered
+- [`attach`] ({environment:angularApiUrl}/interfaces/iscrollstrategy.html#attach) - attaches the scroll strategy to the specified element or to the document
+- [`detach`] ({environment:angularApiUrl}/interfaces/iscrollstrategy.html#detach) - detaches the scroll strategy
```typescript
this.scrollStrategy.initialize(document, overlayService, id);
this.scrollStrategy.attach();
this.scrollStrategy.detach();
```
+
### Getting Started
The position strategy is passed as a property in the [`overlaySettings`] ({environment:angularApiUrl}/interfaces/overlaysettings.html) parameter when the [`overlay.show()`] ({environment:angularApiUrl}/classes/igxoverlayservice.html#show) method is called:
+
```typescript
// Initializing and using overlay settings
const overlaySettings: OverlaySettings = {
@@ -37,10 +39,12 @@ The position strategy is passed as a property in the [`overlaySettings`] ({envir
closeOnOutsideClick: true
}
overlay.show(dummyElement, overlaySettings);
-```
+```
+
To change the scroll strategy used by the overlay, override the [`scrollStrategy`] ({environment:angularApiUrl}/interfaces/iscrollstrategy.html) property of the [`overlaySettings`] ({environment:angularApiUrl}/interfaces/overlaysettings.html) object passed to the overlay:
+
```typescript
// overlaySettings is an existing object of type OverlaySettings
// to override the scroll strategy
@@ -50,6 +54,7 @@ To change the scroll strategy used by the overlay, override the [`scrollStrategy
})
overlay.show(dummyElement, newOverlaySettings);
```
+
### Dependencies
@@ -61,13 +66,13 @@ import { NoOpScrollStrategy } from "./scroll/NoOpScrollStrategy";
```
-## Demos
+## Demos
#### Scroll Strategies
The scroll strategies can be passed through the [`overlaySettings`] ({environment:angularApiUrl}/interfaces/overlaysettings.html) object in order to determine how the overlay should handle scrolling.
The demo below illustrates the difference between the separate [`scrollStrategies`] ({environment:angularApiUrl}/interfaces/iscrollstrategy.html):
-
@@ -79,8 +84,8 @@ If the [`modal`] ({environment:angularApiUrl}/interfaces/overlaysettings.html#mo
If the [`modal`] ({environment:angularApiUrl}/interfaces/overlaysettings.html#modal) property is `true`, the element will be attached to the DOM foreground and an overlay blocked will wrap behind it, stopping propagation of all events:
-
@@ -88,4 +93,4 @@ If the [`modal`] ({environment:angularApiUrl}/interfaces/overlaysettings.html#mo
## API References
-* [IScrollStrategy] ({environment:angularApiUrl}/interfaces/iscrollstrategy.html)
+- [IScrollStrategy] ({environment:angularApiUrl}/interfaces/iscrollstrategy.html)
diff --git a/docs/angular/src/content/kr/components/overlay.md b/docs/angular/src/content/kr/components/overlay.md
index 755a92441c..80b0f139fa 100644
--- a/docs/angular/src/content/kr/components/overlay.md
+++ b/docs/angular/src/content/kr/components/overlay.md
@@ -7,7 +7,7 @@ _language: kr
## Overlay
-The overlay service provides an easy and quick way to dynamically render content in the foreground of an app. The content to be rendered as well as the way it renders (e.g. placement, animations, scroll and click behaviors) are highly configurable and able to match all of the possible scenarios.
+The overlay service provides an easy and quick way to dynamically render content in the foreground of an app. The content to be rendered as well as the way it renders (e.g. placement, animations, scroll and click behaviors) are highly configurable and able to match all of the possible scenarios.
The overlay service is fully integrated in the toggle directive.
@@ -15,6 +15,7 @@ The overlay service is fully integrated in the toggle directive.
## Getting Started
To use the [`IgxOverlayService`] ({environment:angularApiUrl}/classes/igxoverlayservice.html) it needs to be imported in the component. `Inject` a reference to it in the component's constructor:
+
```typescript
import { Inject } from '@angular/core'
@@ -87,15 +88,16 @@ export class MyOverlayComponent {
}
}
```
+
The overlay service [`show()`] ({environment:angularApiUrl}/classes/igxoverlayservice.html#show) method accepts 2 arguments, the first one being the content that should be rendered in the overlay. There are a couple of different scenarios how the content can be passed:
- - A component definition (illustrated in the sample above) - When passing a component in as the first argument, the overlay service creates a new instance of that component and dynamically attaches it to the `overlay` DOM.
- - An `ElementRef` to an existing DOM element - Any view that is already rendered on the page can be passed through the overlay service and be rendered in the overlay DOM. Using this approach will:
- - Get the reference to the passed view from Angular
- - Detach the view from the DOM and leave an anchor in its place
- - Re-attach the view to the overlay, using the [`show()`] ({environment:angularApiUrl}/classes/igxoverlayservice.html#show) method settings or falling back to the default overlay settings
- - On close, will re-attach the view back to the original location in the DOM
+- A component definition (illustrated in the sample above) - When passing a component in as the first argument, the overlay service creates a new instance of that component and dynamically attaches it to the `overlay` DOM.
+- An `ElementRef` to an existing DOM element - Any view that is already rendered on the page can be passed through the overlay service and be rendered in the overlay DOM. Using this approach will:
+ - Get the reference to the passed view from Angular
+ - Detach the view from the DOM and leave an anchor in its place
+ - Re-attach the view to the overlay, using the [`show()`] ({environment:angularApiUrl}/classes/igxoverlayservice.html#show) method settings or falling back to the default overlay settings
+ - On close, will re-attach the view back to the original location in the DOM
### Demo - Dynamic attach - Component
@@ -103,8 +105,8 @@ In the below demo, we can pass the [IgxCard](card.md#card-demo) through the over
-
@@ -112,9 +114,10 @@ In the below demo, we can pass the [IgxCard](card.md#card-demo) through the over
### Configuring overlay settings
-The overlay service [`show()`] ({environment:angularApiUrl}/classes/igxoverlayservice.html#show) method also accepts an object of the [`OverlaySettings`] ({environment:angularApiUrl}/interfaces/overlaysettings.html) type which configures the way the conent is shown. If no such object is provided, the Overlay service will use its default settings to render the passed content.
+The overlay service [`show()`] ({environment:angularApiUrl}/classes/igxoverlayservice.html#show) method also accepts an object of the [`OverlaySettings`] ({environment:angularApiUrl}/interfaces/overlaysettings.html) type which configures the way the content is shown. If no such object is provided, the Overlay service will use its default settings to render the passed content.
For example, if we want the content to be positioned relative to an element, we can pass a different [`positioningStrategy`] ({environment:angularApiUrl}/interfaces/overlaysettings.html#positionstrategy) for the overlay's [`show()`] ({environment:angularApiUrl}/classes/igxoverlayservice.html#show) method, e.g. [`ConnectedPositioningStrategy`] ({environment:angularApiUrl}/classes/connectedpositioningstrategy.html) . In order to configure how the component is shown, we need to first create an [`OverlaySettings`] ({environment:angularApiUrl}/interfaces/overlaysettings.html) object:
+
```typescript
// in my-overlay-component.component.ts
// add an import for the definion of ConnectedPositioningStategy class
@@ -132,6 +135,7 @@ export class MyOverlayComponent {
}
}
```
+
```HTML
@@ -140,16 +144,18 @@ export class MyOverlayComponent {
```
+
Clicking on the button will now show `MyDynamicComponent` positioned relative to the button.
### Hiding the overlay
-The [`IgxOverlayService.hide()`] ({environment:angularApiUrl}/classes/igxoverlayservice.html#hide) method removes the content from the overlay and, if applicable, re-attaches it to the original location in the DOM.
+The [`IgxOverlayService.hide()`] ({environment:angularApiUrl}/classes/igxoverlayservice.html#hide) method removes the content from the overlay and, if applicable, re-attaches it to the original location in the DOM.
All of the elements rendered by the overlay service have a unique ID assigned to them by the service. The [`IgxOverlayService.show()`] ({environment:angularApiUrl}/classes/igxoverlayservice.html#show) method returns the identifier of the rendered content. In order to remove content from the overlay, that ID needs to be passed to the overlay's [`hide()`] ({environment:angularApiUrl}/classes/igxoverlayservice.html#hide) method.
We can modify the previously defined overlay method to not only show but also hide the overlay element
+
```typescript
// in my-overlay-component.component.ts
// add an import for the definion of ConnectedPositioningStategy class
@@ -176,6 +182,7 @@ export class MyOverlayComponent {
}
}
```
+
```HTML
@@ -183,20 +190,22 @@ export class MyOverlayComponent {
```
+
### Demo - Dynamic attach - Settings
Using the [`overlaySettings`] ({environment:angularApiUrl}/interfaces/overlaysettings.html) parameter of the [`show()`] ({environment:angularApiUrl}/classes/igxoverlayservice.html#show) method, we can change how the content is shown - e.g. where the content is positioned, how the scroll should behave, is the container modal or not
-
-If *no* [`overlaySettings`] ({environment:angularApiUrl}/interfaces/overlaysettings.html) are configured, the toggled element falls back to *default display settings*:
+If _no_ [`overlaySettings`] ({environment:angularApiUrl}/interfaces/overlaysettings.html) are configured, the toggled element falls back to _default display settings_:
+
```typescript
defaultOverlaySettings = {
positionStrategy: new GlobalPositionStrategy(),
@@ -206,12 +215,14 @@ defaultOverlaySettings = {
closeOnEscape: false
};
```
+
-### Integration with igxToggle
+### Integration with igxToggle
The [`IgxToggleDirective`] ({environment:angularApiUrl}/classes/igxtoggledirective.html) is fully integrated with the [`IgxOverlayService`] ({environment:angularApiUrl}/classes/igxoverlayservice.html). As such, the toggle's [`toggle()`] ({environment:angularApiUrl}/classes/igxtoggledirective.html#toggle) method allows for custom overlay settings to be passed when toggling content.
An example of how to pass configuration settings to the toggle's method is shown below:
+
```html
@@ -247,17 +258,18 @@ export class ExampleComponent {
}
}
```
+
## API
-* [IgxOverlayService]({environment:angularApiUrl}/classes/igxoverlayservice.html)
-* [IgxOverlay Styles]({environment:sassApiUrl}/themes#function-overlay-theme)
+- [IgxOverlayService]({environment:angularApiUrl}/classes/igxoverlayservice.html)
+- [IgxOverlay Styles]({environment:sassApiUrl}/themes#function-overlay-theme)
## Assumptions and Limitations
If you show the overlay in an outlet, and if the outlet is child of element with transform, perspective or filter css set you will be not able to show modal overlay. The reason for this is when one of above mentioned css properties is set the browser creates a new containing block and the overlay is limited to this containing block, as described [here](https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed).
## Additional Resources
-* [Position strategies](overlay-position.md)
-* [Scroll strategies](overlay-scroll.md)
+- [Position strategies](overlay-position.md)
+- [Scroll strategies](overlay-scroll.md)
diff --git a/docs/angular/src/content/kr/components/pie-chart.md b/docs/angular/src/content/kr/components/pie-chart.md
index 31eb470e37..6e9b83b969 100644
--- a/docs/angular/src/content/kr/components/pie-chart.md
+++ b/docs/angular/src/content/kr/components/pie-chart.md
@@ -26,8 +26,8 @@ Ignite UI for Angular 파이형 차트 컴포넌트는 원형 영역을 섹션
차트 패키지를 설치할 때 코어 패키지도 설치해야 합니다.
-- **npm install --save igniteui-angular-core**
-- **npm install --save igniteui-angular-charts**
+- **npm install --save igniteui-angular-core**
+- **npm install --save igniteui-angular-charts**
## 필요한 모듈
@@ -159,16 +159,16 @@ var data = [
파이형 차트 컴포넌트는 3가지 다른 선택 모드를 지원합니다.
-- Single - 모드가 Single 모드로 설정된 경우, 한 번에 하나의 조각만 선택할 수 있습니다. 새로운 조각을 선택하면 이전에 선택한 조각은 선택 해제되고 새로운 조각이 선택됩니다.
-- Multiple - 모드가 Multiple모드로 설정된 경우, 한 번에 여러 조각을 선택할 수 있습니다. 조각을 클릭하면 해당 조각이 선택되고 다른 조각을 클릭하면 이전 조각을 선택한 상태로 해당 조각이 선택됩니다.
-- Manual - 모드가 Manual 모드로 설정된 경우, 선택이 해제됩니다.
+- Single - 모드가 Single 모드로 설정된 경우, 한 번에 하나의 조각만 선택할 수 있습니다. 새로운 조각을 선택하면 이전에 선택한 조각은 선택 해제되고 새로운 조각이 선택됩니다.
+- Multiple - 모드가 Multiple모드로 설정된 경우, 한 번에 여러 조각을 선택할 수 있습니다. 조각을 클릭하면 해당 조각이 선택되고 다른 조각을 클릭하면 이전 조각을 선택한 상태로 해당 조각이 선택됩니다.
+- Manual - 모드가 Manual 모드로 설정된 경우, 선택이 해제됩니다.
파이형 차트 컴포넌트에는 선택과 관련된 4개의 이벤트가 있습니다:
-- SelectedItemChanging
-- SelectedItemChanged
-- SelectedItemsChanging
-- SelectedItemsChanged
+- SelectedItemChanging
+- SelectedItemChanged
+- SelectedItemsChanging
+- SelectedItemsChanged
“Changing”으로 끝나는 이벤트는 취소 가능한 이벤트이며, 이벤트 인수 속성 `Cancel`을 true로 설정하여 조각 선택을 중지할 수 있습니다. true로 설정하면 연결된 속성이 업데이트되지 않고 조각이 선택되지 않습니다. 이 설정은 사용자가 내부 데이터를 기반으로 특정 조각을 선택할 수 없도록 하려는 경우에 유용합니다.
diff --git a/docs/angular/src/content/kr/components/pivotgrid/pivot-grid-custom.md b/docs/angular/src/content/kr/components/pivotgrid/pivot-grid-custom.md
index 6fc3240344..6c2aac94c6 100644
--- a/docs/angular/src/content/kr/components/pivotgrid/pivot-grid-custom.md
+++ b/docs/angular/src/content/kr/components/pivotgrid/pivot-grid-custom.md
@@ -17,8 +17,8 @@ public pivotConfigHierarchy: IPivotConfiguration = {
```
The following example show how to handle scenarios, where the data is already aggregated and how its structure should look like:
-
@@ -58,7 +58,7 @@ The Pivot grid provides the object keys fields it uses to do its pivot calculati
- `children` - Field that stores children for hierarchy building. It represents a map from grouped values and all the pivotGridRecords that are based on that value. It can be utilized in very specific scenarios, where there is a need to do something while creating the hierarchies. No need to change this for common usage.
- `records` - Field that stores reference to the original data records. Can be seen in the example from above - `AllProducts_records`. Avoid setting fields in the data with the same name as this property. If your data records has `records` property, you can specify different and unique value for it using the `pivotKeys`.
- `aggregations` - Field that stores aggregation values. It's applied while creating the hierarchies and also it should not be changed for common scenarios.
-- `level` - Field that stores dimension level based on its hierarchy. Avoid setting fields in the data with the same name as this property. If your data records has `level` property, you can specify different and unique value for it using the `pivotKeys`.
+- `level` - Field that stores dimension level based on its hierarchy. Avoid setting fields in the data with the same name as this property. If your data records has `level` property, you can specify different and unique value for it using the `pivotKeys`.
- `columnDimensionSeparator` - Separator used when generating the unique column field values. It is the dash(`-`) from the example from above - `All-Bulgaria`.
- `rowDimensionSeparator` - Separator used when generating the unique row field values. It is the underscore(`_`) from the example from above - `AllProducts_records`. It's used when creating the `records` and `level` field.
@@ -126,8 +126,8 @@ public noopSortStrategy = NoopSortingStrategy.instance();
```
## API References
-* [IgxPivotGridComponent]({environment:angularApiUrl}/classes/igxpivotgridcomponent.html)
-* [IgxPivotDataSelectorComponent]({environment:angularApiUrl}/classes/igxpivotdataselectorcomponent.html)
+- [IgxPivotGridComponent]({environment:angularApiUrl}/classes/igxpivotgridcomponent.html)
+- [IgxPivotDataSelectorComponent]({environment:angularApiUrl}/classes/igxpivotdataselectorcomponent.html)
## Additional Resources
@@ -138,5 +138,5 @@ public noopSortStrategy = NoopSortingStrategy.instance();
Our community is active and always welcoming to new ideas.
-* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
\ No newline at end of file
+- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
\ No newline at end of file
diff --git a/docs/angular/src/content/kr/components/pivotgrid/pivot-grid-features.md b/docs/angular/src/content/kr/components/pivotgrid/pivot-grid-features.md
index 51b7752d38..08a9bd3da7 100644
--- a/docs/angular/src/content/kr/components/pivotgrid/pivot-grid-features.md
+++ b/docs/angular/src/content/kr/components/pivotgrid/pivot-grid-features.md
@@ -18,8 +18,8 @@ The pivot and flat grid component classes inherit from a common base and thus sh
The Pivot Grid component has additional features and functionalities related to its dimensions as described below.
-
@@ -140,8 +140,8 @@ Chips from these areas can not be moved to the `values` area and chips from the
>The chips from the Pivot Grid can not be moved to the Pivot Data Selector and items from the Pivot Data Selector can not be moved to the Pivot Grid.
## API References
-* [IgxPivotGridComponent]({environment:angularApiUrl}/classes/igxpivotgridcomponent.html)
-* [IgxPivotDataSelectorComponent]({environment:angularApiUrl}/classes/igxpivotdataselectorcomponent.html)
+- [IgxPivotGridComponent]({environment:angularApiUrl}/classes/igxpivotgridcomponent.html)
+- [IgxPivotDataSelectorComponent]({environment:angularApiUrl}/classes/igxpivotdataselectorcomponent.html)
## Additional Resources
@@ -152,6 +152,6 @@ Chips from these areas can not be moved to the `values` area and chips from the
Our community is active and always welcoming to new ideas.
-* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
diff --git a/docs/angular/src/content/kr/components/pivotgrid/pivot-grid.md b/docs/angular/src/content/kr/components/pivotgrid/pivot-grid.md
index 552142cdd5..de2f9946dd 100644
--- a/docs/angular/src/content/kr/components/pivotgrid/pivot-grid.md
+++ b/docs/angular/src/content/kr/components/pivotgrid/pivot-grid.md
@@ -41,6 +41,7 @@ Multiple sibling dimensions can be defined, which creates a more complex nested
The dimensions can be reordered or moved from one area to another via their corresponding chips using drag & drop.
A dimension can also describe an expandable hierarchy via the `childLevel` property, for example:
+
```typescript
{
memberFunction: () => 'All',
@@ -54,6 +55,7 @@ A dimension can also describe an expandable hierarchy via the `childLevel` prope
}
```
+
In this case the dimension renders an expander in the related section of the grid (row or column) and allows the children to be expanded or collapsed as part of the hierarchy. By default the row dimensions are initially expanded. This behavior can be controlled with the `defaultExpandState` `@Input` of the pivot grid.
## Predefined dimensions
@@ -61,11 +63,11 @@ In this case the dimension renders an expander in the related section of the gri
As part of the pivot grid some additional predefined dimensions are exposed for easier configuration:
- `IgxPivotDateDimension`
Can be used for date fields. Describes the following hierarchy by default:
- - All Periods
- - Years
- - Quarters
- - Months
- - Full Date
+ - All Periods
+ - Years
+ - Quarters
+ - Months
+ - Full Date
It can be set for rows or columns, for example:
@@ -144,6 +146,7 @@ public static totalMax: PivotAggregation = (members, data: any) => {
return data.map(x => x.UnitPrice * x.UnitsSold).reduce((a, b) => Math.max(a,b));
};
```
+
The pivot value also provides a `displayName` property. It can be used to display a custom name for this value in the column header.
## Enable property
@@ -231,8 +234,8 @@ Resulting in the following view, which groups the Product Categories unique colu
| Merging the dimension members is case sensitive| The pivot grid creates groups and merges the same (case sensitive) values. But the dimensions provide `memberFunction` and this can be changed there, the result of the `memberFunction` are compared and used as display value.|
## API References
-* [IgxPivotGridComponent]({environment:angularApiUrl}/classes/igxpivotgridcomponent.html)
-* [IgxPivotDataSelectorComponent]({environment:angularApiUrl}/classes/igxpivotdataselectorcomponent.html)
+- [IgxPivotGridComponent]({environment:angularApiUrl}/classes/igxpivotgridcomponent.html)
+- [IgxPivotDataSelectorComponent]({environment:angularApiUrl}/classes/igxpivotdataselectorcomponent.html)
## Additional Resources
@@ -243,5 +246,5 @@ Resulting in the following view, which groups the Product Categories unique colu
Our community is active and always welcoming to new ideas.
-* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
\ No newline at end of file
+- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
\ No newline at end of file
diff --git a/docs/angular/src/content/kr/components/query-builder.md b/docs/angular/src/content/kr/components/query-builder.md
index dd8f43daaa..54b3963d70 100644
--- a/docs/angular/src/content/kr/components/query-builder.md
+++ b/docs/angular/src/content/kr/components/query-builder.md
@@ -9,13 +9,13 @@ keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI w
-The [`IgxQueryBuilderComponent`]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html) component provides a way to build complex queries through the UI. By specifying AND/OR operators, conditions and values the user creates an expression tree which describes the query.
+The [`IgxQueryBuilderComponent`]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html) component provides a way to build complex queries through the UI. By specifying AND/OR operators, conditions and values the user creates an expression tree which describes the query.
## Angular Query Builder Example
-
@@ -23,7 +23,7 @@ The [`IgxQueryBuilderComponent`]({environment:angularApiUrl}/classes/igxquerybui
## Interaction
-If no expression tree is initially set, you start with creating a group of conditions linked with [`AND`]({environment:angularApiUrl}/enums/filteringlogic.html#and) or [`OR`]({environment:angularApiUrl}/enums/filteringlogic.html#or). After that, conditions or sub-groups can be added.
+If no expression tree is initially set, you start with creating a group of conditions linked with [`AND`]({environment:angularApiUrl}/enums/filteringlogic.html#and) or [`OR`]({environment:angularApiUrl}/enums/filteringlogic.html#or). After that, conditions or sub-groups can be added.
In order to add a condition, a field, an operand based on the field dataType and a value if the operand is not unary. Once the condition is committed, a chip with the condition information appears. By hovering or clicking the chip, you have the options to modify it or add another condition or group right after it.
@@ -73,7 +73,7 @@ To get started with styling the Query Builder, we need to import the `index` fil
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
-```
+```
The Query Builder takes its background color from the its theme, using the `background` parameter. In order to change the background we need to create a custom theme:
@@ -211,7 +211,8 @@ $yellow-color: #FFCD0F;
$black-color: #292826;
$dark-palette: palette($primary: $yellow-color, $secondary: $black-color);
```
-And then with [`color`]({environment:sassApiUrl}/palettes#function-color) we can easily retrieve color from the palette.
+
+And then with [`color`]({environment:sassApiUrl}/palettes#function-color) we can easily retrieve color from the palette.
```scss
$custom-query-builder: query-builder-theme(
@@ -357,9 +358,9 @@ Don't forget to include the themes in the same way as it was demonstrated above.
### Demo
-
@@ -370,13 +371,13 @@ Don't forget to include the themes in the same way as it was demonstrated above.
## API References
-* [IgxQueryBuilderComponent API]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html)
-* [IgxQueryBuilderComponent Styles]({environment:sassApiUrl}/themes#function-query-builder-theme)
+- [IgxQueryBuilderComponent API]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html)
+- [IgxQueryBuilderComponent Styles]({environment:sassApiUrl}/themes#function-query-builder-theme)
## Additional Resources
Our community is active and always welcoming to new ideas.
-* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
diff --git a/docs/angular/src/content/kr/components/radio-button.md b/docs/angular/src/content/kr/components/radio-button.md
index f811430ecb..3690023264 100644
--- a/docs/angular/src/content/kr/components/radio-button.md
+++ b/docs/angular/src/content/kr/components/radio-button.md
@@ -13,8 +13,8 @@ _language: kr
#### Radio Button Demo
-
@@ -40,6 +40,7 @@ export class AppModule {
public selected: any;
}
```
+
To get a started with some radio buttons, add the following code inside the component template:
```html
@@ -108,8 +109,8 @@ The Ignite UI for Angular Radio Group directive provides a grouping container th
#### Radio Group Demo
-
@@ -130,7 +131,8 @@ import { IgxRadioModule } from 'igniteui-angular';
...
})
```
-To get a started, create an [**igxRadioGroup**]({environment:angularApiUrl}/classes/igxradiogroupdirective.html) and add several [**igxRadio**]({environment:angularApiUrl}/classes/igxradiocomponent.html) components.
+
+To get a started, create an [**igxRadioGroup**]({environment:angularApiUrl}/classes/igxradiogroupdirective.html) and add several [**igxRadio**]({environment:angularApiUrl}/classes/igxradiocomponent.html) components.
Note that, setting the [`igx-radio-group`]({environment:angularApiUrl}/classes/igxradiogroupdirective.html) [`name`]({environment:angularApiUrl}/classes/igxradiogroupdirective.html#name) property is **mandatory**.
@@ -151,14 +153,14 @@ public fruits = ["Apple", "Mango", "Banana", "Orange"];
## API References
-* [IgxRadioComponent]({environment:angularApiUrl}/classes/igxradiocomponent.html)
-* [IgxRadioGroupDirective]({environment:angularApiUrl}/classes/igxradiogroupdirective.html)
-* [IgxRadioComponent Styles]({environment:sassApiUrl}/themes#function-radio-theme)
+- [IgxRadioComponent]({environment:angularApiUrl}/classes/igxradiocomponent.html)
+- [IgxRadioGroupDirective]({environment:angularApiUrl}/classes/igxradiogroupdirective.html)
+- [IgxRadioComponent Styles]({environment:sassApiUrl}/themes#function-radio-theme)
## Additional Resources
Our community is active and always welcoming to new ideas.
-* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
diff --git a/docs/angular/src/content/kr/components/ripple.md b/docs/angular/src/content/kr/components/ripple.md
index 1cc0f53e71..24b6768753 100644
--- a/docs/angular/src/content/kr/components/ripple.md
+++ b/docs/angular/src/content/kr/components/ripple.md
@@ -11,8 +11,8 @@ _language: kr
### Ripple Demo
-
@@ -36,6 +36,7 @@ import { IgxRippleModule } from 'igniteui-angular';
})
export class AppModule {}
```
+
### Usage
#### Adding Ripple Effect
@@ -44,6 +45,7 @@ Use [`igxRipple`]({environment:angularApiUrl}/classes/igxrippledirective.html) t
```html
```
+
@@ -55,16 +57,18 @@ You can set the ripple color using [`igxRipple`]({environment:angularApiUrl}/cla
```html
```
+
-#### Centered Ripple Effect
+#### Centered Ripple Effect
The ripple effect starts from the position of the click event. You can change this behavior using [`igxRippleCentered`]({environment:angularApiUrl}/classes/igxrippledirective.html#centered) and setting the center of the element as origin.
```html
```
+
@@ -80,19 +84,21 @@ Use [`igxRippleTarget`]({environment:angularApiUrl}/classes/igxrippledirective.h
```
+
Notice that if you click on the parent or the child divs the ripple effect will only appear inside the child div. The child div position has to be set to **relative**.
#### Ripple Duration
-Use [`igxRippleDuration`]({environment:angularApiUrl}/classes/igxrippledirective.html#rippleduration) to change the duration of the ripple animation. The default is 600 miliseconds. In this sample the [`igxRippleDuration`]({environment:angularApiUrl}/classes/igxrippledirective.html#rippleduration) is set to 2000 miliseconds.
+Use [`igxRippleDuration`]({environment:angularApiUrl}/classes/igxrippledirective.html#rippleduration) to change the duration of the ripple animation. The default is 600 milliseconds. In this sample the [`igxRippleDuration`]({environment:angularApiUrl}/classes/igxrippledirective.html#rippleduration) is set to 2000 milliseconds.
```html
Long Ripple Animation
```
+
@@ -106,13 +112,14 @@ for other browsers.
> Use a relatively positioned element for the ripple animation. You can also use [`igxRippleTarget`]({environment:angularApiUrl}/classes/igxrippledirective.html#rippletarget) to target a child element.
### Styling
-The igxRipple allows styling through the [Ignite UI for Angular Theme Library](../themes/sass/component-themes.md). The ripple's [theme]({environment:sassApiUrl}/themes#function-ripple-theme) exposes a property that allows customization of the color of the effect.
+The igxRipple allows styling through the [Ignite UI for Angular Theme Library](../themes/sass/component-themes.md). The ripple's [theme]({environment:sassApiUrl}/themes#function-ripple-theme) exposes a property that allows customization of the color of the effect.
#### Importing global theme
To begin styling of the predefined ripple color, you need to import the `index` file, where all styling functions and mixins are located.
+
```scss
@import '~igniteui-angular/lib/core/styles/themes/index'
-```
+```
#### Defining custom theme
You can easily create a new theme, that extends the [`ripple-theme`]({environment:sassApiUrl}/themes#function-ripple-theme) and accepts the parameters, required to customize the ripple as desired.
@@ -121,10 +128,10 @@ You can easily create a new theme, that extends the [`ripple-theme`]({environmen
$custom-theme: ripple-theme(
$color: #FFCD0F
);
-```
+```
#### Defining a custom color palette
-In the approach, that was described above, the color value was hardcoded. Alternatively, you can achieve greater flexibility, using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions.
+In the approach, that was described above, the color value was hardcoded. Alternatively, you can achieve greater flexibility, using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions.
`igx-palette` generates a color palette, based on provided primary and secondary colors.
```scss
@@ -135,9 +142,9 @@ $custom-palette: palette(
$primary: $black-color,
$secondary: $yellow-color
);
-```
+```
-After the custom palette has been generated, the `color` function can be used to obtain different varieties of the primary and the secondary colors.
+After the custom palette has been generated, the `color` function can be used to obtain different varieties of the primary and the secondary colors.
```scss
$custom-theme: ripple-theme(
@@ -146,15 +153,16 @@ $custom-theme: ripple-theme(
```
#### Defining custom schemas
-You can go even further and build flexible structure that has all the benefits of a [**schema**](../themes/sass/schemas.md). The **schema** is the recipe of a theme.
-Extend one of the two predefined schemas, that are provided for every component. In our case, we would use `$_dark_ripple`.
+You can go even further and build flexible structure that has all the benefits of a [**schema**](../themes/sass/schemas.md). The **schema** is the recipe of a theme.
+Extend one of the two predefined schemas, that are provided for every component. In our case, we would use `$_dark_ripple`.
```scss
$custom-ripple-schema: extend($_dark-ripple, (
color: (igx-color("secondary", 500))
));
-```
-In order for the custom schema to be applied, either `light`, or `dark` globals has to be extended. The whole process is actually supplying a component with a custom schema and adding it to the respective component theme afterwards.
+```
+
+In order for the custom schema to be applied, either `light`, or `dark` globals has to be extended. The whole process is actually supplying a component with a custom schema and adding it to the respective component theme afterwards.
```scss
$my-custom-schema: extend($dark-schema, (
@@ -169,6 +177,7 @@ $custom-theme: ripple-theme(
#### Applying the custom theme
The easiest way to apply your theme is with a `sass` `@include` statement in the global styles file:
+
```scss
@include ripple($custom-theme);
```
@@ -182,7 +191,7 @@ This way, due to Angular's [ViewEncapsulation](https://angular.io/api/core/Compo
>[!NOTE]
>If the component is using an [`Emulated`](../themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, it is necessary to penetrate this encapsulation using `::ng-deep` in order to style the grid.
>[!NOTE]
- >Wrap the statement inside of a `:host` selector to prevent your styles from affecting elements *outside of* our component:
+ >Wrap the statement inside of a `:host` selector to prevent your styles from affecting elements _outside of_ our component:
```scss
:host {
@@ -190,16 +199,16 @@ This way, due to Angular's [ViewEncapsulation](https://angular.io/api/core/Compo
@include ripple($custom-theme);
}
}
-```
+```
>[!NOTE]
> A color that is set using the `igxRiple` directive, would take precedence from the one, set within a custom theme.
#### Demo
-
@@ -207,13 +216,13 @@ This way, due to Angular's [ViewEncapsulation](https://angular.io/api/core/Compo
## API References
-* [IgxRippleDirective]({environment:angularApiUrl}/classes/igxrippledirective.html)
-* [IgxRipple Styles]({environment:sassApiUrl}/themes#function-ripple-theme)
+- [IgxRippleDirective]({environment:angularApiUrl}/classes/igxrippledirective.html)
+- [IgxRipple Styles]({environment:sassApiUrl}/themes#function-ripple-theme)
## Additional Resources
Our community is active and always welcoming to new ideas.
-* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
diff --git a/docs/angular/src/content/kr/components/roundness.md b/docs/angular/src/content/kr/components/roundness.md
index fede9e0451..9240fa4a1d 100644
--- a/docs/angular/src/content/kr/components/roundness.md
+++ b/docs/angular/src/content/kr/components/roundness.md
@@ -5,7 +5,7 @@ keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI w
_language: kr
---
-## Components roundness
+## Components roundness
In Ignite UI for Angular we allows you to change the shape of components by changing their border-radius
@@ -24,8 +24,8 @@ $_light-button: (
As you can see from the example above, the component schema for [Button theme]({environment:sassApiUrl}/themes#function-button-theme) defines the default border-radius for all types of buttons.
-Let's look at how things work.
-The default value for "flat-border-radius" is set to 0.2 which in the end will be resolved to 4px, it is actually a fraction between 0 and 20px where 0 is the minimum border-radius and 20px is the maximum.
+Let's look at how things work.
+The default value for "flat-border-radius" is set to 0.2 which in the end will be resolved to 4px, it is actually a fraction between 0 and 20px where 0 is the minimum border-radius and 20px is the maximum.
We decided to not limit you to fractions only. You can use whatever unit you want - pixels, relative units like em or rem, etc., allowing you to overwrite the implicit border radius limits.
@@ -51,8 +51,8 @@ $myButtons-theme: (
The result from the above code snippets is:
-
@@ -89,5 +89,5 @@ The table shows the default border-radius for each component and its min and max
Our community is active and always welcoming to new ideas.
-* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
diff --git a/docs/angular/src/content/kr/components/select.md b/docs/angular/src/content/kr/components/select.md
index 393f0bfcfb..32dd51ea24 100644
--- a/docs/angular/src/content/kr/components/select.md
+++ b/docs/angular/src/content/kr/components/select.md
@@ -16,11 +16,12 @@ The `IgxSelectComponent` allows you to select a single item from a drop-down lis
>[!WARNING]
->To start using Ignite UI for Angular components, in your own projects, make sure you have configured all necessary dependencies and have performed the proper setup of your project. You can learn how to do this in the [*getting started*](general/getting-started.md) topic.
+>To start using Ignite UI for Angular components, in your own projects, make sure you have configured all necessary dependencies and have performed the proper setup of your project. You can learn how to do this in the [_getting started_](general/getting-started.md) topic.
## Usage
To get started with `igx-select` you first need to import the `IgxSelectModule`:
+
```ts
// app.module.ts
@@ -36,11 +37,13 @@ export class AppModule {}
```
In your class you need to have a collection of the items that you want to display when the drop-down opens:
+
```ts
public items: string[] = ["Orange", "Apple", "Banana", "Mango"];
```
Then in your template you need to bind it with said items like so:
+
```html
@@ -48,7 +51,8 @@ Then in your template you need to bind it with said items like so:
```
-Notice that we use an `IgxSelectItemComponent` to display the items that `igx-select` operates on. The `IgxSelectItemComponent` extends the [*IgxDropDownItemComponent*](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/classes/igxdropdownitemcomponent.html) with additional functionality that is specific to the `igx-select-item`.
+
+Notice that we use an `IgxSelectItemComponent` to display the items that `igx-select` operates on. The `IgxSelectItemComponent` extends the [_IgxDropDownItemComponent_](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/classes/igxdropdownitemcomponent.html) with additional functionality that is specific to the `igx-select-item`.
## Features
### IgxSelect Actions
@@ -68,14 +72,14 @@ When the `igx-drop-down` is opened, you can close it by doing one of the followi
`igx-select` has intuitive keyboard navigation that makes it easy to select items without having to touch the mouse.
- When the drop-down list is opened you can navigate through the items using the `Up/Down Arrow` keys, as long as there are items left in the direction you are trying to navigate to. Furthermore, pressing `Home` or `End` will navigate to the first and last items in the list.
-- When the drop-down list is opened you can iteratively navigate through all items that begin with a certain character, by pressing the corresponding key, this is *case insensitive* and will cause the focus to spin between all matches.
-- When the drop-down list is opened you can navigate to a *specific* item by rapidly typing in the first few characters of the item you wish to go to.
- - *Note that the speed at which you type in matters.*
+- When the drop-down list is opened you can iteratively navigate through all items that begin with a certain character, by pressing the corresponding key, this is _case insensitive_ and will cause the focus to spin between all matches.
+- When the drop-down list is opened you can navigate to a _specific_ item by rapidly typing in the first few characters of the item you wish to go to.
+ - _Note that the speed at which you type in matters._
- When the drop-down list is opened, you can navigate through the items using the `Home` and `End` keys.
- When the drop-down list is opened, navigation with `Up/Down Arrow` keys starts from the selected item, if any. Otherwise, it starts from the first item in the list.
- When the drop-down list is closed you can cycle between its items using the `Up/Down Arrow` keys.
- When the drop-down list is closed you can also navigate through all items that begin with a specific character, it works the same as if it was opened.
-- When the drop-down list is closed you can also navigate to a *specific* item by rapidly typing in its first few characters. The behaviour is the same as when the drop-down is opened.
+- When the drop-down list is closed you can also navigate to a _specific_ item by rapidly typing in its first few characters. The behaviour is the same as when the drop-down is opened.
- When the drop-down is closed character key navigation is also case insensitive.
- When the drop-down is closed character key navigation does not change selection when pressing characters that have no matching item(s).
@@ -86,7 +90,7 @@ An item from the drop-down list can be selected by:
- `Space` key when the respective item is focused.
- Setting the value property in the code.
- Setting the item's `selected` property.
-- The *first* enabled item in the drop-down list is focused if there is no selected item.
+- The _first_ enabled item in the drop-down list is focused if there is no selected item.
- The input box is populated with the selected item's value.
- The input box's text is updated when the selected item changes.
- The input box is not populated with the text of an item that is focused but not selected.
@@ -97,7 +101,7 @@ An item from the drop-down list can be selected by:
- When there are items with duplicated values, the first one gets selected.
>[!NOTE]
-> `igx-select` supports *single* selection of items only.
+> `igx-select` supports _single_ selection of items only.
### Event emitting
Since `igx-select` extends `igx-drop-down`, it also makes good use of its events which include:
@@ -106,6 +110,7 @@ Since `igx-select` extends `igx-drop-down`, it also makes good use of its events
- Emitted when the drop-down is fully opened.
You can make use of the `opened` event like so:
+
```html
Apple
@@ -114,11 +119,11 @@ You can make use of the `opened` event like so:
#### Opening/Closing events
- Emitted on:
- - input click
- - select expand/collapse button click (app scenario)
+ - input click
+ - select expand/collapse button click (app scenario)
- Triggered on key interaction
- The `opening` and `closing` events are fired *before* the animation finishes playing, i.e. before the drop-down is fully **opened** or **closed**. They can also be canceled by setting the `cancel` property to `true` in the event handler function.
+ The `opening` and `closing` events are fired _before_ the animation finishes playing, i.e. before the drop-down is fully **opened** or **closed**. They can also be canceled by setting the `cancel` property to `true` in the event handler function.
```html
@@ -127,7 +132,7 @@ You can make use of the `opened` event like so:
```
#### Selection event
-- Emitted when the item selection is changing (when you attempt to select a new item). It is emitted *before* the selection completes, i.e. before the new item is selected.
+- Emitted when the item selection is changing (when you attempt to select a new item). It is emitted _before_ the selection completes, i.e. before the new item is selected.
- Emitted when an item is selected by a mouse click.
- Emitted when an item is selected by `Enter`, `Space` keys.
- Emitted when setting the value property.
@@ -144,13 +149,15 @@ You can make use of the `opened` event like so:
- Emitted on clicking outside of the component, when the drop-down is fully closed.
You can make use of the `closed` event like so:
+
```html
Apple
```
-You put all your *handler* functions inside of your *class*:
+You put all your _handler_ functions inside of your _class_:
+
```ts
export class MyClass {
/* --- */
@@ -174,20 +181,23 @@ export class MyClass {
/* --- */
}
```
+
- Please note that the above examples are for demonstration purposes only and are not meant to abide by any code standards.
### Positioning Strategy
`igx-select` has its own positioning strategy called the `SelectPositioningStrategy`.
-It extends the [*ConnectedPositioningStrategy*](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/classes/connectedpositioningstrategy.html) and allows `igx-select` to position its drop-down list in different ways, relative to the input field. This means that the drop-down will always position itself so that the text in the input is matched by the selected item's text.
+It extends the [_ConnectedPositioningStrategy_](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/classes/connectedpositioningstrategy.html) and allows `igx-select` to position its drop-down list in different ways, relative to the input field. This means that the drop-down will always position itself so that the text in the input is matched by the selected item's text.
+
+In the following example we are defining custom overlay settings using the `SelectPositioningStrategy` so you first have to import it alongside the [_OverlaySettings_](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/interfaces/overlaysettings.html):
-In the following example we are defining custom overlay settings using the `SelectPositioningStrategy` so you first have to import it alongside the [*OverlaySettings*](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/interfaces/overlaysettings.html):
```ts
import { SelectPositioningStrategy, OverlaySettings } from 'igniteui-angular';
```
-From there you have to initialize an [*OverlaySettings*](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/interfaces/overlaysettings.html) object and pass in the `SelectPositioningStrategy`. And finally in the positioning strategy's constructor you pass in a [*ViewChild*](https://angular.io/api/core/ViewChild) that references the `IgxSelectComponent` from your template.
+From there you have to initialize an [_OverlaySettings_](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/interfaces/overlaysettings.html) object and pass in the `SelectPositioningStrategy`. And finally in the positioning strategy's constructor you pass in a [_ViewChild_](https://angular.io/api/core/ViewChild) that references the `IgxSelectComponent` from your template.
All of it looks like this:
+
```ts
@ViewChild(IgxSelectComponent)
public igxSelect: IgxSelectComponent;
@@ -199,10 +209,11 @@ public customOverlaySettings: OverlaySettings = {
scrollStrategy: new AbsoluteScrollStrategy()
};
```
+
As you can see there is also a `scrollStrategy` property that is present in the `customOverlaySettings` object. This ensures that the scrolling functionality of the drop-down works as expected. The scroll will appear every time the total height of all items in the list exceeds the drop-down's height.
Another thing worth mentioning is that `igx-select` uses the `SelectPositioningStrategy` by default.
-> You can pass a variety of positioning strategies to the *positionStrategy* property, you can find them [*here*](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/ipositionstrategy.html).
+> You can pass a variety of positioning strategies to the _positionStrategy_ property, you can find them [_here_](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/ipositionstrategy.html).
### Select With Groups
```
+
### View Encapsulation
@@ -171,9 +173,10 @@ $badge-theme: badge-theme($background-color: white);
@include css-vars($avatar-theme);
@include css-vars($badge-theme);
```
+
-#### Usage in encapsulated views
+#### Usage in encapsulated views
The below sample uses the sample from the [View Encapsulation](#view-encapsulation) section as a starting point:
@@ -193,6 +196,7 @@ $avatar-theme: avatar-theme($initials-background: royalblue);
@include css-vars($avatar-theme);
}
```
+
As a bonus, any Ignite UI for Angular theme built with the `$igx-legacy-support` set to `false` will allow styling of components without the need to use Sass in your project. For instance the above could be achieved by setting the value of `--igx-avatar-initials-background` CSS variable to the desired color:
```css
@@ -202,11 +206,12 @@ As a bonus, any Ignite UI for Angular theme built with the `$igx-legacy-support`
--igx-avatar-initials-background: royalblue;
}
```
+
### API Overview
-* [Global Theme]({environment:sassApiUrl}/themes#mixin-theme)
-* [Avatar Theme]({environment:sassApiUrl}/themes#function-avatar-theme)
+- [Global Theme]({environment:sassApiUrl}/themes#mixin-theme)
+- [Avatar Theme]({environment:sassApiUrl}/themes#function-avatar-theme)
@@ -215,9 +220,9 @@ As a bonus, any Ignite UI for Angular theme built with the `$igx-legacy-support`
Learn how to configure a global theme:
-* [Global Themes](./global-theme.md)
+- [Global Themes](./global-theme.md)
Our community is active and always welcoming to new ideas.
-* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
diff --git a/docs/angular/src/content/kr/components/themes/examples.md b/docs/angular/src/content/kr/components/themes/examples.md
index 3b04f01dd5..a4854c36d4 100644
--- a/docs/angular/src/content/kr/components/themes/examples.md
+++ b/docs/angular/src/content/kr/components/themes/examples.md
@@ -10,8 +10,8 @@ The **Ignite UI for Angular Theming** provides you the ability to customize them
### Demos
-
@@ -20,7 +20,7 @@ The **Ignite UI for Angular Theming** provides you the ability to customize them
### Default Theme
-There is a *_Default theme_* that styles all the components in the **Ignite UI for Angular controls** and the first thing that we are going to do is to set it in the `styles.scss` file:
+There is a **Default theme** that styles all the components in the **Ignite UI for Angular controls** and the first thing that we are going to do is to set it in the `styles.scss` file:
```scss
// import first the IgniteUI themes library
@@ -36,18 +36,18 @@ There is a *_Default theme_* that styles all the components in the **Ignite UI f
The result from the above code snippet looks like this:
-
-In case you have other preferences for the appearance of the components or the *_Default theme_* doesn't match the interior of your application, you can use the **Ignite UI for Angular Theming**, which is much easier, fun and efficient way for styling, than writing a huge amount of CSS.
+In case you have other preferences for the appearance of the components or the **Default theme** doesn't match the interior of your application, you can use the **Ignite UI for Angular Theming**, which is much easier, fun and efficient way for styling, than writing a huge amount of CSS.
### Get Started
-To get started, you have to import the *theme utilities*, where the **SASS functions and mixins** are nested.
+To get started, you have to import the _theme utilities_, where the **SASS functions and mixins** are nested.
For good code structure it will be helpful to place the **theme logic** in a separate directory:
```scss
@@ -56,6 +56,7 @@ For good code structure it will be helpful to place the **theme logic** in a sep
@import '~igniteui-angular/lib/core/styles/themes/utilities';
```
+
The next step is to import all the components, that you want to customize, and their corresponding themes.
@@ -73,6 +74,7 @@ Our app will have:
@import '~igniteui-angular/lib/core/styles/components/grid-paginator/grid-paginator-theme';
```
+
- [**Igx-Dialog**](../dialog.md) with embedded [**Igx-Input-Group**](../input-group.md):
```scss
@@ -169,6 +171,7 @@ Bind the host element `class` with the **themes class**.
@HostBinding("class")
public themesClass = "dark-theme";
```
+
After that, in a new SCSS file nest the **themes class**, that includes the components with their themes, in the host element.
@@ -197,17 +200,18 @@ After that, in a new SCSS file nest the **themes class**, that includes the comp
}
}
```
+
And the result is:
-
-Import the *utilities*, component mixins and the theme functions, define the colors, define the themes and apply them. These are the steps for styling your app with **Ignite UI for Angular Theming**.
+Import the _utilities_, component mixins and the theme functions, define the colors, define the themes and apply them. These are the steps for styling your app with **Ignite UI for Angular Theming**.
### Theme Chooser
In the above sample we set only one theme per component.
@@ -300,13 +304,14 @@ export class ThemeChooserSampleComponent implements OnInit {
...
```
+
Now we can easily change our defined themes with only a `click` event:
-
@@ -314,24 +319,24 @@ Now we can easily change our defined themes with only a `click` event:
### API
-* [IgxGridComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme)
-* [IgxGrid Filtering Styles]({environment:sassApiUrl}/themes#function-igx-grid-filtering-theme)
-* [IgxGrid Paginator Styles]({environment:sassApiUrl}/themes#function-igx-grid-paginator-theme)
-* [IgxDialogComponent Styles]({environment:sassApiUrl}/themes#function-dialog-theme)
-* [IgxInputGroupComponent Styles]({environment:sassApiUrl}/themes#function-input-group-theme)
-* [IgxOverlay Styles]({environment:sassApiUrl}/themes#function-overlay-theme)
+- [IgxGridComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme)
+- [IgxGrid Filtering Styles]({environment:sassApiUrl}/themes#function-igx-grid-filtering-theme)
+- [IgxGrid Paginator Styles]({environment:sassApiUrl}/themes#function-igx-grid-paginator-theme)
+- [IgxDialogComponent Styles]({environment:sassApiUrl}/themes#function-dialog-theme)
+- [IgxInputGroupComponent Styles]({environment:sassApiUrl}/themes#function-input-group-theme)
+- [IgxOverlay Styles]({environment:sassApiUrl}/themes#function-overlay-theme)
## Additional Resources
-* [Global Theme](global-theme.md)
-* [Component Themes](component-themes.md)
-* [Color Palette](palette.md)
-* [Grid](../grid/grid.md)
-* [Grid Paging](../grid/paging.md)
-* [Grid Filtering](../grid/filtering.md)
-* [Dialog](../dialog.md)
-* [Input Group](../input-group.md)
-* [Snackbar](../snackbar.md)
-* [Button](../button.md)
-* [Button Group](../button-group.md)
+- [Global Theme](global-theme.md)
+- [Component Themes](component-themes.md)
+- [Color Palette](palette.md)
+- [Grid](../grid/grid.md)
+- [Grid Paging](../grid/paging.md)
+- [Grid Filtering](../grid/filtering.md)
+- [Dialog](../dialog.md)
+- [Input Group](../input-group.md)
+- [Snackbar](../snackbar.md)
+- [Button](../button.md)
+- [Button Group](../button-group.md)
diff --git a/docs/angular/src/content/kr/components/themes/global-theme.md b/docs/angular/src/content/kr/components/themes/global-theme.md
index 60a2e2f9fa..e421d1ac17 100644
--- a/docs/angular/src/content/kr/components/themes/global-theme.md
+++ b/docs/angular/src/content/kr/components/themes/global-theme.md
@@ -13,7 +13,7 @@ _language: kr
If you've included the _`igniteui-angular.css`_ file in your application project, now is a good time to remove it. We are going to use our own _`my-app-theme.scss`_ file to generate a global theme for all components in our application.
**Ignite UI for Angular** uses a global theme by default to theme the entire suite of components. You can, however, create themes scoped to components you have in your app, depending on your use case. For now, we will be including all of our themes in a single file.
-To generate a global theme we're going to be including two mixins `core` and `theme`; `core` doesn't accept any arguments, `theme` accepts a few:
+To generate a global theme we're going to be including two mixins `core` and `theme`; `core` doesn't accept any arguments, `theme` accepts a few:
| Name | Type | Default | Description |
| :---------------: | :-----: | :---------------: | :-----------------------------------------------------------------------------------: |
@@ -46,7 +46,7 @@ $my-color-palette: palette(
@include theme($my-color-palette);
```
-Let's explain what the `core` and `theme` mixins do. The `core` mixin takes care of loading all essential parts like global elevations, global typography, etc. The `theme` will set the global variable `$default-palette` to the palette map you pass; it will also set the global variable `$igx-legacy-support` to the value of `$legacy-support`. The `theme` mixin also includes each individual component style that is not listed in the `$exclude` list of components.
+Let's explain what the `core` and `theme` mixins do. The `core` mixin takes care of loading all essential parts like global elevations, global typography, etc. The `theme` will set the global variable `$default-palette` to the palette map you pass; it will also set the global variable `$igx-legacy-support` to the value of `$legacy-support`. The `theme` mixin also includes each individual component style that is not listed in the `$exclude` list of components.
> [!IMPORTANT]
> Including `core` before `theme` is essential. The `core` mixin provides all base definitions needed for `theme` to work.
@@ -67,7 +67,7 @@ Additionally, if you know your app will not be using some of our components, you
### Light and Dark Themes
-In addition to the more powerful `theme` mixin, we include two additional global theme mixins for fast bootstrapping of *__light__* and *__dark__* themes. Those mixins are `igx-light-theme` and `dark-theme`.
+In addition to the more powerful `theme` mixin, we include two additional global theme mixins for fast bootstrapping of _**light**_ and _**dark**_ themes. Those mixins are `igx-light-theme` and `dark-theme`.
Here's a quick showcase of how you can create a light and dark theme for your application
@@ -83,6 +83,7 @@ Here's a quick showcase of how you can create a light and dark theme for your ap
@include dark-theme($default-palette);
}
```
+
Ideally you would be applying `.light-theme` and `.dark-theme` CSS classes somewhere high in your application DOM tree. Your `app-root` element is a good candidate for that.
### Browser Support
@@ -93,8 +94,8 @@ The value of `$igx-legacy-support` is quite important as it determines how compo
The general rule of thumb regarding what the value of `$legacy-support` should be is dictated by whether you will be including support for Internet Explorer 11 or not. If you want to include support for IE11 set the `$legacy-support` value to `true` (default), otherwise setting its value to `false` will force CSS variables for theming.
### API Overview
-* [Global Theme]({environment:sassApiUrl}/themes#mixin-theme)
-* [Palette]({environment:sassApiUrl}/palettes#function-palette)
+- [Global Theme]({environment:sassApiUrl}/themes#mixin-theme)
+- [Palette]({environment:sassApiUrl}/palettes#function-palette)
@@ -103,9 +104,9 @@ The general rule of thumb regarding what the value of `$legacy-support` should b
Learn how to create individual component themes:
-* [Component Themes](./component-themes.md)
+- [Component Themes](./component-themes.md)
Our community is active and always welcoming to new ideas.
-* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
diff --git a/docs/angular/src/content/kr/components/themes/index.md b/docs/angular/src/content/kr/components/themes/index.md
index 162380bf9d..8ee931c32d 100644
--- a/docs/angular/src/content/kr/components/themes/index.md
+++ b/docs/angular/src/content/kr/components/themes/index.md
@@ -47,16 +47,16 @@ Typography is a separate module in our Sass theming framework, which is decouple
Learn how to create themes:
-* [Global Themes](./global-theme.md)
-* [Component Themes](./component-themes.md)
+- [Global Themes](./global-theme.md)
+- [Component Themes](./component-themes.md)
Learn how to create a component schema:
-* [Schemas](./schemas.md)
+- [Schemas](./schemas.md)
Learn how to build color palettes:
-* [Palettes](./palette.md)
+- [Palettes](./palette.md)
Our community is active and always welcoming to new ideas.
-* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
\ No newline at end of file
+- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
\ No newline at end of file
diff --git a/docs/angular/src/content/kr/components/themes/palette.md b/docs/angular/src/content/kr/components/themes/palette.md
index 8470fd8719..d9bad870e4 100644
--- a/docs/angular/src/content/kr/components/themes/palette.md
+++ b/docs/angular/src/content/kr/components/themes/palette.md
@@ -115,19 +115,20 @@ For instance, if you want to generate CSS classes that apply background color to
$suffix: 'bg'
);
```
+
The above code will generate CSS classes for each color variant in the palette. For instance, the `500` color variant of the `primary` palette will be given the following class `.igx-primary-500-bg`;
### API Reference
-* [Palettes]({environment:sassApiUrl}/palettes#function-palette)
-* [Getting Palette Colors]({environment:sassApiUrl}/palettes#function-color)
-* [Getting Contrast Colors]({environment:sassApiUrl}/palettes#function-contrast-color)
-* [Generating Color Classes]({environment:sassApiUrl}/utilities#mixin-color-classes)
+- [Palettes]({environment:sassApiUrl}/palettes#function-palette)
+- [Getting Palette Colors]({environment:sassApiUrl}/palettes#function-color)
+- [Getting Contrast Colors]({environment:sassApiUrl}/palettes#function-contrast-color)
+- [Generating Color Classes]({environment:sassApiUrl}/utilities#mixin-color-classes)
## Additional Resources
Our community is active and always welcoming to new ideas.
-* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
diff --git a/docs/angular/src/content/kr/components/themes/schemas.md b/docs/angular/src/content/kr/components/themes/schemas.md
index 131242eb53..d1e07ab1d1 100644
--- a/docs/angular/src/content/kr/components/themes/schemas.md
+++ b/docs/angular/src/content/kr/components/themes/schemas.md
@@ -39,11 +39,11 @@ $_light-avatar: (
As you can see from the example above, the component schema defines the properties the [Avatar Theme]({environment:sassApiUrl}/themes#function-avatar-theme) consumes. It just prescribes the colors the avatar should use, without having to resolve them beforehand.
-Let's take the `icon-background` property for example. It tells the avatar theme what the default background should be for each new __igx-avatar__ of type __icon__.
+Let's take the `icon-background` property for example. It tells the avatar theme what the default background should be for each new **igx-avatar** of type **icon**.
-*The `icon-background` can be assigned any value, that is, a value that can be assigned to the CSS `background-color` property.* You can also assign a map to `icon-background`, like in the sample above. When you assign a map to the `icon-background` property, for instance, the map should contain functions as the key names, and arguments for the functions as values for said keys. We do this to be able to resolve the values later on, when the avatar theme is being built. See, because we don't know the palette a user might pass to the avatar theme, we should be able to resolve it later on, only when the palette is known.
+_The `icon-background` can be assigned any value, that is, a value that can be assigned to the CSS `background-color` property._ You can also assign a map to `icon-background`, like in the sample above. When you assign a map to the `icon-background` property, for instance, the map should contain functions as the key names, and arguments for the functions as values for said keys. We do this to be able to resolve the values later on, when the avatar theme is being built. See, because we don't know the palette a user might pass to the avatar theme, we should be able to resolve it later on, only when the palette is known.
-We can also add other functions and arguments to the `icon-background` map as key value pairs. For instance we may want to run the resolved result from `igx-color: ('grays', 400)` through the `hexrgba` function we have, to resolve the hex value for the `400` color variant of the `grays` palette, which is usually represented in rgba.
+We can also add other functions and arguments to the `icon-background` map as key value pairs. For instance we may want to run the resolved result from `igx-color: ('grays', 400)` through the `hexrgba` function we have, to resolve the hex value for the `400` color variant of the `grays` palette, which is usually represented in rgba.
Let's see how the schema will change when we make this addition:
@@ -56,6 +56,7 @@ $_light-avatar: (
...
);
```
+
The result of thecolor function call will be automatically passed as the first argument to the `hexrgba` function. Since the `hexrgba` accepts a second argument for the background color, we provide it as the value of the `hexrgba` key in the example above.
@@ -72,7 +73,7 @@ $my-avatar-schema: extend($_light-avatar, (
Now the value of `$my-avatar-schema` will contain all properties of `$_light-avatar`, except the value of `icon-background` will be set to `limegreen`.
### Consuming Schemas
-Until now we have shown what a component schema is and how you can modify it, but we have not talked about how you can use a schema in your Sass project.
+Until now we have shown what a component schema is and how you can modify it, but we have not talked about how you can use a schema in your Sass project.
Individual component schemas are bundled up in a global schema map for all components we might have. So the `$_light-avatar` schema is part of the global `$light-schema` map. The `$light-schema` maps component schemas to component names. The `$light-schema` looks something like this:
@@ -112,23 +113,24 @@ $my-avatar-theme: avatar-theme(
$schema: $my-light-schema
);
```
+
### Conclusions
-Although schemas require more advanced knowledge of our theming engine compared to theme functions and mixins, they present a powerful way for declaring component themes in your application.
+Although schemas require more advanced knowledge of our theming engine compared to theme functions and mixins, they present a powerful way for declaring component themes in your application.
The good thing about schemas is they allow you to modify the global theme before it was built, thus reducing the amount of produced CSS.
Another great feature of theme schemas is that you can have as many as you want and swap them as you wish. **For instance, we use schemas internally to provide both light and dark themes by default. This allows you to switch the entire look of your application.**
### API Overview
-* [Light Components Schema]({environment:sassApiUrl}/palettes#variable-light-material-schema)
-* [Dark Components Schema]({environment:sassApiUrl}/palettes#variable-dark-material-schema)
-* [Global Theme]({environment:sassApiUrl}/themes#mixin-theme)
-* [Avatar Theme]({environment:sassApiUrl}/themes#function-avatar-theme)
+- [Light Components Schema]({environment:sassApiUrl}/palettes#variable-light-material-schema)
+- [Dark Components Schema]({environment:sassApiUrl}/palettes#variable-dark-material-schema)
+- [Global Theme]({environment:sassApiUrl}/themes#mixin-theme)
+- [Avatar Theme]({environment:sassApiUrl}/themes#function-avatar-theme)
## Additional Resources
Our community is active and always welcoming to new ideas.
-* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
diff --git a/docs/angular/src/content/kr/components/themes/theming-demo.md b/docs/angular/src/content/kr/components/themes/theming-demo.md
index 9958b081c0..22ecdf2837 100644
--- a/docs/angular/src/content/kr/components/themes/theming-demo.md
+++ b/docs/angular/src/content/kr/components/themes/theming-demo.md
@@ -10,8 +10,8 @@ The **Ignite UI for Angular Theming** provides you the ability to customize them
### Demo
-
@@ -20,7 +20,7 @@ The **Ignite UI for Angular Theming** provides you the ability to customize them
### Default Theme
-There is a *_Default theme_* that styles all the components in the **Ignite UI for Angular controls** and the first thing that we are going to do is to set it in the `styles.scss` file:
+There is a **Default theme** that styles all the components in the **Ignite UI for Angular controls** and the first thing that we are going to do is to set it in the `styles.scss` file:
```scss
// import first the IgniteUI themes library
@@ -36,18 +36,18 @@ There is a *_Default theme_* that styles all the components in the **Ignite UI f
The result from the above code snippet looks like this:
-
-In case you have other preferences for the appearance of the components or the *_Default theme_* doesn't match the interior of your application, you can use the **Ignite UI for Angular Theming**, which is much easier, fun and efficient way for styling, than writing huge amount of CSS files.
+In case you have other preferences for the appearance of the components or the **Default theme** doesn't match the interior of your application, you can use the **Ignite UI for Angular Theming**, which is much easier, fun and efficient way for styling, than writing huge amount of CSS files.
### Get Started
-To get started, you have to import the *theme utilities*, where the **SASS functions and mixins** are nested.
+To get started, you have to import the _theme utilities_, where the **SASS functions and mixins** are nested.
For good code structure it will be helpful to place the **theme logic** in a separate directory:
```scss
@@ -56,6 +56,7 @@ For good code structure it will be helpful to place the **theme logic** in a sep
@import '~igniteui-angular/lib/core/styles/themes/utilities';
```
+
The next step is to import all the components, that you want to customize, and their corresponding themes.
@@ -73,6 +74,7 @@ Our app will have:
@import '~igniteui-angular/lib/core/styles/components/grid-paginator/grid-paginator-theme';
```
+
- [**Igx-Dialog**](../dialog.md) with embedded [**Igx-Input-Group**](../input-group.md):
```scss
@@ -169,6 +171,7 @@ Bind the host element `class` with the **themes class**.
@HostBinding("class")
public themesClass = "dark-theme";
```
+
After that, in a new SCSS file nest the **themes class**, that includes the components with their themes, in the host element.
@@ -197,17 +200,18 @@ After that, in a new SCSS file nest the **themes class**, that includes the comp
}
}
```
+
And the result is:
-
-Import the *utilities*, component mixins and the theme functions, define the colors, define the themes and apply them. These are the steps for styling your app with **Ignite UI for Angular Theming**.
+Import the _utilities_, component mixins and the theme functions, define the colors, define the themes and apply them. These are the steps for styling your app with **Ignite UI for Angular Theming**.
### Theme Chooser
In the above sample we set only one theme per component.
@@ -300,13 +304,14 @@ export class ThemeChooserSampleComponent implements OnInit {
...
```
+
Now we can easily change our defined themes with only a `click` event:
-
@@ -314,24 +319,24 @@ Now we can easily change our defined themes with only a `click` event:
### API
-* [IgxGridComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme)
-* [IgxGrid Filtering Styles]({environment:sassApiUrl}/themes#function-igx-grid-filtering-theme)
-* [IgxGrid Paginator Styles]({environment:sassApiUrl}/themes#function-igx-grid-paginator-theme)
-* [IgxDialogComponent Styles]({environment:sassApiUrl}/themes#function-dialog-theme)
-* [IgxInputGroupComponent Styles]({environment:sassApiUrl}/themes#function-input-group-theme)
-* [IgxOverlay Styles]({environment:sassApiUrl}/themes#function-overlay-theme)
+- [IgxGridComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme)
+- [IgxGrid Filtering Styles]({environment:sassApiUrl}/themes#function-igx-grid-filtering-theme)
+- [IgxGrid Paginator Styles]({environment:sassApiUrl}/themes#function-igx-grid-paginator-theme)
+- [IgxDialogComponent Styles]({environment:sassApiUrl}/themes#function-dialog-theme)
+- [IgxInputGroupComponent Styles]({environment:sassApiUrl}/themes#function-input-group-theme)
+- [IgxOverlay Styles]({environment:sassApiUrl}/themes#function-overlay-theme)
## Additional Resources
-* [Global Theme](global-theme.md)
-* [Component Themes](component-themes.md)
-* [Color Palette](palette.md)
-* [Grid](../grid/grid.md)
-* [Grid Paging](../grid/paging.md)
-* [Grid Filtering](../grid/filtering.md)
-* [Dialog](../dialog.md)
-* [Input Group](../input-group.md)
-* [Snackbar](../snackbar.md)
-* [Button](../button.md)
-* [Button Group](../button-group.md)
+- [Global Theme](global-theme.md)
+- [Component Themes](component-themes.md)
+- [Color Palette](palette.md)
+- [Grid](../grid/grid.md)
+- [Grid Paging](../grid/paging.md)
+- [Grid Filtering](../grid/filtering.md)
+- [Dialog](../dialog.md)
+- [Input Group](../input-group.md)
+- [Snackbar](../snackbar.md)
+- [Button](../button.md)
+- [Button Group](../button-group.md)
diff --git a/docs/angular/src/content/kr/components/themes/typography.md b/docs/angular/src/content/kr/components/themes/typography.md
index f3e227516d..aa9b566f3c 100644
--- a/docs/angular/src/content/kr/components/themes/typography.md
+++ b/docs/angular/src/content/kr/components/themes/typography.md
@@ -10,9 +10,10 @@ _language: kr
The Ignite UI for Angular Typography Sass module allows you to modify the typography for the entire application, specific typographic scale, or specific components.
-Ignite UI for Angular follows [The Type System](https://material.io/design/typography/the-type-system.html#) as described in the Material Design specification. The type system is a ***type scale*** consisting of ***13 different category type styles*** used across most components. All of the scale categories are completely reusable and adjustable by the end user.
+Ignite UI for Angular follows [The Type System](https://material.io/design/typography/the-type-system.html#) as described in the Material Design specification. The type system is a _**type scale**_ consisting of _**13 different category type styles**_ used across most components. All of the scale categories are completely reusable and adjustable by the end user.
Here's a list of all 13 category styles as defined in Ignite UI for Angular:
+
| **Scale Category** | **Font Family** | **Font Weight** | **Font Size** | **Text Transform** | **Letter Spacing** | **Line Height** |
|----------------|-----------------|-----------------|---------------|--------------------|--------------------|-----------------|
| **h1** | Titillium Web | 300 | 6 rem | none | -.09375 rem | 7 rem |
@@ -87,10 +88,10 @@ We can use the `$h1-style` we defined in our previous example to produce a sligh
$my-type-scale:type-scale($h1: $h1-style);
```
-Now `$my-type-scale` will store a modified type scale containing the modifications we specified for the `h1` category scale.
+Now `$my-type-scale` will store a modified type scale containing the modifications we specified for the `h1` category scale.
> [!NOTE]
-> You can modify as many of the 13 category scales as you want by passing type styles for each one of them.
+> You can modify as many of the 13 category scales as you want by passing type styles for each one of them.
#### The Typography Mixin
@@ -131,7 +132,7 @@ Most of the components in Ignite UI for Angular use scale categories for styling
- `subtitle-2` - used for styling card subtitle and small title.
- `body-2` - used for styling card text content.
-There are two ways to change the text styles of a card. The first is by modifying the `h5`, `subtitle-2`, and/or `body-2` scales in the ***default type scale*** that we pass to the typography mixin. So if we wanted to make the title in a card smaller, all we have to do is change the font-size for the `h5` scale category.
+There are two ways to change the text styles of a card. The first is by modifying the `h5`, `subtitle-2`, and/or `body-2` scales in the _**default type scale**_ that we pass to the typography mixin. So if we wanted to make the title in a card smaller, all we have to do is change the font-size for the `h5` scale category.
```scss
// Create a custom h5 scale category style
@@ -159,7 +160,7 @@ $my-type-scale:type-scale($h5: $my-h5);
We no longer include the `typography` mixin by passing it the `$my-type-scale` scale with our modification to the `h5` category. Now all we do is pass the custom scale we created to the `card-typography` mixin. The only component that uses our `$my-type-scale` scale is the card now.
-Typography style mixins can be scoped to specific selectors. Say we wanted our custom card typography styles to be applied for all `igx-card` components with class name of `my-cool-card`.
+Typography style mixins can be scoped to specific selectors. Say we wanted our custom card typography styles to be applied for all `igx-card` components with class name of `my-cool-card`.
```scss
//...
@@ -207,10 +208,10 @@ Here's a list of all CSS classes we provide by default:
-###Additional Resources
+### Additional Resources
Our community is active and always welcoming to new ideas.
-* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
diff --git a/docs/angular/src/content/kr/components/time-picker.md b/docs/angular/src/content/kr/components/time-picker.md
index b419241844..22092c9447 100644
--- a/docs/angular/src/content/kr/components/time-picker.md
+++ b/docs/angular/src/content/kr/components/time-picker.md
@@ -12,10 +12,10 @@ _language: kr
As one of the most commonly used UI components for today’s web applications, the Angular Time Picker, also known as Angular Time Picker, provides developers with a variety of features that provide with the ability to customize the component to create the best UX and UI experience for the users to interact with the component. There are different built-in templates for displaying a clock button, as well as features like validation, custom time formatting, and more.
|
-{/* | Map Quest |Provides custom geographic imagery from Map Quest service with configurable options to display the following map styles:
Satellite Map Style
Road Map Style
*/}
+{/*| Map Quest |Provides custom geographic imagery from Map Quest service with configurable options to display the following map styles:
Satellite Map Style
Road Map Style
*/}
## Map Background Content
The map component's property is used to display all supported types of geographic imagery sources. For each imagery source, there is an imagery class used for rendering corresponding geographic imagery tiles.
@@ -34,7 +34,7 @@ The following table summarizes imagery classes provided by the map component.
||Represents the base control for all imagery classes that display all types of supported geographic imagery tiles. This class can be extended for the purpose of implementing support for geographic imagery tiles from other geographic imagery sources such as Map Quest mapping service.|
||Represents the multi-scale imagery control for displaying geographic imagery tiles from the Open Street Maps service.|
-{/* |`BingMapsMapImagery`|Represents the multi-scale imagery control for displaying geographic imagery tiles from the Bing Maps service.| */}
+{/*|`BingMapsMapImagery`|Represents the multi-scale imagery control for displaying geographic imagery tiles from the Bing Maps service.|*/}
By default, the property is set to object and the map component displays geographic imagery tiles from the Open Street Maps service. In order to display different types of geographic imagery tiles, the map component must be re-configured.
diff --git a/docs/xplat/src/content/en/components/geo-map.mdx b/docs/xplat/src/content/en/components/geo-map.mdx
index e43df0c3e3..f818f8ff05 100644
--- a/docs/xplat/src/content/en/components/geo-map.mdx
+++ b/docs/xplat/src/content/en/components/geo-map.mdx
@@ -214,7 +214,7 @@ Now that the map module is imported, next step is to create geographic map. The
You can find more information about related {Platform} map features in these topics:
- [Geographic Map Navigation](geo-map-navigation.md)
-{/* - [Geographic Map Imagery](geo-map-display-imagery-types.md) */}
+{/*- [Geographic Map Imagery](geo-map-display-imagery-types.md)*/}
- [Using Scatter Symbol Series](geo-map-type-scatter-symbol-series.md)
- [Using Scatter Proportional Series](geo-map-type-scatter-bubble-series.md)
- [Using Scatter Contour Series](geo-map-type-scatter-contour-series.md)
diff --git a/docs/xplat/src/content/en/components/grid-lite/binding.mdx b/docs/xplat/src/content/en/components/grid-lite/binding.mdx
index c6e91c8538..ef8ea6b571 100644
--- a/docs/xplat/src/content/en/components/grid-lite/binding.mdx
+++ b/docs/xplat/src/content/en/components/grid-lite/binding.mdx
@@ -200,7 +200,7 @@ the column collection is reset, and a new data source is bound to the grid.
-{/* TODO */}
+{/*TODO */}
## Additional Resources
diff --git a/docs/xplat/src/content/en/components/grid-lite/cell-template.mdx b/docs/xplat/src/content/en/components/grid-lite/cell-template.mdx
index 8cd9411bee..5eb5e850d5 100644
--- a/docs/xplat/src/content/en/components/grid-lite/cell-template.mdx
+++ b/docs/xplat/src/content/en/components/grid-lite/cell-template.mdx
@@ -52,6 +52,7 @@ return (
);
```
+
@@ -93,6 +94,7 @@ const currencyCellTemplate = (ctx: IgrCellContext) => (
{formatCurrency(ctx.value)}
);
```
+
@@ -105,8 +107,8 @@ const currencyCellTemplate = (ctx: IgrCellContext) => (
You can combine values of different fields from the data source as well.
-{/* TODO:
-Refer to the API documentation for `GridLiteCellContext` for more information. */}
+{/*TODO:
+Refer to the API documentation for `GridLiteCellContext` for more information.*/}
@@ -119,6 +121,7 @@ const column = document.querySelector('igc-grid-lite-column');
// Return the custom currency formatted value
column.cellTemplate = ({value, row}) => asCurrency(value * row.data.count);
```
+
@@ -133,6 +136,7 @@ const totalCellTemplate = (ctx: IgrCellContext) => (
{asCurrency(ctx.value * ctx.row.data.count)}
);
```
+
@@ -141,6 +145,7 @@ const totalCellTemplate = (ctx: IgrCellContext) => (
```
+
## Custom DOM Templates
@@ -244,7 +249,7 @@ export interface GridLiteCellContext<
-{/* TODO */}
+{/*TODO */}
## Additional Resources
diff --git a/docs/xplat/src/content/en/components/grid-lite/column-configuration.mdx b/docs/xplat/src/content/en/components/grid-lite/column-configuration.mdx
index 8354726e9d..c34c4f0256 100644
--- a/docs/xplat/src/content/en/components/grid-lite/column-configuration.mdx
+++ b/docs/xplat/src/content/en/components/grid-lite/column-configuration.mdx
@@ -359,7 +359,7 @@ In the sample below you can try out the different column properties and how they
-{/* TODO */}
+{/*TODO */}
## Additional Resources
diff --git a/docs/xplat/src/content/en/components/grid-lite/filtering.mdx b/docs/xplat/src/content/en/components/grid-lite/filtering.mdx
index 217cdbf1c6..a0810a2574 100644
--- a/docs/xplat/src/content/en/components/grid-lite/filtering.mdx
+++ b/docs/xplat/src/content/en/components/grid-lite/filtering.mdx
@@ -410,6 +410,7 @@ For example here is a Lit-based sample:
}
}
```
+
Here is an example:
@@ -425,6 +426,7 @@ return(
);
```
+
@@ -564,6 +566,7 @@ export type DataPipelineParams = {
type: 'sort' | 'filter';
};
```
+
```typescript
grid.dataPipelineConfiguration = { filter: (params: DataPipelineParams) => T[] | Promise };
@@ -606,6 +609,7 @@ grid.DataPipelineConfiguration = new DataPipelineConfiguration
}
};
```
+
@@ -620,7 +624,7 @@ The following example mocks remote filter operation, reflecting the REST endpoin
-{/* TODO */}
+{/*TODO */}
## Additional Resources
diff --git a/docs/xplat/src/content/en/components/grid-lite/header-template.mdx b/docs/xplat/src/content/en/components/grid-lite/header-template.mdx
index fa1478da09..c3ac5f086d 100644
--- a/docs/xplat/src/content/en/components/grid-lite/header-template.mdx
+++ b/docs/xplat/src/content/en/components/grid-lite/header-template.mdx
@@ -104,7 +104,7 @@ return (
-{/* TODO */}
+{/*TODO */}
## Additional Resources
diff --git a/docs/xplat/src/content/en/components/grid-lite/overview.mdx b/docs/xplat/src/content/en/components/grid-lite/overview.mdx
index f85dbe27db..eecf5363ac 100644
--- a/docs/xplat/src/content/en/components/grid-lite/overview.mdx
+++ b/docs/xplat/src/content/en/components/grid-lite/overview.mdx
@@ -55,6 +55,7 @@ Or using yarn:
```cmd
yarn add igniteui-grid-lite
```
+
### Installation
@@ -69,6 +70,7 @@ Or using yarn:
```cmd
yarn add igniteui-react
```
+
### Using the Grid Lite in your {Platform} code
@@ -79,6 +81,7 @@ In the file where you want to use Grid Lite, first we need to import it:
```tsx
import { IgrGridLite } from 'igniteui-react/grid-lite';
```
+
@@ -89,6 +92,7 @@ import { IgcGridLite } from 'igniteui-grid-lite';
IgcGridLite.register();
```
+
@@ -113,6 +117,7 @@ return (
);
```
+
@@ -146,6 +151,7 @@ Or via .NET CLI:
```cmd
dotnet add package IgniteUI.Blazor.GridLite
```
+
### Using Grid Lite
1 - Add the **IgniteUI.Blazor.Controls** namespace in the **_Imports.razor** file:
diff --git a/docs/xplat/src/content/en/components/grid-lite/sorting.mdx b/docs/xplat/src/content/en/components/grid-lite/sorting.mdx
index 76f6cf8ce6..23d7936bb9 100644
--- a/docs/xplat/src/content/en/components/grid-lite/sorting.mdx
+++ b/docs/xplat/src/content/en/components/grid-lite/sorting.mdx
@@ -250,6 +250,7 @@ The {GridLiteTitle} supports tri-state sorting and it is always enabled. End-use
```
ascending -> descending -> none -> ascending
```
+
where `none` is the initial state of the data, that is to say with no sorting applied by the grid.
@@ -261,6 +262,7 @@ where `none` is the initial state of the data, that is to say with no sorting ap
```
Ascending -> Descending -> None -> Ascending
```
+
where `None` is the initial state of the data, that is to say with no sorting applied by the grid.
@@ -706,6 +708,7 @@ export type DataPipelineParams = {
type: 'sort' | 'filter';
};
```
+
```typescript
grid.dataPipelineConfiguration = { sort: (params: DataPipelineParams) => T[] | Promise };
@@ -748,6 +751,7 @@ grid.DataPipelineConfiguration = new DataPipelineParams
}
};
```
+
The custom callback can be async as the grid will wait for it until it resolves.
@@ -761,7 +765,7 @@ The following example mocks remote sorting operation, reflecting the REST endpoi
-{/* TODO */}
+{/*TODO */}
## Additional Resources
diff --git a/docs/xplat/src/content/en/components/grid-lite/theming.mdx b/docs/xplat/src/content/en/components/grid-lite/theming.mdx
index bfb6e98ee6..f011fab897 100644
--- a/docs/xplat/src/content/en/components/grid-lite/theming.mdx
+++ b/docs/xplat/src/content/en/components/grid-lite/theming.mdx
@@ -45,7 +45,7 @@ In the sample below, you can preview all the default base themes.
Aside from the default themes shipped with the {GridLiteTitle} package, you can further customize the look and feel of your data grid by using an alternate set of CSS custom properties.
-Refer to the [theming topic](../grids/theming-grid.md) for more details.
+Refer to the [theming topic](../grids/theming-grid.md) for more details.
```css
.grid-sample {
@@ -70,7 +70,7 @@ Here is an example showcasing the custom theming from above.
-{/* TODO */}
+{/*TODO */}
## Additional Resources
diff --git a/docs/xplat/src/content/en/components/grids/_shared/advanced-filtering.mdx b/docs/xplat/src/content/en/components/grids/_shared/advanced-filtering.mdx
index 9f91289d29..a677e80c94 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/advanced-filtering.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/advanced-filtering.mdx
@@ -197,6 +197,7 @@ ngAfterViewInit(): void {
this.@@igObjectRef.advancedFilteringExpressionsTree = tree;
}
+
```
@@ -228,6 +229,7 @@ connectedCallback(): void {
grid.advancedFilteringExpressionsTree = tree;
}
```
+
@@ -260,6 +262,7 @@ const filteringTree: IgrFilteringExpressionsTree = {
+
```
diff --git a/docs/xplat/src/content/en/components/grids/_shared/batch-editing.mdx b/docs/xplat/src/content/en/components/grids/_shared/batch-editing.mdx
index d1038b88f1..491862b39c 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/batch-editing.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/batch-editing.mdx
@@ -83,6 +83,7 @@ After batch editing is enabled, define a Redo
+
```
@@ -116,6 +117,7 @@ After batch editing is enabled, define a
@@ -127,6 +129,7 @@ After batch editing is enabled, define a Undo
+
```
@@ -210,6 +213,7 @@ private OnRedoClick() {
this.grid.transactions.redo();
}
}
+
```
@@ -223,6 +227,7 @@ private OnRedoClick() {
```
+
@@ -396,6 +401,7 @@ export class GridBatchEditingSampleComponent {
}
}
```
+
@@ -424,6 +430,7 @@ export class HierarchicalGridBatchEditingSampleComponent {
}
}
```
+
diff --git a/docs/xplat/src/content/en/components/grids/_shared/cascading-combos.mdx b/docs/xplat/src/content/en/components/grids/_shared/cascading-combos.mdx
index f36dfa6220..c6e4b314c1 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/cascading-combos.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/cascading-combos.mdx
@@ -95,6 +95,7 @@ Then you should define the column template with the combo:
);
}
+
```
@@ -111,6 +112,7 @@ Then you should define the column template with the combo:
}
```
+
@@ -183,6 +185,7 @@ public bindEventsCountryCombo(rowId: any, cell: any) {
};
});
}
+
```
@@ -212,6 +215,7 @@ public bindEventsCountryCombo(rowId: any, cell: any) {
}
}
```
+
@@ -276,6 +280,7 @@ The `id` is necessary to set the value of `id` attribute.
type="info" [indeterminate]="true">
```
+
@@ -308,6 +313,7 @@ And lastly, adding the , which is required whil
return @
;
};
```
+
## Known Issues and Limitations
diff --git a/docs/xplat/src/content/en/components/grids/_shared/cell-editing.mdx b/docs/xplat/src/content/en/components/grids/_shared/cell-editing.mdx
index 7304160546..abb10c3528 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/cell-editing.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/cell-editing.mdx
@@ -338,6 +338,7 @@ igRegisterScript("WebGridCellEditCellTemplate", (ctx) => {
`;
}, false);
```
+
@@ -430,6 +431,7 @@ public webGridCellEditCellTemplate = (ctx: IgcCellTemplateContext) => {
`;
}
```
+
@@ -472,6 +474,7 @@ public webGridCellEditCellTemplate = (ctx: IgcCellTemplateContext) => {
`;
}
```
+
@@ -530,6 +533,7 @@ public webGridCellEditCellTemplate = (e: IgrCellTemplateContext) => {
);
};
```
+
Working sample of the above can be found here for further reference:
@@ -589,6 +593,7 @@ public keydownHandler(event) {
}
}
}
+
```
@@ -611,6 +616,7 @@ function handleKeyDown(event: KeyBoardEvent) {
}
}
```
+
- ENTER/SHIFT + ENTER navigation
@@ -632,6 +638,7 @@ if (key == 13) {
this.cdr.detectChanges();
});
}
+
```
@@ -649,6 +656,7 @@ if (code === "Enter" || code === "NumpadEnter") {
});
}
```
+
Key parts of finding the next eligible index would be:
@@ -792,6 +800,7 @@ this.selectedCell.update(newData);
// Directly using the row `update` method
const row = this.grid.getRowByKey(rowID);
row.update(newData);
+
```
@@ -810,6 +819,7 @@ selectedCell.update(newData);
const row = grid1Ref.current.getRowByKey(rowID);
row.update(newData);
```
+
@@ -829,6 +839,7 @@ row.update(newData);
IgbRowType row = this.grid.GetRowByKey(rowID);
row.Update(newData);
}
+
```
@@ -849,6 +860,7 @@ this.selectedCell.update(newData);
const row = this.treeGrid.getRowByKey(rowID);
row.update(newData);
```
+
@@ -867,6 +879,7 @@ row.update(newData);
IgbRowType row = this.treeGrid.GetRowByKey(rowID);
row.Update(newData);
}
+
```
@@ -888,6 +901,7 @@ this.selectedCell.update(newData);
const row = this.hierarchicalGrid.getRowByKey(rowID);
row.update(newData);
```
+
@@ -906,6 +920,7 @@ row.update(newData);
IgbRowType row = this.hierarchicalGrid.GetRowByKey(rowID);
row.Update(newData);
}
+
```
@@ -923,6 +938,7 @@ this.grid.deleteRow(this.selectedCell.cellID.rowID);
const row = this.grid.getRowByIndex(rowIndex);
row.delete();
```
+
@@ -1146,6 +1162,7 @@ function handleCellEdit(args: IgrGridEditEventArgs): void {
}
}
```
+
@@ -1172,7 +1189,7 @@ If the value entered in a cell under the **Units On Order** column is larger tha
```typescript
public webTreeGridCellEdit(event: CustomEvent): void {
const column = event.detail.column;
-
+
if (column.field === 'Age') {
if (event.detail.newValue < 18) {
event.detail.cancel = true;
@@ -1208,6 +1225,7 @@ igRegisterScript("HandleCellEdit", (ev) => {
}
}, false);
```
+
@@ -1230,6 +1248,7 @@ public webTreeGridCellEdit(args: IgrGridEditEventArgs): void {
}
}
}
+
```
@@ -1267,6 +1286,7 @@ public webHierarchicalGridCellEdit(event: CustomEvent): vo
}
}
```
+
@@ -1350,6 +1370,7 @@ Then set the related CSS properties for that class:
--ig-grid-cell-editing-background: #add8e6;
}
```
+
@@ -1380,6 +1401,7 @@ Then set the related CSS properties for that class:
--ig-grid-cell-editing-background: #add8e6;
}
```
+
@@ -1410,6 +1432,7 @@ Then set the related CSS properties for that class:
--ig-grid-cell-editing-background: #add8e6;
}
```
+
### Styling Example
diff --git a/docs/xplat/src/content/en/components/grids/_shared/cell-merging.mdx b/docs/xplat/src/content/en/components/grids/_shared/cell-merging.mdx
index 1ee08d8503..1a045af869 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/cell-merging.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/cell-merging.mdx
@@ -78,6 +78,7 @@ const cellMergeMode: GridCellMergeMode = 'always';
@code {
private GridCellMergeMode CellMergeMode = GridCellMergeMode.Always;
}
+
```
@@ -89,6 +90,7 @@ At the column level, merging can be enabled or disabled with the
```
+
@@ -124,6 +126,7 @@ In the above example:
```tsx
const cellMergeMode: GridCellMergeMode = 'onSort';
```
+
@@ -147,6 +150,7 @@ const cellMergeMode: GridCellMergeMode = 'onSort';
@code {
private GridCellMergeMode CellMergeMode = GridCellMergeMode.OnSort;
}
+
```
@@ -174,6 +178,7 @@ export declare class IgrGridMergeStrategy {
comparer: (prevRecord: any, record: any, field: string) => boolean;
}
```
+
@@ -190,6 +195,7 @@ export declare class IgcGridMergeStrategy {
comparer: (prevRecord: any, record: any, field: string) => boolean;
}
+
```
@@ -214,6 +220,7 @@ export class MyCustomStrategy extends IgrDefaultMergeStrategy {
}
}
```
+
```ts
@@ -271,6 +278,7 @@ export class MyCustomStrategy extends IgcDefaultTreeGridMergeStrategy {
### Applying a Custom Strategy
Once defined, assign the strategy to the grid through the property:
+
```tsx
<{ComponentSelector} data={data} mergeStrategy={customStrategy}>
@@ -281,6 +289,7 @@ Once defined, assign the strategy to the grid through the
@@ -292,6 +301,7 @@ constructor() {
grid.mergeStrategy = new MyCustomStrategy() as IgcGridMergeStrategy;
grid.cellMergeMode = 'always';
}
+
```
### Demo
diff --git a/docs/xplat/src/content/en/components/grids/_shared/cell-selection.mdx b/docs/xplat/src/content/en/components/grids/_shared/cell-selection.mdx
index 0c6f8afeb8..58f2beb37f 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/cell-selection.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/cell-selection.mdx
@@ -142,6 +142,7 @@ gridRef.current.selectRange(range)
this.grid.SelectRange(new IgbGridSelectionRange[] {});
}
}
+
```
@@ -155,6 +156,7 @@ gridRef.current.selectRange(range)
```ts
this.grid.clearCellSelection();
```
+
@@ -193,6 +195,7 @@ gridRef.current.clearCellSelection();
}
}
```
+
diff --git a/docs/xplat/src/content/en/components/grids/_shared/collapsible-column-groups.mdx b/docs/xplat/src/content/en/components/grids/_shared/collapsible-column-groups.mdx
index 5a32786873..ecf3ac8510 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/collapsible-column-groups.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/collapsible-column-groups.mdx
@@ -207,6 +207,7 @@ Also, if you need to change the default expand/collapse indicator, we provide te
this.addressColumn.CollapsibleIndicatorTemplate = this.ColumnIndicatorTemplate;
}
}
+
```
@@ -237,6 +238,7 @@ public indTemplate = (ctx: IgcColumnTemplateContext) => {
`;
}
```
+
@@ -256,6 +258,7 @@ const collapsibleIndicatorTemplate = (ctx: IgrColumnTemplateContext) => {
)
}
+
```
diff --git a/docs/xplat/src/content/en/components/grids/_shared/column-hiding.mdx b/docs/xplat/src/content/en/components/grids/_shared/column-hiding.mdx
index 6c3c68aa51..6e8565c7af 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/column-hiding.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/column-hiding.mdx
@@ -726,6 +726,7 @@ Now all we have to do is bind the `Checked` property of both radio buttons respe
```
+
### Disable hiding of a column
@@ -857,6 +858,7 @@ We can easily prevent the user from being able to hide columns through the colum
+
```
@@ -1109,6 +1111,7 @@ Then set the related CSS variables for the related components. We will apply the
--ig-button-focus-visible-foreground: black;
--ig-button-disabled-foreground: #ffcd0f;
}
+
```
@@ -1144,6 +1147,7 @@ Then set the related CSS variables for the related components. We will apply the
--ig-button-disabled-foreground: #ffcd0f;
}
```
+
@@ -1177,6 +1181,7 @@ Then set the related CSS variables for the related components. We will apply the
--ig-button-focus-visible-foreground: black;
--ig-button-disabled-foreground: #ffcd0f;
}
+
```
diff --git a/docs/xplat/src/content/en/components/grids/_shared/column-moving.mdx b/docs/xplat/src/content/en/components/grids/_shared/column-moving.mdx
index faa9f8597c..6ff4ad5400 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/column-moving.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/column-moving.mdx
@@ -86,9 +86,11 @@ const headerTemplate = (ctx: IgrCellTemplateContext) => {
**Column moving** feature is enabled on a per-grid level, meaning that the could have either movable or immovable columns. This is done via the input of the .
+
```html
<{ComponentSelector} [moving]="true">
```
+
@@ -163,6 +165,7 @@ const idColumn = grid.getColumnByName("ID");
const nameColumn = grid.getColumnByName("Name");
grid.moveColumn(idColumn, nameColumn, DropPosition.AfterDropTarget);
+
```
@@ -175,6 +178,7 @@ grid.moveColumn(idColumn, nameColumn, DropPosition.AfterDropTarget);
this.Grid.MoveColumn(Col1,Col2, DropPosition.AfterDropTarget);
}
```
+
@@ -238,6 +242,7 @@ public onColumnMovingEnd(event) {
}
}
```
+
@@ -253,6 +258,7 @@ const onColumnMovingEnd = (event: IgrColumnMovingEndEventArgs) => {
+
```
@@ -268,6 +274,7 @@ const onColumnMovingEnd = (event: IgrColumnMovingEndEventArgs) => {
ColumnMovingEndScript='onColumnMovingEnd'>
```
+
diff --git a/docs/xplat/src/content/en/components/grids/_shared/column-pinning.mdx b/docs/xplat/src/content/en/components/grids/_shared/column-pinning.mdx
index ec2e4aca9c..5052c1b802 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/column-pinning.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/column-pinning.mdx
@@ -275,6 +275,7 @@ function onColumnPin(e) {
}
igRegisterScript("onColumnPin", onColumnPin, false);
+
```
@@ -291,6 +292,7 @@ When set to End the columns are rendered at the end of the grid, after the unpin
```typescript
public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End };
```
+
@@ -302,6 +304,7 @@ public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End };
var grid = document.getElementById('dataGrid') as {ComponentName}Component;
grid.pinning = { columns: ColumnPinningPosition.End };
```
+
@@ -312,6 +315,7 @@ const pinningConfig: IgrPinningConfig = { columns: ColumnPinningPosition.End };
```tsx
<{ComponentSelector} data={nwindData} autoGenerate={true} pinning={pinningConfig}>
```
+
@@ -323,6 +327,7 @@ const pinningConfig: IgrPinningConfig = { columns: ColumnPinningPosition.End };
Columns = ColumnPinningPosition.End
};
}
+
```
@@ -361,6 +366,7 @@ This can be done by creating a header template for the columns with a custom ico
```
+
@@ -419,6 +425,7 @@ public pinHeaderTemplate = (ctx: IgcCellTemplateContext) => {
`;
}
```
+
@@ -440,7 +447,7 @@ public pinHeaderTemplate = (ctx: IgcCellTemplateContext) => {
igRegisterScript("WebGridPinHeaderTemplate", (ctx) => {
var html = window.igTemplating.html;
window.toggleColumnPin = function toggleColumnPin(field) {
- var grid = document.getElementsByTagName("igc-grid")[0];
+ var grid = document.getElementsByTagName["igc-grid"](0);
var col = grid.getColumnByName(field);
col.pinned = !col.pinned;
grid.markForCheck();
@@ -486,6 +493,7 @@ const toggleColumnPin = (ctx: IgrColumnTemplateContext) => {
);
}
```
+
@@ -574,6 +582,7 @@ public pinHeaderTemplate = (ctx: IgcCellTemplateContext) => {
`;
}
```
+
@@ -604,7 +613,7 @@ public pinHeaderTemplate = (ctx: IgcCellTemplateContext) => {
igRegisterScript("WebTreeGridPinHeaderTemplate", (ctx) => {
var html = window.igTemplating.html;
window.toggleColumnPin = function toggleColumnPin(field) {
- var grid = document.getElementsByTagName("igc-tree-grid")[0];
+ var grid = document.getElementsByTagName["igc-tree-grid"](0);
var col = grid.getColumnByName(field);
col.pinned = !col.pinned;
grid.markForCheck();
@@ -630,6 +639,7 @@ igRegisterScript("WebTreeGridPinHeaderTemplate", (ctx) => {
+
```
```tsx
@@ -649,6 +659,7 @@ const toggleColumnPin = (ctx: IgrColumnTemplateContext) => {
);
}
```
+
@@ -729,12 +740,13 @@ constructor() {
public pinHeaderTemplate = (ctx: IgcCellTemplateContext) => {
return html`
-
+
${ctx.cell.column.header}
`;
}
+
```
@@ -771,6 +783,7 @@ const toggleColumnPin = (ctx: IgrColumnTemplateContext) => {
);
}
```
+
diff --git a/docs/xplat/src/content/en/components/grids/_shared/column-resizing.mdx b/docs/xplat/src/content/en/components/grids/_shared/column-resizing.mdx
index f8d6dba305..665e57f9c1 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/column-resizing.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/column-resizing.mdx
@@ -115,6 +115,7 @@ public onResize(event) {
}
```
+
@@ -132,6 +133,7 @@ public onResize(event) {
string nWidth = args.Detail.NewWidth;
}
}
+
```
@@ -148,6 +150,7 @@ const onResize = (event: IgrColumnResizeEventArgs) => {
```
+
@@ -182,6 +185,7 @@ public onResize(event) {
this.nWidth = event.newWidth;
}
```
+
@@ -196,6 +200,7 @@ const onResize = (event: IgrColumnResizeEventArgs) => {
+
```
@@ -215,6 +220,7 @@ const onResize = (event: IgrColumnResizeEventArgs) => {
}
}
```
+
@@ -249,6 +255,7 @@ public onResize(event) {
this.nWidth = event.newWidth;
}
```
+
@@ -262,6 +269,7 @@ const onResize = (event: IgrColumnResizeEventArgs) => {
<{ComponentSelector} id="hierarchicalGrid" autoGenerate={false} onColumnResized={onResize}>
+
```
@@ -280,6 +288,7 @@ const onResize = (event: IgrColumnResizeEventArgs) => {
}
}
```
+
@@ -630,8 +639,9 @@ You can also auto-size a column dynamically using the exposed
@@ -662,6 +673,7 @@ column.autosize();
column.Autosize(false);
}
}
+
```
@@ -674,6 +686,7 @@ column.autosize();
let column = this.@@igObjectRef.columnList.filter(c => c.field === 'Artist')[0];
column.autosize();
```
+
@@ -703,6 +716,7 @@ column.autosize();
column.Autosize(false);
}
}
+
```
@@ -716,6 +730,7 @@ Each column can be set to auto-size on initialization by setting
diff --git a/docs/xplat/src/content/en/components/grids/_shared/column-types.mdx b/docs/xplat/src/content/en/components/grids/_shared/column-types.mdx
index bd3961a6e1..a3829aaa74 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/column-types.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/column-types.mdx
@@ -68,6 +68,7 @@ public formatOptions = this.options;
@code {
private IgbColumnPipeArgs formatOptions = new IgbColumnPipeArgs() { DigitsInfo = "1.4-4" };
}
+
```
@@ -76,6 +77,7 @@ public formatOptions = this.options;
```
+
@@ -90,6 +92,7 @@ constructor() {
var column = document.getElementById('column') as IgcColumnComponent;
column.pipeArgs = this.formatOptions;
}
+
```
@@ -101,6 +104,7 @@ const formatOptions : IgrColumnPipeArgs = {
```
+
### DateTime, Date and Time
@@ -138,13 +142,14 @@ public formatOptions = this.options;
@code {
private IgbColumnPipeArgs formatDateOptions = new IgbColumnPipeArgs()
{
- /** The date/time components that a date column will display, using predefined options or a custom format string. */
- /** e.g 'dd/mm/yyyy' or 'shortDate' **/
+ /** The date/time components that a date column will display, using predefined options or a custom format string. _/
+ /_*e.g 'dd/mm/yyyy' or 'shortDate' **/
Format = "longDate",
- /** A timezone offset (such as '+0430'), or a standard UTC/GMT or continental US timezone abbreviation. */
+ /** A timezone offset (such as '+0430'), or a standard UTC/GMT or continental US timezone abbreviation.*/
Timezone = "GMT"
};
}
+
```
@@ -168,6 +173,7 @@ constructor() {
column.pipeArgs = this.formatDateOptions;
}
```
+
@@ -178,6 +184,7 @@ const formatOptions : IgrColumnPipeArgs = {
};
+
```
@@ -211,6 +218,7 @@ public timeFormats = [
{ format: 'fullTime', eq: 'h:mm:ss a zzzz' },
];
```
+
@@ -390,6 +398,7 @@ public formatOptions = this.options;
Display = "symbol-narrow"
};
}
+
```
@@ -398,6 +407,7 @@ public formatOptions = this.options;
```
+
@@ -413,6 +423,7 @@ constructor() {
var column = document.getElementById('column') as IgcColumnComponent;
column.pipeArgs = this.formatOptions;
}
+
```
@@ -425,12 +436,14 @@ const formatOptions : IgrColumnPipeArgs = {
```
+
| Parameter | Description |
|---------------------------| -------------------------|
| digitsInfo | Represents Decimal representation of currency value |
| display* | Displays the value by narrow or wide symbol |
+
| currencyCode | ISO 4217 currency code |
@@ -484,15 +497,16 @@ public formatPercentOptions = this.options;
private IgbColumnPipeArgs formatPercentOptions = new IgbColumnPipeArgs()
{
/**
- * Decimal representation options, specified by a string in the following format:
+ *Decimal representation options, specified by a string in the following format:
* `{minIntegerDigits}`.`{minFractionDigits}`-`{maxFractionDigits}`.
- * `minIntegerDigits`: The minimum number of integer digits before the decimal point. Default is 1.
+ *`minIntegerDigits`: The minimum number of integer digits before the decimal point. Default is 1.
* `minFractionDigits`: The minimum number of digits after the decimal point. Default is 0.
- * `maxFractionDigits`: The maximum number of digits after the decimal point. Default is 3.
+ *`maxFractionDigits`: The maximum number of digits after the decimal point. Default is 3.
*/
DigitsInfo = "2.2-3"
};
}
+
```
@@ -501,6 +515,7 @@ public formatPercentOptions = this.options;
```
+
@@ -522,6 +537,7 @@ constructor() {
var column = document.getElementById('column') as IgcColumnComponent;
column.pipeArgs = this.formatPercentOptions;
}
+
```
@@ -540,6 +556,7 @@ const formatOptions : IgrColumnPipeArgs = {
```
+
@@ -586,6 +603,7 @@ constructor() {
public editCellTemplate = (ctx: IgcCellTemplateContext) => {
return html``;
}
+
```
@@ -603,6 +621,7 @@ const editCellTemplate = (ctx: IgrCellTemplateContext) => {
```
+
@@ -641,6 +660,7 @@ constructor() {
public formatCurrency(value: number) {
return `$ ${value.toFixed(0)}`;
}
+
```
@@ -654,6 +674,7 @@ const formatCurrency = (value: number) => {
```
+
@@ -666,6 +687,7 @@ const formatCurrency = (value: number) => {
igRegisterScript("CurrencyFormatter", (value) => {
return `$ ${value.toFixed(0)}`;
}, false);
+
```
@@ -685,6 +707,7 @@ public init(column: IgxColumnComponent) {
return;
}
```
+
diff --git a/docs/xplat/src/content/en/components/grids/_shared/conditional-cell-styling.mdx b/docs/xplat/src/content/en/components/grids/_shared/conditional-cell-styling.mdx
index d258bf88b1..42fd9bffaa 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/conditional-cell-styling.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/conditional-cell-styling.mdx
@@ -57,6 +57,7 @@ constructor() {
grid.rowClasses = this.rowClasses;
}
```
+
@@ -75,6 +76,7 @@ public rowClasses = {
};
public activeRowCondition = (row: RowType) => this.grid?.navigation.activeNode?.row === row.index;
+
```
```scss
@@ -87,6 +89,7 @@ public activeRowCondition = (row: RowType) => this.grid?.navigation.activeNode?.
}
}
```
+
@@ -253,6 +256,7 @@ public rowStyles = {
'border-color': (row: RowType) => row.data.data['Title'] === 'CEO' ? '#495057' : null,
color: (row: RowType) => row.data.data['Title'] === 'CEO' ? '#fff' : null
};
+
```
@@ -271,6 +275,7 @@ public rowStyles = {
color: (row: IgcRowType) => row.data.data['Title'] === 'CEO' ? '#fff' : null
};
```
+
@@ -329,6 +334,7 @@ constructor() {
treeGrid.rowStyles = this.rowStyles;
}
```
+
@@ -358,6 +364,7 @@ public rowStyles = {
public childRowStyles = {
'border-left': (row: RowType) => row.data['BillboardReview'] > 70 ? '3.5px solid #dda15e' : null
};
+
```
@@ -372,6 +379,7 @@ const childRowStyles = {
'border-left': (row: RowType) => row.data['BillboardReview'] > 70 ? '3.5px solid #dda15e' : null
};
```
+
@@ -388,6 +396,7 @@ igRegisterScript("WebGridChildRowStylesHandler", () => {
'border-left': (row: RowType) => row.data['BillboardReview'] > 70 ? '3.5px solid #dda15e' : null
};
}, true);
+
```
@@ -399,6 +408,7 @@ igRegisterScript("WebGridChildRowStylesHandler", () => {
```
+
@@ -549,6 +559,7 @@ constructor() {
unitPrice.cellClasses = this.unitPriceCellClasses;
}
```
+
@@ -586,6 +597,7 @@ public beatsPerMinuteClasses = {
downFont: this.downFontCondition,
upFont: this.upFontCondition
};
+
```
@@ -604,6 +616,7 @@ const beatsPerMinuteClasses = {
upFont: upFontCondition
};
```
+
@@ -630,6 +643,7 @@ igRegisterScript("CellClassesHandler", () => {
color: red;
}
}
+
```
@@ -684,6 +698,7 @@ igRegisterScript("GrammyNominationsCellClassesHandler", () => {
color: red !important;
}
```
+
@@ -702,6 +717,7 @@ public unitPriceCellClasses = {
downPrice: this.downPriceCondition,
upPrice: this.upPriceCondition
};
+
```
@@ -714,6 +730,7 @@ igRegisterScript("UnitPriceCellClassesHandler", () => {
};
}, true);
```
+
@@ -730,6 +747,7 @@ const unitPriceCellClasses = {
downPrice: downPriceCondition,
upPrice: upPriceCondition
};
+
```
@@ -745,6 +763,7 @@ const unitPriceCellClasses = {
}
}
```
+
```css
@@ -805,6 +824,7 @@ public evenColStyles = {
color: (rowData, coljey, cellValue, rowIndex) => rowIndex % 2 === 0 ? 'gray' : 'white',
animation: '0.75s popin'
};
+
```
@@ -827,6 +847,7 @@ igRegisterScript("WebGridCellStylesHandler", () => {
};
}, true);
```
+
@@ -930,6 +951,7 @@ Define a `popin` animation
}
}
```
+
@@ -951,6 +973,7 @@ constructor() {
col1.cellStyles = this.webGridCellStylesHandler;
}
```
+
@@ -986,6 +1009,7 @@ constructor() {
col1.cellStyles = this.webTreeGridCellStylesHandler;
}
```
+
@@ -1146,6 +1170,7 @@ Define a `popin` animation
}
}
```
+
@@ -1167,6 +1192,7 @@ constructor() {
col1.cellStyles = this.cellStylesHandler;
}
```
+
@@ -1234,6 +1260,7 @@ constructor() {
Col3.cellClasses = this.backgroundClasses;
}
```
+
@@ -1256,6 +1283,7 @@ const editDone = (event: IgrGridEditEventArgs) => {
+
```
diff --git a/docs/xplat/src/content/en/components/grids/_shared/editing.mdx b/docs/xplat/src/content/en/components/grids/_shared/editing.mdx
index 81ae491bba..566c12a6b2 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/editing.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/editing.mdx
@@ -144,6 +144,7 @@ public onSorting(event: IgcSortingEventArgs) {
grid.endEdit(true);
}
```
+
@@ -159,6 +160,7 @@ function SortingHandler() {
grid.endEdit(true);
}
igRegisterScript("SortingHandler", SortingHandler, false);
+
```
@@ -172,6 +174,7 @@ function onSorting(args: IgrSortingEventArgs) {
<{ComponentSelector} data={localData} primaryKey="ProductID" onSorting={onSorting}>
```
+
## API References
diff --git a/docs/xplat/src/content/en/components/grids/_shared/excel-style-filtering.mdx b/docs/xplat/src/content/en/components/grids/_shared/excel-style-filtering.mdx
index 60e4ed1be8..eccb757083 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/excel-style-filtering.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/excel-style-filtering.mdx
@@ -309,6 +309,7 @@ igRegisterScript("WebGridFilterAltIconTemplate", (ctx) => {
var html = window.igTemplating.html;
return html``
}, false);
+
```
@@ -323,6 +324,7 @@ public webGridFilterAltIconTemplate = (ctx: IgcCellTemplateContext) => {
return html``
}
```
+
@@ -343,6 +345,7 @@ const webGridFilterAltIconTemplate = (ctx: IgrGridHeaderTemplateContext) => {
<{ComponentSelector} autoGenerate={true} allowFiltering={true} filterMode="excelStyleFilter"
excelStyleHeaderIconTemplate={webGridFilterAltIconTemplate}>
+
```
@@ -373,6 +376,7 @@ const webGridFilterAltIconTemplate = (ctx: IgrGridHeaderTemplateContext) => {
```
+
@@ -657,12 +661,14 @@ In order to configure the Excel style filtering component, you should set its `C
+
```
```razor
add snippet for blazor
```
+
@@ -689,12 +695,14 @@ add snippet for blazor
+
```
```razor
Add snippet for blazor
```
+
@@ -710,12 +718,14 @@ Add snippet for blazor
+
```
```razor
Add snippet for blazor
```
+
diff --git a/docs/xplat/src/content/en/components/grids/_shared/export-excel.mdx b/docs/xplat/src/content/en/components/grids/_shared/export-excel.mdx
index 61e4072630..518d3bddb0 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/export-excel.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/export-excel.mdx
@@ -94,6 +94,7 @@ To initiate an export, you can use the handler of a button in your component's t
```
+
@@ -174,6 +175,7 @@ constructor() {
public webGridExportEventFreezeHeaders(args: any): void {
args.detail.options.freezeHeaders = true;
}
+
```
@@ -190,6 +192,7 @@ public webGridExportEventFreezeHeaders(args: CustomEvent): voi
args.detail.options.freezeHeaders = true;
}
```
+
@@ -225,6 +228,7 @@ function exportEventFreezeHeaders(args: IgrExporterEventArgs) {
igRegisterScript("WebGridExportEventFreezeHeaders", (ev) => {
ev.detail.options.freezeHeaders = false;
}, false);
+
```
@@ -246,6 +250,7 @@ igRegisterScript("WebHierarchicalGridExportEventFreezeHeaders", (ev) => {
ev.detail.options.freezeHeaders = false;
}, false);
```
+
diff --git a/docs/xplat/src/content/en/components/grids/_shared/filtering.mdx b/docs/xplat/src/content/en/components/grids/_shared/filtering.mdx
index 5b3bf45739..4d90b526bd 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/filtering.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/filtering.mdx
@@ -258,6 +258,7 @@ priceFilteringExpressionsTree.filteringOperands.push(priceExpression);
gridFilteringExpressionsTree.filteringOperands.push(priceFilteringExpressionsTree);
this.@@igObjectRef.filteringExpressionsTree = gridFilteringExpressionsTree;
+
```
@@ -306,6 +307,7 @@ this.@@igObjectRef.clearFilter('ProductName');
// Clears the filtering state from all columns
this.@@igObjectRef.clearFilter();
+
```
@@ -317,6 +319,7 @@ this.grid.clearFilter('ProductName');
// Clears the filtering state from all columns
this.grid.clearFilter();
```
+
@@ -344,6 +347,7 @@ public ngAfterViewInit() {
this.@@igObjectRef.filteringExpressionsTree = gridFilteringExpressionsTree;
this.cdr.detectChanges();
}
+
```
@@ -370,6 +374,7 @@ constructor() {
this.grid.filteringExpressionsTree = gridFilteringExpressionsTree;
}
```
+
@@ -409,6 +414,7 @@ constructor() {
public IgbFilteringExpressionsTree filteringExpressions;
}
+
```
@@ -441,6 +447,7 @@ return (
);
```
+
### Filtering logic
@@ -458,6 +465,7 @@ The p
import { FilteringLogic } from 'igniteui-angular';
this.@@igObjectRef.filteringLogic = FilteringLogic.OR;
+
```
@@ -467,6 +475,7 @@ import { FilteringLogic } from "igniteui-webcomponents-grids/grids";
this.grid.filteringLogic = FilteringLogic.OR;
```
+
@@ -474,6 +483,7 @@ this.grid.filteringLogic = FilteringLogic.OR;
import { FilteringLogic } from "igniteui-react-grids";
<{ComponentName} filteringLogic={FilteringLogic.Or}>
+
```
@@ -634,10 +644,11 @@ export class BooleanFilteringOperand extends IgcBooleanFilteringOperand {
-
+
+
```
@@ -658,6 +669,7 @@ constructor() {
discontinued.filters = this.booleanFilteringOperand;
}
```
+
@@ -671,10 +683,11 @@ constructor() {
-
+
+
```
@@ -687,6 +700,7 @@ constructor() {
```
+
```ts
diff --git a/docs/xplat/src/content/en/components/grids/_shared/keyboard-navigation.mdx b/docs/xplat/src/content/en/components/grids/_shared/keyboard-navigation.mdx
index 4fa0329fbe..e514668f85 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/keyboard-navigation.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/keyboard-navigation.mdx
@@ -111,7 +111,7 @@ When the body is
collapses the current node.
-- ALT + → or ALT + ↓ -
+- ALT + → or ALT + ↓ -
over Group Row - expands the group.
expands the row island.
@@ -206,6 +206,7 @@ igRegisterScript("WebGridCustomKBNav", (evtArgs) => {
// 2. CUSTOM NAVIGATION ON ENTER KEY PRESS
}
}, false);
+
```
@@ -214,6 +215,7 @@ igRegisterScript("WebGridCustomKBNav", (evtArgs) => {
<{ComponentSelector} id="grid1" primaryKey="ProductID" onGridKeydown={customKeydown}>
```
+
```ts
@@ -241,6 +243,7 @@ const customKeydown = (eventArgs: IgrGridKeydownEventArgs) => {
// 2. CUSTOM NAVIGATION ON ENTER KEY PRESS
}
}
+
```
@@ -294,6 +297,7 @@ Based on the event arg values we identified two cases, where to provide our own
return;
}
```
+
diff --git a/docs/xplat/src/content/en/components/grids/_shared/live-data.mdx b/docs/xplat/src/content/en/components/grids/_shared/live-data.mdx
index c7d1986242..e96f8fcd0a 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/live-data.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/live-data.mdx
@@ -69,6 +69,7 @@ public void OnStart()
grid1.Data = this.FinancialDataClass.UpdateRandomPrices(this.CurrentStocks);
}, null, startTimeSpan, periodTimeSpan);
}
+
```
@@ -84,6 +85,7 @@ public startUpdate() {
(document.getElementById('chartButton') as IgcButtonComponent).disabled = true;
}
```
+
@@ -97,6 +99,7 @@ const startUpdate = () => {
setIsStopButtonDisabled(false);
setIsChartButtonDisabled(true);
}
+
```
A change in the data field value or a change in the data object/data collection reference will trigger the corresponding pipes. However, this is not the case for columns, which are bound to [complex data objects](../data-grid.md#complex-data-binding). To resolve the situation, provide a new object reference for the data object containing the property. Example:
@@ -106,6 +109,7 @@ A change in the data field value or a change in the data object/data collection
```
+
A change in the data field value or a change in the data object/data collection reference will trigger the corresponding pipes. However, this is not the case for columns, which are bound to [complex data objects](../data-grid.md#complex-data-binding). To resolve the situation, provide a new object reference for the data object containing the property. Example:
diff --git a/docs/xplat/src/content/en/components/grids/_shared/multi-column-headers.mdx b/docs/xplat/src/content/en/components/grids/_shared/multi-column-headers.mdx
index e03704436e..96fb79a40f 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/multi-column-headers.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/multi-column-headers.mdx
@@ -599,6 +599,7 @@ If you want to re-use a single template for several column groups, you could set
```
+
@@ -632,6 +633,7 @@ If you want to re-use a single template for several column groups, you could set
};
}
```
+
@@ -678,6 +680,7 @@ public columnGroupHeaderTemplate = (ctx: IgcColumnTemplateContext) => {
`;
}
```
+
@@ -724,6 +727,7 @@ If a header is re-templated and the corresponding column group is movable, you h
return @;
};
}
+
```
@@ -735,6 +739,7 @@ public columnHeaderTemplate = (ctx: IgcColumnTemplateContext) => {
`;
}
```
+
diff --git a/docs/xplat/src/content/en/components/grids/_shared/paging.mdx b/docs/xplat/src/content/en/components/grids/_shared/paging.mdx
index 40a21302f2..84c4262fe0 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/paging.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/paging.mdx
@@ -143,6 +143,7 @@ constructor() {
paginator.selectOptions = selectOptions;
}
```
+
@@ -153,6 +154,7 @@ const selectOptions = [5, 15, 20, 50];
+
```
@@ -176,6 +178,7 @@ const selectOptions = [5, 15, 20, 50];
```
+
diff --git a/docs/xplat/src/content/en/components/grids/_shared/remote-data-operations.mdx b/docs/xplat/src/content/en/components/grids/_shared/remote-data-operations.mdx
index 4257cd7cba..be98c10cee 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/remote-data-operations.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/remote-data-operations.mdx
@@ -87,7 +87,7 @@ The first
### Remote Virtualization Demo
-{/* NOTE: this sample is differed */}
+{/*NOTE: this sample is differed*/}
@@ -146,6 +146,7 @@ public ngAfterViewInit() {
}
}
+
```
@@ -176,6 +177,7 @@ public handlePreLoad() {
}
}
```
+
@@ -254,6 +256,7 @@ public handlePreLoad() {
}
}
}
+
```
@@ -556,6 +559,7 @@ export class RemotePagingService {
);
}
}
+
```
@@ -591,6 +595,7 @@ export class RemotePagingService {
}
}
```
+
@@ -608,6 +613,7 @@ As Blazor Server is already a remote instance, unlike the demos in the other pla
return Task.FromResult(items.Count);
}
```
+
@@ -640,6 +646,7 @@ export class RemoteService {
return `${qS}`;
}
}
+
```
@@ -722,6 +729,7 @@ export class RemotePagingService {
return `${qS}`;
}
}
+
```
@@ -779,6 +787,7 @@ export class RemoteService {
return `${qS}`;
}
}
+
```
@@ -812,6 +821,7 @@ export class RemotePagingGridSample implements OnInit, AfterViewInit, OnDestroy
}
}
```
+
@@ -1042,6 +1052,7 @@ export class HGridRemotePagingSampleComponent implements OnInit, AfterViewInit,
}
}
}
+
```
@@ -1249,6 +1260,7 @@ For further reference please check the full demo bellow:
+
```
then set up the state:
@@ -1290,6 +1302,7 @@ next set up the method for loading the data:
})
}
```
+
@@ -1326,6 +1339,7 @@ and finally set up the behaviour for the RowIslands:
const onOrdersGridCreatedHandler = (e: IgrGridCreatedEventArgs) => {
gridCreated(e, "Orders")
};
+
```
@@ -1476,7 +1490,7 @@ BLAZOR CODE SNIPPET HERE
@ViewChild('grid1', { static: true }) public grid1: IgxGridComponent;
private _perPage = 15;
-private _dataLengthSubscriber: { unsubscribe: () => void; } | undefined;
+private_dataLengthSubscriber: { unsubscribe: () => void; } | undefined;
constructor(private remoteService: RemotePagingService) { }
@@ -1499,12 +1513,14 @@ public perPageChange(perPage: number) {
this.remoteService.getData(skip, top);
}
+
```
```razor
BLAZOR CODE SNIPPET HERE
```
+
@@ -1532,12 +1548,14 @@ public ngAfterViewInit() {
}
);
}
+
```
```razor
BLAZOR CODE SNIPPET HERE
```
+
@@ -1550,12 +1568,14 @@ public paginate(page: number) {
this.remoteService.getData(skip, top);
}
+
```
```razor
BLAZOR CODE SNIPPET HERE
```
+
diff --git a/docs/xplat/src/content/en/components/grids/_shared/row-actions.mdx b/docs/xplat/src/content/en/components/grids/_shared/row-actions.mdx
index 888afe2e22..5676cfe1d5 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/row-actions.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/row-actions.mdx
@@ -32,6 +32,7 @@ import { IgxActionStripModule } from 'igniteui-angular';
imports: [..., IgxActionStripModule],
})
```
+
The predefined actions UI components are:
@@ -53,6 +54,7 @@ They are added inside the
+
```
@@ -70,6 +72,7 @@ They are added inside the
```
+
diff --git a/docs/xplat/src/content/en/components/grids/_shared/row-adding.mdx b/docs/xplat/src/content/en/components/grids/_shared/row-adding.mdx
index 2d14ab59f6..5acb38c215 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/row-adding.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/row-adding.mdx
@@ -46,6 +46,7 @@ import { {ComponentModule} } from 'igniteui-angular';
})
export class AppModule {}
```
+
Then define a with bound data source, set to true and an component with editing actions enabled. The input controls the visibility of the button that spawns the row adding UI.
@@ -65,6 +66,7 @@ Then define a wi
+
```
@@ -83,6 +85,7 @@ Then define a wi
```
+
@@ -99,6 +102,7 @@ Then define a wi
+
```
@@ -117,6 +121,7 @@ Then define a wi
```
+
@@ -172,6 +177,7 @@ Then define a wi
+
```
@@ -188,6 +194,7 @@ Then define a wi
```
+
@@ -229,6 +236,7 @@ Then define a wi
+
```
@@ -271,6 +279,7 @@ Then define a wi
```
+
@@ -311,6 +320,7 @@ Then define a wi
+
```
@@ -372,6 +382,7 @@ Then define a wi
```
+
@@ -586,6 +597,7 @@ gridRef.current.rowAddTextTemplate = (ctx: IgrGridEmptyTemplateContext) => {
return @Adding Row;
};
}
+
```
diff --git a/docs/xplat/src/content/en/components/grids/_shared/row-drag.mdx b/docs/xplat/src/content/en/components/grids/_shared/row-drag.mdx
index 2ce2657084..55bd17b7d7 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/row-drag.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/row-drag.mdx
@@ -84,6 +84,7 @@ import { ..., IgxDragDropModule } from 'igniteui-angular';
imports: [..., IgxDragDropModule]
})
```
+
@@ -99,6 +100,7 @@ ModuleManager.register(
IgcDragDropModule
);
```
+
@@ -162,6 +164,7 @@ public dragHereTemplate = (ctx: IgcGridEmptyTemplateContext) => {
return html`Drop a row to add it to the grid`;
}
```
+
@@ -211,12 +214,14 @@ export class {ComponentName}RowDragComponent {
The **changeGhostIcon** **private** method just changes the icon inside of the drag ghost. The logic in the method finds the element that contains the icon (using the **igx-grid__drag-indicator** class that is applied to the drag-indicator container), changing the element's inner text to the passed one.
The icons themselves are from the [**material** font set](https://material.io/tools/icons/) and are defined in a separate **enum**:
+
```typescript
enum DragIcon {
DEFAULT = 'drag_indicator',
ALLOW = 'remove'
}
```
+
```typescript
@@ -229,6 +234,7 @@ enum DragIcon {
Next, we have to define what should happen when the user actually drops the row inside of the drop-area.
+
```typescript
export class {ComponentName}RowDragComponent {
@@ -254,6 +260,7 @@ export class {ComponentName}RowDragComponent {
this.sourceGrid.deleteRow(args.dragData.key);
}
}
+
```
We define a reference to each of our grids via the **ViewChild** decorator and the handle the drop as follows:
@@ -278,6 +285,7 @@ export class {ComponentName}RowDragComponent {
}
}
```
+
@@ -300,6 +308,7 @@ The drag ghost can be templated using the `RowDragGhost` directive, applied to a
```
+
@@ -316,6 +325,7 @@ constructor() {
public rowDragGhostTemplate = (ctx: IgcGridRowDragGhostContext) => {
return html`arrow_right_alt`;
}
+
```
@@ -342,6 +352,7 @@ The drag ghost can be templated on every grid level, making it possible to have
```
+
@@ -366,6 +377,7 @@ The drag handle icon can be templated using the grid's `DragIndicatorIconTemplat
+
```
@@ -380,6 +392,7 @@ private RenderFragment dragIndicatorIconTemplate =
;
};
```
+
@@ -416,6 +429,7 @@ public dragIndicatorIconTemplate = (ctx: IgcGridEmptyTemplateContext) => {
+
```
@@ -430,6 +444,7 @@ private RenderFragment dragIndicatorIconTemplate =
;
};
```
+
@@ -459,6 +474,7 @@ const dragIndicatorIconTemplate = (ctx: IgrGridEmptyTemplateContext) => {
<{ComponentSelector} rowDraggable={true} dragIndicatorIconTemplate={dragIndicatorIconTemplate}>
+
```
@@ -474,6 +490,7 @@ private RenderFragment dragIndicatorIconTemplate =
;
};
```
+
@@ -485,6 +502,7 @@ enum DragIcon {
DEFAULT = "drag_handle",
}
```
+
@@ -564,6 +582,7 @@ Since all of the actions will be happening _inside_ of the grid's body, that's w
```
+
@@ -582,6 +601,7 @@ constructor() {
hGrid.addEventListener("rowDragEnd", this.webHierarchicalGridReorderRowHandler)
}
```
+
@@ -599,7 +619,7 @@ constructor() {
igRegisterScript("WebHierarchicalGridReorderRowHandler", (args) => {
const ghostElement = args.detail.dragDirective.ghostElement;
const dragElementPos = ghostElement.getBoundingClientRect();
- const grid = document.getElementsByTagName("igc-hierarchical-grid")[0];
+ const grid = document.getElementsByTagName["igc-hierarchical-grid"](0);
const rows = Array.prototype.slice.call(document.getElementsByTagName("igx-hierarchical-grid-row"));
const currRowIndex = this.getCurrentRowIndex(rows,
{ x: dragElementPos.x, y: dragElementPos.y });
@@ -620,6 +640,7 @@ function getCurrentRowIndex(rowList, cursorPosition) {
}
return -1;
}
+
```
@@ -639,6 +660,7 @@ constructor() {
tGrid.addEventListener("rowDragEnd", this.webTreeGridReorderRowHandler);
}
```
+
@@ -669,6 +691,7 @@ constructor() {
grid.addEventListener("rowDragEnd", this.webGridReorderRowHandler)
}
```
+
@@ -687,7 +710,7 @@ constructor() {
igRegisterScript("WebGridReorderRowHandler", (args) => {
const ghostElement = args.detail.dragDirective.ghostElement;
const dragElementPos = ghostElement.getBoundingClientRect();
- const grid = document.getElementsByTagName("igc-grid")[0];
+ const grid = document.getElementsByTagName["igc-grid"](0);
const rows = Array.prototype.slice.call(document.getElementsByTagName("igx-grid-row"));
const currRowIndex = this.getCurrentRowIndex(rows,
{ x: dragElementPos.x, y: dragElementPos.y });
@@ -708,6 +731,7 @@ function getCurrentRowIndex(rowList, cursorPosition) {
}
return -1;
}
+
```
@@ -727,6 +751,7 @@ function getCurrentRowIndex(rowList, cursorPosition) {
[rowDraggable]="true" (rowDragStart)="rowDragStart($event)" igxDrop (dropped)="rowDrop($event)">
```
+
@@ -759,7 +784,7 @@ Below, you can see this implemented:
public webGridReorderRowHandler(args: CustomEvent): void {
const ghostElement = args.detail.dragDirective.ghostElement;
const dragElementPos = ghostElement.getBoundingClientRect();
- const grid = document.getElementsByTagName("igc-grid")[0] as any;
+ const grid = document.getElementsByTagName["igc-grid"](0) as any;
const rows = Array.prototype.slice.call(document.getElementsByTagName("igx-grid-row"));
const currRowIndex = this.getCurrentRowIndex(rows,
{ x: dragElementPos.x, y: dragElementPos.y });
@@ -780,6 +805,7 @@ public getCurrentRowIndex(rowList: any[], cursorPosition) {
}
return -1;
}
+
```
@@ -809,6 +835,7 @@ const getCurrentRowIndex = (rowList: any[], cursorPosition) => {
return -1;
}
```
+
@@ -879,6 +906,7 @@ export class TreeGridRowReorderComponent {
return null;
}
}
+
```
@@ -996,6 +1024,7 @@ public webTreeGridReorderRowStartHandler(args: CustomEvent
@@ -1113,6 +1142,7 @@ export class HGridRowReorderComponent {
}
}
}
+
```
@@ -1144,6 +1174,7 @@ const getCurrentRowIndex = (rowList: any[], cursorPosition: any) => {
return -1;
}
```
+
@@ -1151,7 +1182,7 @@ const getCurrentRowIndex = (rowList: any[], cursorPosition: any) => {
public webGridReorderRowHandler(args: CustomEvent): void {
const ghostElement = args.detail.dragDirective.ghostElement;
const dragElementPos = ghostElement.getBoundingClientRect();
- const grid = document.getElementsByTagName("igc-hierarchical-grid")[0] as any;
+ const grid = document.getElementsByTagName["igc-hierarchical-grid"](0) as any;
const rows = Array.prototype.slice.call(document.getElementsByTagName("igx-grid-row"));
const currRowIndex = this.getCurrentRowIndex(rows,
{ x: dragElementPos.x, y: dragElementPos.y });
@@ -1183,7 +1214,7 @@ public getCurrentRowIndex(rowList: any[], cursorPosition) {
igRegisterScript("WebGridReorderRowHandler", (args) => {
const ghostElement = args.detail.dragDirective.ghostElement;
const dragElementPos = ghostElement.getBoundingClientRect();
- const grid = document.getElementsByTagName("igc-hierarchical-grid")[0];
+ const grid = document.getElementsByTagName["igc-hierarchical-grid"](0);
const rows = Array.prototype.slice.call(document.getElementsByTagName("igx-hierarchical-grid-row"));
const currRowIndex = this.getCurrentRowIndex(rows,
{ x: dragElementPos.x, y: dragElementPos.y });
@@ -1204,6 +1235,7 @@ function getCurrentRowIndex(rowList, cursorPosition) {
}
return -1;
}
+
```
diff --git a/docs/xplat/src/content/en/components/grids/_shared/row-editing.mdx b/docs/xplat/src/content/en/components/grids/_shared/row-editing.mdx
index 8452f91f32..f63e783cff 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/row-editing.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/row-editing.mdx
@@ -93,6 +93,7 @@ public unitsInStockCellTemplate = (ctx: IgcCellTemplateContext) => {
return html``;
}
```
+
@@ -113,6 +114,7 @@ const unitsInStockCellTemplate = (ctx: IgrCellTemplateContext) => {
+
```
@@ -146,6 +148,7 @@ const unitsInStockCellTemplate = (ctx: IgrCellTemplateContext) => {
}
}
```
+
@@ -177,6 +180,7 @@ constructor() {
grid.data = this.data;
}
```
+
@@ -257,6 +261,7 @@ constructor() {
grid.data = this.data;
}
```
+
@@ -412,6 +417,7 @@ RowEditable="true">
```
+
@@ -443,6 +449,7 @@ export class {ComponentName}RowEditSampleComponent {
this.data = data;
}
}
+
```
@@ -513,6 +520,7 @@ The `RowChangesCount` property is exposed and it holds the count of the changed
Changes: {{rowChangesCount}}
```
+
diff --git a/docs/xplat/src/content/en/components/grids/_shared/row-pinning.mdx b/docs/xplat/src/content/en/components/grids/_shared/row-pinning.mdx
index 6d617e57b3..9de4def578 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/row-pinning.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/row-pinning.mdx
@@ -169,6 +169,7 @@ public rowPinning(event) {
event.detail.insertAtIndex = 0;
}
```
+
@@ -180,6 +181,7 @@ const rowPinning = (event: IgrPinRowEventArgs) => {
<{ComponentSelector} autoGenerate={true} onRowPinning={rowPinning}>
+
```
@@ -195,6 +197,7 @@ const rowPinning = (event: IgrPinRowEventArgs) => {
Data="northwindEmployees">
```
+
@@ -206,6 +209,7 @@ function rowPinningHandler(event) {
}
igRegisterScript("rowPinningHandler", rowPinningHandler, false);
+
```
@@ -222,6 +226,7 @@ When set to Bottom pinned rows are rendered at the bottom of the grid, after the
```typescript
public pinningConfig: IPinningConfig = { rows: RowPinningPosition.Bottom };
```
+
@@ -233,6 +238,7 @@ public pinningConfig: IPinningConfig = { rows: RowPinningPosition.Bottom };
var grid = document.getElementById('dataGrid') as {ComponentName}Component;
grid.pinning = { rows: RowPinningPosition.Bottom };
```
+
@@ -267,6 +273,7 @@ const pinning: IgrPinningConfig = { rows : RowPinningPosition.Bottom };
<{ComponentSelector} ref={gridRef} autoGenerate={true} pinning={pinning}>
+
```
@@ -299,6 +306,7 @@ igRegisterScript("WebGridRowPinCellTemplate", (ctx) => {
`;
}, false);
```
+
@@ -351,6 +359,7 @@ public pinCellTemplate = (ctx: IgcCellTemplateContext) => {
return html` this.togglePinning(index)}>📌`;
}
```
+
@@ -368,6 +377,7 @@ const cellPinCellTemplate = (ctx: IgrCellTemplateContext) => {
+
```
@@ -391,6 +401,7 @@ igRegisterScript("WebHierarchicalGridRowPinCellTemplate", (ctx) => {
`;
}, false);
```
+
@@ -447,6 +458,7 @@ public pinCellTemplate = (ctx: IgcCellTemplateContext) => {
return html` this.togglePinning(row)}>📌`;
}
```
+
@@ -465,6 +477,7 @@ const cellPinCellTemplate = (ctx: IgrCellTemplateContext) => {
+
```
@@ -479,6 +492,7 @@ public togglePinning(index: number) {
grid.getRowByIndex(index).pinned = !grid.getRowByIndex(index).pinned;
}
```
+
diff --git a/docs/xplat/src/content/en/components/grids/_shared/row-selection.mdx b/docs/xplat/src/content/en/components/grids/_shared/row-selection.mdx
index b4927e9c33..4e32ac9d80 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/row-selection.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/row-selection.mdx
@@ -91,6 +91,7 @@ public handleRowSelection(args: IgcRowSelectionEventArgs) {
}
}
```
+
@@ -103,6 +104,7 @@ const handleRowSelection = (args: IgrRowSelectionEventArgs) => {
<{ComponentSelector} rowSelection="single" autoGenerate={true} allowFiltering={true} onRowSelectionChanging={handleRowSelection}>
+
```
@@ -125,6 +127,7 @@ const handleRowSelection = (args: IgrRowSelectionEventArgs) => {
}
}
```
+
### Multiple Selection
@@ -246,6 +249,7 @@ The code snippet below can be used to select one or multiple rows simultaneously
+
```
@@ -270,6 +274,7 @@ The code snippet below can be used to select one or multiple rows simultaneously
}
}
```
+
@@ -281,6 +286,7 @@ auto-generate="true">
+
```
```ts
@@ -292,6 +298,7 @@ public onClickSelect() {
grid.selectRows([1,2,5], true);
}
```
+
@@ -303,6 +310,7 @@ function onClickSelect() {
<{ComponentSelector} primaryKey="ProductID" rowSelection="multiple" autoGenerate={true} ref={gridRef}>
+
```
@@ -322,6 +330,7 @@ If you need to deselect rows programmatically, you can use the `DeselectRows` me
```
+
@@ -356,6 +365,7 @@ auto-generate="true">
+
```
```ts
@@ -367,6 +377,7 @@ public onClickDeselect() {
grid.deselectRows([1,2,5]);
}
```
+
@@ -378,6 +389,7 @@ function onClickDeselect() {
<{ComponentSelector} primaryKey="ProductID" rowSelection="multiple" autoGenerate={true} ref={gridRef}>
+
```
@@ -401,6 +413,7 @@ When there is some change in the row selection
```
+
@@ -420,6 +433,7 @@ public handleRowSelectionChange(args) {
args.detail.cancel = true; // this will cancel the row selection
}
```
+
@@ -430,6 +444,7 @@ const handleRowSelectionChange = (args: IgrRowSelectionEventArgs) => {
<{ComponentSelector} onRowSelectionChanging={handleRowSelectionChange}>
+
```
@@ -452,6 +467,7 @@ const handleRowSelectionChange = (args: IgrRowSelectionEventArgs) => {
}
}
```
+
### Select All Rows
@@ -540,6 +556,7 @@ const mySelectedRows = [1,2,3];
<{ComponentSelector} primaryKey="ProductID" rowSelection="multiple" autoGenerate={false} selectedRows={mySelectedRows}>
+
```
@@ -560,6 +577,7 @@ const mySelectedRows = [1,2,3];
public object[] selectedRows = new object[] { 1, 2, 5 };
}
```
+
### Row Selector Templates
@@ -650,6 +668,7 @@ const rowSelectorTemplate = (ctx: IgrRowSelectorTemplateContext) => {
<{ComponentSelector} primaryKey="ProductID" rowSelection="multiple" autoGenerate="false" rowSelectorTemplate={rowSelectorTemplate}>
+
```
@@ -661,6 +680,7 @@ The `RowID` property can be used to get a reference of an `{ComponentSelector}`
```
+
@@ -787,6 +807,7 @@ public headSelectorTemplate = (ctx: IgcHeadSelectorTemplateContext) => {
}
return html``;
}
+
```
@@ -818,6 +839,7 @@ const headSelectorTemplate = (ctx: IgrHeadSelectorTemplateContext) => {
<{ComponentSelector} primaryKey="ProductID" rowSelection="multiple" autoGenerate={true} headSelectorTemplate={headSelectorTemplate}>
```
+
diff --git a/docs/xplat/src/content/en/components/grids/_shared/search.mdx b/docs/xplat/src/content/en/components/grids/_shared/search.mdx
index 45201ae075..cf94c792a4 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/search.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/search.mdx
@@ -66,6 +66,7 @@ Let's start by creating our grid and binding it to our data. We will also add so
this.marketData = MarketData.GetData();
}
}
+
```
@@ -80,6 +81,7 @@ Let's start by creating our grid and binding it to our data. We will also add so
```
+
@@ -127,6 +129,7 @@ constructor() {
this.treeGrid.data = new EmployeesFlatData();
}
```
+
@@ -178,6 +181,7 @@ public exactMatch: boolean = false;
private caseSensitiveChip: IgcChipComponent;
private exactMatchChip: IgcChipComponent;
+
```
@@ -188,6 +192,7 @@ public string searchText = "";
public bool caseSensitive = false;
public bool exactMatch = false;
```
+
@@ -213,6 +218,7 @@ private prevIconButton: IgcIconButtonComponent;
private caseSensitiveChip: IgcChipComponent;
private exactMatchChip: IgcChipComponent;
+
```
@@ -224,6 +230,7 @@ public string searchText = "";
public bool caseSensitive = false;
public bool exactMatch = false;
```
+
@@ -271,6 +278,7 @@ The methods from above return a **number** value (the number of times the
+
```
@@ -278,6 +286,7 @@ The methods from above return a **number** value (the number of times the
```
+
@@ -297,6 +306,7 @@ public nextSearch(){
this.grid.findNext(this.searchBox.value, false, false);
}
```
+
@@ -330,6 +340,7 @@ public nextSearch() {
this.treeGrid.findNext(this.searchBox.value, this.caseSensitiveChip.selected, this.exactMatchChip.selected);
}
```
+
@@ -340,6 +351,7 @@ public void NextSearch()
{
this.treeGrid.FindNext(this.searchText, this.caseSensitive, this.exactMatch);
}
+
```
@@ -353,6 +365,7 @@ const handleOnSearchChange = (event: IgrComponentValueChangedEventArgs) => {
```
+
@@ -413,6 +426,7 @@ In order to freely search and navigate among our search results, let's create a
this.grid.FindNextAsync(this.searchText, this.caseSensitive, this.exactMatch);
}
}
+
```
@@ -437,6 +451,7 @@ public nextSearch() {
this.grid.findNext(this.searchBox.value, this.caseSensitiveChip.selected, this.exactMatchChip.selected);
}
```
+
@@ -463,6 +478,7 @@ public nextSearch() {
this.treeGrid.findNext(this.searchBox.value, this.caseSensitiveChip.selected, this.exactMatchChip.selected);
}
```
+
@@ -487,6 +503,7 @@ public nextSearch() {
this.treeGrid.FindNextAsync(this.searchText, this.caseSensitive, this.exactMatch);
}
}
+
```
@@ -506,6 +523,7 @@ const nextSearch = (text: string, caseSensitive: boolean, exactMatch: boolean) =
nextSearch(searchText, caseSensitiveSelected, exactMatchSelected)}>
```
+
@@ -530,6 +548,7 @@ public searchKeyDown(ev) {
}
}
```
+
@@ -558,6 +577,7 @@ public onSearchKeydown(evt: KeyboardEvent) {
}
}
```
+
@@ -597,6 +617,7 @@ We can also allow the users to navigate the results by using the keyboard's
@@ -628,6 +649,7 @@ public onSearchKeydown(evt: KeyboardEvent) {
}
}
```
+
@@ -673,6 +695,7 @@ const handleOnSearchChange = (event: IgrComponentValueChangedEventArgs) => {
this.treeGrid.FindNextAsync(this.searchText, this.caseSensitive, this.exactMatch);
}
}
+
```
@@ -704,6 +727,7 @@ public updateExactSearch() {
this.@@igObjectRef.findNext(this.searchText, this.caseSensitive, this.exactMatch);
}
```
+
@@ -734,6 +758,7 @@ public updateSearch() {
grid.findNext(search1.value, case.checked, exact.checked);
}
```
+
@@ -759,6 +784,7 @@ constructor() {
});
}
```
+
@@ -787,6 +813,7 @@ Now let's allow the user to choose whether the search should be case sensitive a
this.grid.FindNextAsync(this.searchText, this.caseSensitive, this.exactMatch);
}
}
+
```
@@ -814,6 +841,7 @@ const handleExactMatchChange = (event: IgrComponentBoolValueChangedEventArgs) =>
Exact Match
```
+
### Persistence
@@ -844,6 +872,7 @@ import {
imports: [IgxInputGroupModule, IgxIconModule, IgxRippleModule, IgxButtonModule, IgxChipsModule],
})
export class AppModule {}
+
```
@@ -853,6 +882,7 @@ import { defineComponents, IgcInputComponent, IgcChipComponent, IgcIconComponent
defineComponents(IgcInputComponent, IgcChipComponent, IgcIconComponent, IgcIconButtonComponent);
```
+
@@ -909,6 +939,7 @@ builder.Services.AddIgniteUIBlazor(
}
}
}
+
```
@@ -937,6 +968,7 @@ We will wrap all of our components inside an [InputGroup](../input-group.md). On
```
+
@@ -978,6 +1010,7 @@ constructor() {
registerIconFromText("clear", clearIconText, "material");
registerIconFromText("search", searchIconText, "material");
}
+
```
@@ -1004,6 +1037,7 @@ We will wrap all of our components inside an `Input`. On the left we will toggle
```
+
@@ -1033,6 +1067,7 @@ public clearSearch() {
this.icon.name = 'search';
this.treeGrid.clearSearch();
}
+
```
@@ -1077,6 +1112,7 @@ public clearSearch() {
}
}
```
+
@@ -1183,6 +1219,7 @@ constructor() {
this.treeGrid.findNext(this.searchBox.value, this.caseSensitiveChip.selected, evt.detail);
});
}
+
```
@@ -1211,6 +1248,7 @@ constructor() {
}
}
```
+
- For the search navigation buttons, we have added two ripple styled buttons with material icons. The handlers for the click events remain the same - invoking the `FindNext`/`FindPrev` methods.
@@ -1257,6 +1295,7 @@ public nextSearch() {
public prevSearch() {
this.grid.findPrev(this.searchBox.value, this.caseSensitiveChip.selected, this.exactMatchChip.selected);
}
+
```
@@ -1270,6 +1309,7 @@ public nextSearch() {
this.treeGrid.findNext(this.searchBox.value, this.caseSensitiveChip.selected, this.exactMatchChip.selected);
}
```
+
@@ -1344,6 +1384,7 @@ useEffect(() => {
```
+
@@ -1367,6 +1408,7 @@ useEffect(() => {
this.grid.FindNextAsync(this.searchText, this.caseSensitive, this.exactMatch);
}
}
+
```
diff --git a/docs/xplat/src/content/en/components/grids/_shared/selection.mdx b/docs/xplat/src/content/en/components/grids/_shared/selection.mdx
index fa8ea52633..42de0bfc44 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/selection.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/selection.mdx
@@ -205,6 +205,7 @@ const rightClick = (event: IgrGridContextMenuEventArgs) => {
this.ShowMenu = true;
this.ClickedCell = detail.Cell;
}
+
```
@@ -276,6 +277,7 @@ public copySelectedCells(event) {
document.execCommand('copy');
document.body.removeChild(tempElement);
}
+
```
@@ -315,6 +317,7 @@ const copyData = (data: any[]) => {
setSelectedData(dataStringified);
};
```
+
@@ -342,6 +345,7 @@ const copyData = (data: any[]) => {
this.SelectedData = JsonConvert.SerializeObject(selectedData);
StateHasChanged();
}
+
```
diff --git a/docs/xplat/src/content/en/components/grids/_shared/size.mdx b/docs/xplat/src/content/en/components/grids/_shared/size.mdx
index e6893131a1..5d5e793b62 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/size.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/size.mdx
@@ -179,6 +179,7 @@ public ngOnInit() {
}
];
}
+
```
@@ -204,6 +205,7 @@ public ngOnInit() {
```
+
@@ -831,6 +833,7 @@ public selectSize(event: any) {
protected get sizeStyle() {
return `var(--ig-size-${this.size})`;
}
+
```
@@ -864,6 +867,7 @@ public webGridSetGridSize(sender: any, args: IgcPropertyEditorPropertyDescriptio
grid.style.setProperty('--ig-size', `var(--ig-size-${newVal})`);
}
```
+
@@ -917,6 +921,7 @@ public webGridSetGridSize(sender: any, args: IgrPropertyEditorPropertyDescriptio
var grid = document.getElementById("grid");
grid.style.setProperty('--ig-size', `var(--ig-size-${newVal})`);
}
+
```
@@ -934,6 +939,7 @@ We can now extend our sample and add
```
+
@@ -952,6 +958,7 @@ We can now extend our sample and add
@@ -960,6 +967,7 @@ We can now extend our sample and add
```
+
diff --git a/docs/xplat/src/content/en/components/grids/_shared/sorting.mdx b/docs/xplat/src/content/en/components/grids/_shared/sorting.mdx
index da9b532ed2..3c95fa6db3 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/sorting.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/sorting.mdx
@@ -106,6 +106,7 @@ this.grid.sort([
{ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true },
{ fieldName: 'Price', dir: SortingDirection.Desc }
]);
+
```
@@ -121,6 +122,7 @@ this.grid.sort([
{ fieldName: 'Price', dir: SortingDirection.Desc }
]);
```
+
@@ -153,6 +155,7 @@ gridRef.current.sort([
{ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true },
{ fieldName: 'Price', dir: SortingDirection.Desc }
]);
+
```
@@ -170,6 +173,7 @@ this.treeGrid.sort([
{ fieldName: 'Price', dir: SortingDirection.Desc }
]);
```
+
@@ -183,6 +187,7 @@ this.treeGrid.sort([
{ fieldName: 'Category', dir: SortingDirection.Asc, ignoreCase: true },
{ fieldName: 'Price', dir: SortingDirection.Desc }
]);
+
```
@@ -204,6 +209,7 @@ this.treeGrid.sort([
});
}
```
+
@@ -216,6 +222,7 @@ treeGridRef.current.sort([
{ fieldName: 'Category', dir: SortingDirection.Asc, ignoreCase: true },
{ fieldName: 'Price', dir: SortingDirection.Desc }
]);
+
```
@@ -233,6 +240,7 @@ this.hierarchicalGrid.sort([
{ fieldName: 'Price', dir: SortingDirection.Desc }
]);
```
+
@@ -246,6 +254,7 @@ this.hierarchicalGrid.sort([
{ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true },
{ fieldName: 'Price', dir: SortingDirection.Desc }
]);
+
```
@@ -267,6 +276,7 @@ this.hierarchicalGrid.sort([
});
}
```
+
@@ -280,6 +290,7 @@ hierarchicalGridRef.current.sort([
{ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true },
{ fieldName: 'Price', dir: SortingDirection.Desc }
]);
+
```
@@ -299,6 +310,7 @@ this.grid.clearSort('ProductName');
// Removes the sorting state from every column in the {ComponentTitle}
this.grid.clearSort();
```
+
@@ -308,6 +320,7 @@ gridRef.current.clearSort('ProductName');
// Removes the sorting state from every column in the {ComponentTitle}
gridRef.current.clearSort();
+
```
@@ -321,6 +334,7 @@ gridRef.current.clearSort();
this.grid.ClearSortAsync("");
}
```
+
@@ -332,6 +346,7 @@ this.treeGrid.clearSort('Category');
// Removes the sorting state from every column in the {ComponentTitle}
this.treeGrid.clearSort();
+
```
@@ -343,6 +358,7 @@ treeGridRef.current.clearSort('Category');
// Removes the sorting state from every column in the {ComponentTitle}
treeGridRef.current.clearSort();
```
+
@@ -354,6 +370,7 @@ treeGridRef.current.clearSort();
@*Removes the sorting state from every column in the Grid*@
this.treeGrid.ClearSortAsync("");
}
+
```
@@ -367,6 +384,7 @@ this.hierarchicalGrid.clearSort('ProductName');
// Removes the sorting state from every column in the {ComponentTitle}
this.hierarchicalGrid.clearSort();
```
+
@@ -376,6 +394,7 @@ hierarchicalGridRef.current.clearSort('ProductName');
// Removes the sorting state from every column in the {ComponentTitle}
hierarchicalGridRef.current.clearSort();
+
```
@@ -389,6 +408,7 @@ hierarchicalGridRef.current.clearSort();
this.hierarchicalGrid.ClearSortAsync("");
}
```
+
@@ -457,6 +477,7 @@ const sortingExpressions: IgrSortingExpression[] = [
data={productSales}
sortingExpressions={sortingExpressions}>
+
```
@@ -471,6 +492,7 @@ public ngOnInit() {
];
}
```
+
@@ -514,6 +536,7 @@ const sortingExpressions: IgrSortingExpression[] = [
data={productSales}
sortingExpressions={sortingExpressions}>
+
```
@@ -528,6 +551,7 @@ public ngOnInit() {
];
}
```
+
@@ -601,6 +625,7 @@ The sorting indicator icon in the column header can be customized using a templa
unfold_more
```
+
- – re-templates the sorting icon when no sorting is applied.
@@ -616,6 +641,7 @@ The sorting indicator icon in the column header can be customized using a templa
return @;
};
}
+
```
@@ -632,6 +658,7 @@ public sortHeaderIconTemplate = (ctx: IgcGridHeaderTemplateContext) => {
return html``;
}
```
+
@@ -646,6 +673,7 @@ const sortHeaderIconTemplate = (ctx: IgrGridHeaderTemplateContext) => {
}
<{ComponentSelector} sortHeaderIconTemplate={sortHeaderIconTemplate}>
+
```
@@ -674,6 +702,7 @@ const sortHeaderIconTemplate = (ctx: IgrGridHeaderTemplateContext) => {
return @;
};
}
+
```
@@ -690,6 +719,7 @@ public sortAscendingHeaderIconTemplate = (ctx: IgcGridHeaderTemplateContext) =>
return html``;
}
```
+
@@ -704,6 +734,7 @@ const sortAscendingHeaderIconTemplate = (ctx: IgrGridHeaderTemplateContext) => {
}
<{ComponentSelector} sortAscendingHeaderIconTemplate={sortAscendingHeaderIconTemplate}>
+
```
@@ -732,6 +763,7 @@ const sortAscendingHeaderIconTemplate = (ctx: IgrGridHeaderTemplateContext) => {
return @;
};
}
+
```
@@ -748,6 +780,7 @@ public sortDescendingHeaderIconTemplate = (ctx: IgcGridHeaderTemplateContext) =>
return html``;
}
```
+
@@ -762,6 +795,7 @@ const sortDescendingHeaderIconTemplate = (ctx: IgrGridHeaderTemplateContext) =>
}
<{ComponentSelector} sortDescendingHeaderIconTemplate={sortDescendingHeaderIconTemplate}>
+
```
diff --git a/docs/xplat/src/content/en/components/grids/_shared/state-persistence.mdx b/docs/xplat/src/content/en/components/grids/_shared/state-persistence.mdx
index b06a370857..48a04981f5 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/state-persistence.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/state-persistence.mdx
@@ -137,6 +137,7 @@ const gridState: IGridState = state.getState(false);
// get the sorting and filtering expressions
const sortingFilteringStates: IGridState = state.getState(false, ['sorting', 'filtering']);
+
```
@@ -160,6 +161,7 @@ const stateString: string = gridState.getStateAsString();
// get the sorting and filtering expressions
const sortingFilteringStates: IgcGridStateInfo = gridState.getState(['sorting', 'filtering']);
```
+
@@ -184,6 +186,7 @@ const stateString: string = gridStateRef.current.getStateAsString([]);
// get the sorting and filtering expressions
const sortingFilteringStates: IgrGridStateInfo = gridStateRef.current.getState(['sorting', 'filtering']);
+
```
@@ -202,6 +205,7 @@ const sortingFilteringStates: IgrGridStateInfo = gridStateRef.current.getState([
string sortingFilteringStates = gridState.GetStateAsStringAsync(new string[] { "sorting", "filtering" });
}
```
+
@@ -271,6 +275,7 @@ public options = { cellSelection: false, sorting: false };
<{ComponentSelector} [igxGridState]="options">
```
+
@@ -323,6 +328,7 @@ public restoreGridState() {
const state = window.sessionStorage.getItem('grid1-state');
this.state.setState(state);
}
+
```
@@ -359,6 +365,7 @@ public restoreGridStateString() {
}
}
```
+
@@ -406,6 +413,7 @@ const restoreGridState = () => {
gridStateRef.current.applyStateFromString(state, []);
}
}
+
```
@@ -461,6 +469,7 @@ const restoreGridState = () => {
}
}
```
+
@@ -510,6 +519,7 @@ constructor() {
public activeTemplate = (ctx: IgcCellTemplateContext) => {
return html``;
}
+
```
@@ -520,6 +530,7 @@ public activeTemplate = (ctx: IgcCellTemplateContext) => {
```
+
@@ -545,6 +556,7 @@ function activeTemplate(ctx: { dataContext: IgrCellTemplateContext }) {
return @;
};
}
+
```
@@ -559,6 +571,7 @@ function activeTemplate(ctx: { dataContext: IgrCellTemplateContext }) {
```
+
@@ -589,6 +602,7 @@ constructor() {
public activeTemplate = (ctx: IgcCellTemplateContext) => {
return html``;
}
+
```
@@ -608,6 +622,7 @@ public activeTemplate = (ctx: IgcCellTemplateContext) => {
};
}
```
+
@@ -650,6 +665,7 @@ public activeTemplate = (ctx: IgcCellTemplateContext) => {
return html``;
}
```
+
@@ -663,6 +679,7 @@ public onColumnInit(column: IgxColumnComponent) {
}
}
```
+
@@ -866,9 +883,9 @@ const totalSale = (members, data) => {
const totalMin = (members, data) => {
let min = 0;
if (data.length === 1) {
- min = data[0].ProductUnitPrice * data[0].NumberOfUnits;
+ min = data[0].ProductUnitPrice *data[0].NumberOfUnits;
} else if (data.length > 1) {
- const mappedData = data.map(x => x.ProductUnitPrice * x.NumberOfUnits);
+ const mappedData = data.map(x => x.ProductUnitPrice* x.NumberOfUnits);
min = mappedData.reduce((a, b) => Math.min(a, b));
}
return min;
@@ -877,9 +894,9 @@ const totalMin = (members, data) => {
const totalMax = (members, data) => {
let max = 0;
if (data.length === 1) {
- max = data[0].ProductUnitPrice * data[0].NumberOfUnits;
+ max = data[0].ProductUnitPrice *data[0].NumberOfUnits;
} else if (data.length > 1) {
- const mappedData = data.map(x => x.ProductUnitPrice * x.NumberOfUnits);
+ const mappedData = data.map(x => x.ProductUnitPrice* x.NumberOfUnits);
max = mappedData.reduce((a, b) => Math.max(a, b));
}
return max;
@@ -904,6 +921,7 @@ igRegisterScript("OnValueInit", (args) => {
});
}
}, false);
+
```
@@ -929,6 +947,7 @@ public onDimensionInit(dim: IPivotDimension) {
}
}
```
+
@@ -1001,6 +1020,7 @@ gridState.options = { cellSelection: false, sorting: false, rowIslands: true };
RowIslands = true
};
}
+
```
@@ -1012,6 +1032,7 @@ Then the API will ret
```typescript
this.state.applyState(state, ['filtering', 'rowIslands']);
```
+
@@ -1027,6 +1048,7 @@ Then the API will ret
```razor
gridState.ApplyStateFromStringAsync(gridStateString, new string[] { "filtering", "rowIslands" });
```
+
@@ -1068,6 +1090,7 @@ public pivotConfigHierarchy: IPivotConfiguration = {
filters: [...]
};
```
+
@@ -1139,6 +1162,7 @@ public stateParsedHandler(ev: any) {
parsedState.pivotConfiguration.rowStrategy = IgcNoopPivotDimensionsStrategy.instance();
parsedState.pivotConfiguration.columnStrategy = IgcNoopPivotDimensionsStrategy.instance();
}
+
```
@@ -1147,6 +1171,7 @@ public stateParsedHandler(ev: any) {
```razor
Add snippet for blazor for restore state
```
+
@@ -1166,6 +1191,7 @@ state.applyState(gridState);
state.applyState(gridState.columns);
state.applyState(gridState.columnSelection);
```
+
diff --git a/docs/xplat/src/content/en/components/grids/_shared/summaries.mdx b/docs/xplat/src/content/en/components/grids/_shared/summaries.mdx
index dca69e3746..2ed6409a7c 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/summaries.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/summaries.mdx
@@ -265,6 +265,7 @@ constructor() {
disableBtn.addEventListener("click", this.disableSummary);
}
```
+
@@ -304,6 +305,7 @@ const disableSummary = () => {
+
```
@@ -321,6 +323,7 @@ const disableSummary = () => {
```
+
@@ -346,6 +349,7 @@ constructor() {
disableBtn.addEventListener("click", this.disableSummary);
}
```
+
@@ -379,6 +383,7 @@ public disableSummary() {
await this.hierarchicalGrid.DisableSummariesAsync(disabledSummaries);
}
}
+
```
@@ -404,6 +409,7 @@ const disableSummary = () => {
```
+
@@ -447,6 +453,7 @@ constructor() {
disableBtn.addEventListener("click", this.disableSummary);
}
```
+
@@ -478,6 +485,7 @@ public disableSummary() {
await this.treeGrid.DisableSummariesAsync(disabledSummaries);
}
}
+
```
@@ -501,6 +509,7 @@ const disableSummary = () => {
```
+
@@ -534,6 +543,7 @@ class MySummary extends IgxNumberSummaryOperand {
return result;
}
}
+
```
@@ -557,6 +567,7 @@ class MySummary extends IgcNumberSummaryOperand {
}
}
```
+
@@ -591,6 +602,7 @@ class WebGridDiscontinuedSummary {
return result;
}
}
+
```
@@ -632,6 +644,7 @@ class PtoSummary {
}
}
```
+
@@ -709,6 +722,7 @@ constructor() {
unitsInStock.summaries = this.mySummary;
}
```
+
@@ -737,6 +751,7 @@ igRegisterScript("WebGridCustomSummary", (event) => {
event.detail.summaries = WebGridDiscontinuedSummary;
}
}, false);
+
```
@@ -753,6 +768,7 @@ And now let's add our custom summary to the column `GrammyAwards`. We will achie
```
+
@@ -774,6 +790,7 @@ constructor() {
grammyAwards.summaries = this.mySummary;
}
```
+
@@ -801,6 +818,7 @@ igRegisterScript("WebHierarchicalGridCustomSummary", (event) => {
event.detail.summaries = WebHierarchicalGridSummary;
}
}, false);
+
```
@@ -817,6 +835,7 @@ And now let's add our custom summary to the column `Title`. We will achieve that
```
+
@@ -836,6 +855,7 @@ constructor() {
column1.summaries = this.mySummary;
}
```
+
```typescript
@@ -861,6 +881,7 @@ igRegisterScript("WebTreeGridCustomSummary", (event) => {
event.detail.summaries = PtoSummary;
}
}, false);
+
```
@@ -886,6 +907,7 @@ class MySummary extends IgxNumberSummaryOperand {
}
}
```
+
@@ -1022,10 +1044,11 @@ constructor() {
public summaryTemplate = (ctx: IgcSummaryTemplateContext) => {
return html`
- My custom summary template
+ My custom summary template${ ctx.implicit[0].label } - ${ ctx.implicit[0].summaryResult }
`;
}
+
```
@@ -1042,6 +1065,7 @@ const summaryTemplate = (ctx: IgrSummaryTemplateContext) => {
```
+
@@ -1149,6 +1173,7 @@ The following examples illustrate how to use the
```
+
@@ -1254,6 +1280,7 @@ igRegisterScript("SummaryFormatter", (summary) => {
}
return result;
}, true);
+
```
@@ -1270,6 +1297,7 @@ const summaryFormatter = (summary: IgrSummaryResult, summaryOperand: IgrSummaryO
```
+
diff --git a/docs/xplat/src/content/en/components/grids/_shared/toolbar.mdx b/docs/xplat/src/content/en/components/grids/_shared/toolbar.mdx
index 34c62b2914..ed79ce53c9 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/toolbar.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/toolbar.mdx
@@ -422,6 +422,7 @@ This will make sure you always have the correct grid instance in the scope of yo
```
+
@@ -448,6 +449,7 @@ public rowIslandToolbarTemplate = () => {
`;
}
+
```
```html
@@ -457,6 +459,7 @@ public rowIslandToolbarTemplate = () => {
```
+
@@ -481,6 +484,7 @@ igRegisterScript("RowIslandToolbarTemplate", () => {
`;
}, false);
+
```
@@ -646,6 +650,7 @@ Each action now exposes a way to change the overlay settings of the actions dial
```
+
@@ -666,6 +671,7 @@ constructor() {
hideTool.overlaySettings = this.overlaySettingsAuto;
}
```
+
@@ -692,6 +698,7 @@ public overlaySettingsAuto = {
constructor() {
this.data = athletesData;
}
+
```
The default overlaySettings are using **ConnectedPositionStrategy** with **Absolute** scroll strategy, **modal** set to false, with enabled **close on escape** and **close on outside click** interactions.
@@ -718,6 +725,7 @@ The component is setup to work out of the box with the parent grid containing th
```
+
@@ -1003,6 +1011,7 @@ constructor() {
toolbarExporter.addEventListener("toolbarExporting", this.configureExport);
}
```
+
@@ -1019,6 +1028,7 @@ const configureExport = (evt: IgrGridToolbarExportEventArgs) => {
<{ComponentSelector} onToolbarExporting={configureExport}>
+
```
@@ -1050,6 +1060,7 @@ configureExport(args: IGridToolbarExportEventArgs) {
});
}
```
+
@@ -1063,6 +1074,7 @@ public configureExport(evt: CustomEvent) {
columnArgs.cancel = columnArgs.header === 'Athlete' || columnArgs.header === 'Country';
});
}
+
```
@@ -1070,6 +1082,7 @@ public configureExport(evt: CustomEvent) {
```razor
```
+
@@ -1111,6 +1124,7 @@ public configureExport(evt: CustomEvent) {
}
}
```
+
@@ -1127,6 +1141,7 @@ const configureExport = (evt: IgrGridToolbarExportEventArgs) => {
<{ComponentSelector} onToolbarExporting={configureExport}>
+
```
@@ -1144,6 +1159,7 @@ igRegisterScript("ConfigureExport", (evt) => {
});
}, false);
```
+
@@ -1170,6 +1186,7 @@ public configureExport(evt: CustomEvent) {
}
}
```
+
@@ -1186,6 +1203,7 @@ const configureExport = (evt: IgrGridToolbarExportEventArgs) => {
<{ComponentSelector} onToolbarExporting={configureExport}>
+
```
@@ -1203,6 +1221,7 @@ igRegisterScript("ConfigureExport", (evt) => {
});
}, false);
```
+
@@ -1259,6 +1278,7 @@ Here is a sample snippet:
+
```
@@ -1278,6 +1298,7 @@ Here is a sample snippet:
```
+
diff --git a/docs/xplat/src/content/en/components/grids/_shared/validation.mdx b/docs/xplat/src/content/en/components/grids/_shared/validation.mdx
index 23b9d42c3f..e26e8d7828 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/validation.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/validation.mdx
@@ -84,6 +84,7 @@ We expose the that will be used for val
requiredDateRecord.addValidators(this.pastDateValidator());
shippedDateRecord.addValidators(this.pastDateValidator());
}
+
```
@@ -95,6 +96,7 @@ We expose the that will be used for val
hireDateRecord.addValidators([this.futureDateValidator(), this.pastDateValidator()]);
}
```
+
You can decide to write your own validator function, or use one of the [built-in {Platform} validator functions](https://{Platform}.io/guide/form-validation#built-in-validator-functions).
@@ -255,6 +257,7 @@ public calculateDealsRatio(dealsWon, dealsLost) {
if (dealsLost === 0) return dealsWon + 1;
return Math.round(dealsWon / dealsLost * 100) / 100;
}
+
```
@@ -268,6 +271,7 @@ The cross-field validator can be added to the
+
```ts
public rowStyles = {
background: (row: RowType) => row.validation.status === 'INVALID' ? '#FF000033' : '#00000000'
@@ -591,6 +596,7 @@ public cellStyles = {
<{ComponentInstance} [rowStyles]="rowStyles">
```
+
@@ -647,6 +653,7 @@ public cellStyles = {
```
+
diff --git a/docs/xplat/src/content/en/components/grids/data-grid.mdx b/docs/xplat/src/content/en/components/grids/data-grid.mdx
index c429dd9c08..f3d7188cc7 100644
--- a/docs/xplat/src/content/en/components/grids/data-grid.mdx
+++ b/docs/xplat/src/content/en/components/grids/data-grid.mdx
@@ -77,7 +77,7 @@ In this {ProductName} Grid example, you can see how users can do both basic and
### Dependencies
-To get started with the {Platform} Data Grid, first you need to install the
+To get started with the {Platform} Data Grid, first you need to install the
{PackageCommon} package.
@@ -184,6 +184,7 @@ Or to link it:
```typescript
```
+
For more details on how to customize the appearance of the grid, you may have a look at the [styling](data-grid.md#styling-{PlatformLower}-grid) section.
@@ -206,6 +207,7 @@ The `DataGrid` requires the following modules:
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbGridModule));
+
```
@@ -225,6 +227,7 @@ import { IgxGridModule } from 'igniteui-angular';
})
export class AppModule {}
```
+
@@ -1382,6 +1385,7 @@ and in the template of the component:
```
+
**Note**: The grid property is best to be avoided when binding to remote data for now. It assumes that the data is available in order to inspect it and generate the appropriate columns. This is usually not the case until the remote service responds, and the grid will throw an error. Making available, when binding to remote service, is on our roadmap for future versions.
@@ -1492,7 +1496,7 @@ configuration. Same goes for grouping and editing operations with or without tra
>**WARNING**
>The grids **do not** support this kind of binding for `PrimaryKey`, `ForeignKey` and `ChildKey` properties where applicable.
-{/* NOTE this sample is differed */}
+{/*NOTE this sample is differed*/}
@@ -2309,7 +2313,7 @@ Check out these resources for more information:
- [Hierarchical Grid Keyboard Navigation](hierarchical-grid/keyboard-navigation.md)
- [Blog post](https://www.infragistics.com/community/blogs/b/engineering/posts/grid-keyboard-navigation-accessibility) - Improving Usability, Accessibility and ARIA Compliance with Grid keyboard navigation
-
+
@@ -2327,8 +2331,8 @@ Achieving a state persistence framework is easier than ever by using the new bui
-{/* The sizing topic is still not available thus the Sizing section is commented out. */}
-{/* ## Sizing
+{/* The sizing topic is still not available thus the Sizing section is commented out. _/}
+{/_ ## Sizing
See the [Grid Sizing](sizing.md) topic. */}
@@ -2478,7 +2482,7 @@ Learn more about creating a {Platform} `Grid` in our short tutorial video:
- [Column Resizing](grid/column-resizing.md)
- [Selection](grid/selection.md)
- [Column Data Types](grid/column-types.md#default-template)
-{/* * [Build CRUD operations with Grid](../general/how-to/how-to-perform-crud.md) */}
+{/** [Build CRUD operations with Grid](../general/how-to/how-to-perform-crud.md) */}
diff --git a/docs/xplat/src/content/en/components/grids/data-grid/column-options.mdx b/docs/xplat/src/content/en/components/grids/data-grid/column-options.mdx
index bf2e69b901..df92a08d2e 100644
--- a/docs/xplat/src/content/en/components/grids/data-grid/column-options.mdx
+++ b/docs/xplat/src/content/en/components/grids/data-grid/column-options.mdx
@@ -76,6 +76,7 @@ idColumn.isFilteringEnabled="false";
//adjust sorting
this.grid.headerClickAction = HeaderClickAction.SortByOneColumnOnly;
+
```
diff --git a/docs/xplat/src/content/en/components/grids/data-grid/column-pinning.mdx b/docs/xplat/src/content/en/components/grids/data-grid/column-pinning.mdx
index 7563368e0a..bd8364f43d 100644
--- a/docs/xplat/src/content/en/components/grids/data-grid/column-pinning.mdx
+++ b/docs/xplat/src/content/en/components/grids/data-grid/column-pinning.mdx
@@ -160,6 +160,7 @@ public onButtonUnPin = (e: any) => {
this.grid.pinColumn(cityColumn, PinnedPositions.None);
this.grid.pinColumn(countryColumn, PinnedPositions.None);
}
+
```
@@ -264,6 +265,7 @@ onButtonUnPin() {
this.grid.pinColumn(cityColumn, PinnedPositions.None);
this.grid.pinColumn(countryColumn, PinnedPositions.None);
}
+
```
diff --git a/docs/xplat/src/content/en/components/grids/data-grid/local-data.mdx b/docs/xplat/src/content/en/components/grids/data-grid/local-data.mdx
index 6d892c2824..e0146df2a6 100644
--- a/docs/xplat/src/content/en/components/grids/data-grid/local-data.mdx
+++ b/docs/xplat/src/content/en/components/grids/data-grid/local-data.mdx
@@ -236,7 +236,7 @@ public initData() {
-{/* TODO ADD WC, ETC. */}
+{/*TODO ADD WC, ETC.*/}
## API References
diff --git a/docs/xplat/src/content/en/components/grids/data-grid/overview.mdx b/docs/xplat/src/content/en/components/grids/data-grid/overview.mdx
index 38288f33e5..73c9d5040e 100644
--- a/docs/xplat/src/content/en/components/grids/data-grid/overview.mdx
+++ b/docs/xplat/src/content/en/components/grids/data-grid/overview.mdx
@@ -566,12 +566,12 @@ Learn more about creating a Blazor data grid in our short tutorial video:
- [Row Grouping](row-grouping.md)
- [Row Highlighting](row-highlighting.md)
-{/* TODO fix build flagging list items */}
+{/*TODO fix build flagging list items*/}
-{/* - [Row Paging](row-paging.md) */}
+{/*- [Row Paging](row-paging.md)*/}
diff --git a/docs/xplat/src/content/en/components/grids/data-grid/performance.mdx b/docs/xplat/src/content/en/components/grids/data-grid/performance.mdx
index cc63335ef9..c37a8eff64 100644
--- a/docs/xplat/src/content/en/components/grids/data-grid/performance.mdx
+++ b/docs/xplat/src/content/en/components/grids/data-grid/performance.mdx
@@ -46,8 +46,8 @@ This sample demonstrates this performance by binding thousands of financial reco
-{/* TODO fix build flagging list items */}
-{/* - [Binding Virtual Data](remote-data.md) */}
+{/*TODO fix build flagging list items _/}
+{/_ - [Binding Virtual Data](remote-data.md)*/}
diff --git a/docs/xplat/src/content/en/components/grids/data-grid/row-grouping.mdx b/docs/xplat/src/content/en/components/grids/data-grid/row-grouping.mdx
index ce0ac4b655..dfc19145f6 100644
--- a/docs/xplat/src/content/en/components/grids/data-grid/row-grouping.mdx
+++ b/docs/xplat/src/content/en/components/grids/data-grid/row-grouping.mdx
@@ -62,6 +62,7 @@ public componentDidMount() {
// ...
this.grid.groupHeaderDisplayMode = GroupHeaderDisplayMode.Split;
}
+
```
diff --git a/docs/xplat/src/content/en/components/grids/grid/groupby.mdx b/docs/xplat/src/content/en/components/grids/grid/groupby.mdx
index 968ec4dc2a..8c9958ac81 100644
--- a/docs/xplat/src/content/en/components/grids/grid/groupby.mdx
+++ b/docs/xplat/src/content/en/components/grids/grid/groupby.mdx
@@ -907,7 +907,7 @@ This way, due to {Platform}'s [ViewEncapsulation](https://{Platform}.io/api/core
### Demo
-{/* NOTE this sample is differed */}
+{/*NOTE this sample is differed*/}
diff --git a/docs/xplat/src/content/en/components/grids/grid/paste-excel.mdx b/docs/xplat/src/content/en/components/grids/grid/paste-excel.mdx
index 9754b4ae74..d09f9c8098 100644
--- a/docs/xplat/src/content/en/components/grids/grid/paste-excel.mdx
+++ b/docs/xplat/src/content/en/components/grids/grid/paste-excel.mdx
@@ -34,7 +34,6 @@ The new data after the paste is decorated in Italic.
-
@@ -119,6 +118,7 @@ public get textArea() {
return this.txtArea;
}
```
+
@@ -157,6 +157,7 @@ public get textArea() {
}
return this.txtArea;
}
+
```
@@ -213,6 +214,7 @@ function getTextArea() {
}
```
+
The code creates a DOM textarea element which is used to receive the pasted data from the clipboard. When the data is pasted in the textarea the code parses it into an array.
@@ -257,6 +259,7 @@ public processData(data: any) {
}
return pasteData;
}
+
```
@@ -300,6 +303,7 @@ function processData(data) {
return pasteData;
}
```
+
The pasted data can then be added as new records or used to update the existing records based on the user selection.
@@ -385,6 +389,7 @@ public updateRecords(processedData: any[]) {
}
}
}
+
```
@@ -456,6 +461,7 @@ function updateRecords(processedData) {
index++;
}
```
+
diff --git a/docs/xplat/src/content/en/components/grids/grid/selection-based-aggregates.mdx b/docs/xplat/src/content/en/components/grids/grid/selection-based-aggregates.mdx
index 5f919a36b8..e63e260bb7 100644
--- a/docs/xplat/src/content/en/components/grids/grid/selection-based-aggregates.mdx
+++ b/docs/xplat/src/content/en/components/grids/grid/selection-based-aggregates.mdx
@@ -52,7 +52,7 @@ For the visualization of the data, you might want to use the grid footer, which
### Demo
Change the selection to see summaries of the currently selected range.
-{/* NOTE this sample is differed */}
+{/*NOTE this sample is differed*/}
diff --git a/docs/xplat/src/content/en/components/grids/grid/theming-grid.mdx b/docs/xplat/src/content/en/components/grids/grid/theming-grid.mdx
index 855d144687..ce82a8d5ce 100644
--- a/docs/xplat/src/content/en/components/grids/grid/theming-grid.mdx
+++ b/docs/xplat/src/content/en/components/grids/grid/theming-grid.mdx
@@ -133,7 +133,7 @@ In addition to predefined themes and palettes, you can further customize the loo
- [Column Resizing](grid/column-resizing.md)
- [Selection](grid/selection.md)
- [Column Data Types](grid/column-types.md#default-template)
-{/* * [Build CRUD operations with Grid](../general/how-to/how-to-perform-crud.md) */}
+{/** [Build CRUD operations with Grid](../general/how-to/how-to-perform-crud.md) */}
diff --git a/docs/xplat/src/content/en/components/grids/grids-header.mdx b/docs/xplat/src/content/en/components/grids/grids-header.mdx
index f230a74282..e5e58c72f8 100644
--- a/docs/xplat/src/content/en/components/grids/grids-header.mdx
+++ b/docs/xplat/src/content/en/components/grids/grids-header.mdx
@@ -261,8 +261,8 @@ Here are a few of the data grid’s key features:
-{/*Add back when batch editing is available>
-{/*
[**Inline Editing**](grid/editing.md) with [**Cell**](grid/cell-editing.md), [**Row**](grid/row-editing.md), and [**Batch**](grid/batch-editing.md) Update options
*/}*/}
+{/_Add back when batch editing is available>
+{/_
[**Inline Editing**](grid/editing.md) with [**Cell**](grid/cell-editing.md), [**Row**](grid/row-editing.md), and [**Batch**](grid/batch-editing.md) Update options
Column templates like [**Sparkline Column**](charts/types/sparkline-chart.md) and Image Column
*/}
+{/*
Column templates like [**Sparkline Column**](charts/types/sparkline-chart.md) and Image Column
*/}
diff --git a/docs/xplat/src/content/en/components/grids/hierarchical-grid/overview.mdx b/docs/xplat/src/content/en/components/grids/hierarchical-grid/overview.mdx
index 475b9ddd33..3f1262d0c2 100644
--- a/docs/xplat/src/content/en/components/grids/hierarchical-grid/overview.mdx
+++ b/docs/xplat/src/content/en/components/grids/hierarchical-grid/overview.mdx
@@ -30,7 +30,7 @@ In this {Platform} grid example you can see how users can visualize hierarchical
### Dependencies
-To get started with the {Platform} hierarchical grid, first you need to install the
+To get started with the {Platform} hierarchical grid, first you need to install the
{PackageCommon} package.
@@ -110,6 +110,7 @@ You also need to include the following import to use the grid:
```typescript
import 'igniteui-webcomponents-grids/grids/combined.js';
```
+
The corresponding styles should also be referenced. You can choose light or dark option for one of the [themes](../../themes/overview.md) and based on your project configuration to import it:
@@ -132,6 +133,7 @@ Or to link it:
```typescript
```
+
For more details on how to customize the appearance of the hierarchical grid, you may have a look at the [styling](overview.md#Styling) section.
@@ -150,6 +152,7 @@ For more details on how to customize the appearance of the hierarchical grid, yo
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbhierarchicalGridModule));
+
```
@@ -169,6 +172,7 @@ import { IgxhierarchicalGridModule } from 'igniteui-angular';
})
export class AppModule {}
```
+
@@ -804,8 +808,8 @@ The Hierarchical Grid allows the users to conveniently collapse all its currentl
-{/* TODO: uncomment when sizing topic is ready */}
-{/* ## Sizing
+{/* TODO: uncomment when sizing topic is ready _/}
+{/_ ## Sizing
See the [Hierarchical Grid Sizing](sizing.md) topic. */}
diff --git a/docs/xplat/src/content/en/components/grids/hierarchical-grid/theming-grid.mdx b/docs/xplat/src/content/en/components/grids/hierarchical-grid/theming-grid.mdx
index d4157e6fe4..279065332d 100644
--- a/docs/xplat/src/content/en/components/grids/hierarchical-grid/theming-grid.mdx
+++ b/docs/xplat/src/content/en/components/grids/hierarchical-grid/theming-grid.mdx
@@ -134,7 +134,7 @@ In addition to predefined themes and palettes, you can further customize the loo
- [Column Resizing](grid/column-resizing.md)
- [Selection](grid/selection.md)
- [Column Data Types](grid/column-types.md#default-template)
-{/* * [Build CRUD operations with Grid](../general/how-to/how-to-perform-crud.md) */}
+{/** [Build CRUD operations with Grid](../general/how-to/how-to-perform-crud.md) */}
diff --git a/docs/xplat/src/content/en/components/grids/pivot-grid/features.mdx b/docs/xplat/src/content/en/components/grids/pivot-grid/features.mdx
index c0cddcedf6..1cfd692155 100644
--- a/docs/xplat/src/content/en/components/grids/pivot-grid/features.mdx
+++ b/docs/xplat/src/content/en/components/grids/pivot-grid/features.mdx
@@ -32,7 +32,6 @@ The {PivotGridTitle} component has additional features and functionalities relat
-
@@ -101,6 +100,7 @@ public pivotConfigHierarchy: IPivotConfiguration = {
]
}
```
+
@@ -154,6 +154,7 @@ public pivotConfigHierarchy: IPivotConfiguration = {
]
}
```
+
diff --git a/docs/xplat/src/content/en/components/grids/pivot-grid/overview.mdx b/docs/xplat/src/content/en/components/grids/pivot-grid/overview.mdx
index 47ecca38d0..13e0260c7b 100644
--- a/docs/xplat/src/content/en/components/grids/pivot-grid/overview.mdx
+++ b/docs/xplat/src/content/en/components/grids/pivot-grid/overview.mdx
@@ -825,6 +825,7 @@ When overriding the `PivotKeys` in Blazor, currently you will need to define all
| Setting columns declaratively is not supported. | The Pivot grid generates its columns based on the `Columns` configuration, so setting them declaratively, like in the base grid, is not supported. Such columns are disregarded. |
| Setting duplicate `MemberName` or `Member` property values for dimensions/values. | These properties should be unique for each dimension/value. Duplication may result in loss of data from the final result. |
| Row Selection is only supported in **Single** mode. | Multiple selection is currently not supported. |
+
| Merging the dimension members is case sensitive| The Pivot Grid creates groups and merges the same (case sensitive) values. But the dimensions provide `MemberFunction` and this can be changed there, the result of the `MemberFunction` are compared and used as display value.|
diff --git a/docs/xplat/src/content/en/components/grids/pivot-grid/remote-operations.mdx b/docs/xplat/src/content/en/components/grids/pivot-grid/remote-operations.mdx
index 8ddfd168db..77e54ad194 100644
--- a/docs/xplat/src/content/en/components/grids/pivot-grid/remote-operations.mdx
+++ b/docs/xplat/src/content/en/components/grids/pivot-grid/remote-operations.mdx
@@ -230,7 +230,7 @@ public noopSortStrategy = NoopSortingStrategy.instance();
## Additional Resources
-{/* * [{Platform} Pivot Grid Features](pivot-grid-features.md) */}
+{/** [{Platform} Pivot Grid Features](pivot-grid-features.md) */}
- [{Platform} Pivot Grid Overview](overview.md)
Our community is active and always welcoming to new ideas.
diff --git a/docs/xplat/src/content/en/components/grids/tree-grid/overview.mdx b/docs/xplat/src/content/en/components/grids/tree-grid/overview.mdx
index 99ffe398b9..2b134c0a61 100644
--- a/docs/xplat/src/content/en/components/grids/tree-grid/overview.mdx
+++ b/docs/xplat/src/content/en/components/grids/tree-grid/overview.mdx
@@ -34,7 +34,7 @@ In this example, you can see how users can manipulate hierarchical or flat data.
Getting started with our {Platform} Grid library and the {Platform} Tree Grid in particular is the first step to building powerful, data-rich applications that display hierarchical information in a clear and interactive way. The {Platform} Tree Grid allows you to present parent-child data structures in a familiar tabular format, complete with features like row expansion, sorting, filtering, editing, and virtualization for high performance with large datasets.
-To get started with the {Platform} tree grid, first you need to install the
+To get started with the {Platform} tree grid, first you need to install the
{PackageCommon} package.
@@ -136,6 +136,7 @@ For more details on how to customize the appearance of the tree grid, you may ha
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbTreeGridModule));
+
```
@@ -155,6 +156,7 @@ import { IgxTreeGridModule } from 'igniteui-angular';
})
export class AppModule {}
```
+
diff --git a/docs/xplat/src/content/en/components/grids/tree-grid/theming-grid.mdx b/docs/xplat/src/content/en/components/grids/tree-grid/theming-grid.mdx
index 66b3cab075..a3a65be0f6 100644
--- a/docs/xplat/src/content/en/components/grids/tree-grid/theming-grid.mdx
+++ b/docs/xplat/src/content/en/components/grids/tree-grid/theming-grid.mdx
@@ -134,7 +134,7 @@ In addition to predefined themes and palettes, you can further customize the loo
- [Column Resizing](grid/column-resizing.md)
- [Selection](grid/selection.md)
- [Column Data Types](grid/column-types.md#default-template)
-{/* * [Build CRUD operations with Grid](../general/how-to/how-to-perform-crud.md) */}
+{/** [Build CRUD operations with Grid](../general/how-to/how-to-perform-crud.md) */}
diff --git a/docs/xplat/src/content/en/components/inputs/button.mdx b/docs/xplat/src/content/en/components/inputs/button.mdx
index b436d97c41..dc76be4d32 100644
--- a/docs/xplat/src/content/en/components/inputs/button.mdx
+++ b/docs/xplat/src/content/en/components/inputs/button.mdx
@@ -13,7 +13,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
# {Platform} Button Overview
-The {Platform} Button Component lets you enable clickable elements that trigger actions in your {Platform} app. You get full control over how you set button variants, configure styles for the wrapped element, and define sizes. The Button Component also gives flexibility through the {Platform} Button
+The {Platform} Button Component lets you enable clickable elements that trigger actions in your {Platform} app. You get full control over how you set button variants, configure styles for the wrapped element, and define sizes. The Button Component also gives flexibility through the {Platform} Button
OnClick event
diff --git a/docs/xplat/src/content/en/components/inputs/color-editor.mdx b/docs/xplat/src/content/en/components/inputs/color-editor.mdx
index 4f312b65a6..bcf8867b20 100644
--- a/docs/xplat/src/content/en/components/inputs/color-editor.mdx
+++ b/docs/xplat/src/content/en/components/inputs/color-editor.mdx
@@ -140,6 +140,7 @@ The simplest way to start using the is as follows
ref={this.colorEditorRef}>
```
+
@@ -168,6 +169,7 @@ public ngAfterViewInit(): void
public onValueChanged = (e: any) => {
console.log("test");
}
+
```
@@ -177,6 +179,7 @@ this.OnValueChanged = this.OnValueChanged.bind(this);
this.colorEditor = document.getElementById('colorEditor') as IgcColorEditorComponent;
this.colorEditor.valueChanged = this.OnValueChanged;
```
+
@@ -189,6 +192,7 @@ this.colorEditor.valueChanged = this.OnValueChanged;
}
}
+
```
diff --git a/docs/xplat/src/content/en/components/inputs/query-builder.mdx b/docs/xplat/src/content/en/components/inputs/query-builder.mdx
index 7a2bd78765..cf8ea5c4a5 100644
--- a/docs/xplat/src/content/en/components/inputs/query-builder.mdx
+++ b/docs/xplat/src/content/en/components/inputs/query-builder.mdx
@@ -63,7 +63,7 @@ In order to add a condition you select a field, an operand based on the field da
Clicking on the (AND or OR) button placed above each group, will open a menu with options to change the group type or ungroup the conditions inside.
-Since every condition is related to a specific field from a particular entity changing the entity will lead to resetting all preset conditions and groups.
+Since every condition is related to a specific field from a particular entity changing the entity will lead to resetting all preset conditions and groups.
You can start using the component by setting the property to an array describing the entity name and an array of its fields, where each field is defined by its name and data type. Once a field is selected it will automatically assign the corresponding operands based on the data type.
The Query Builder has the property. You could use it to set an initial state of the control and access the user-specified filtering logic.
@@ -255,7 +255,7 @@ By default the header would not be displayed. In
The search value of a condition can be templated by setting the property to a function that returns a lit-html template.
-When using `SearchValueTemplate`, you must provide templates for all field types in your entity, or the query builder will not function correctly. It is mandatory to implement a default/fallback template that handles any fields or conditions not covered by specific custom templates. Without this, users will not be able to edit
+When using `SearchValueTemplate`, you must provide templates for all field types in your entity, or the query builder will not function correctly. It is mandatory to implement a default/fallback template that handles any fields or conditions not covered by specific custom templates. Without this, users will not be able to edit
conditions for those fields.
diff --git a/docs/xplat/src/content/en/components/interactivity/accessibility-compliance.mdx b/docs/xplat/src/content/en/components/interactivity/accessibility-compliance.mdx
index 9661371e96..c171fd211a 100644
--- a/docs/xplat/src/content/en/components/interactivity/accessibility-compliance.mdx
+++ b/docs/xplat/src/content/en/components/interactivity/accessibility-compliance.mdx
@@ -35,11 +35,11 @@ The matrix below provides a high-level outline of the accessibility support prov
|**Component/Principle**| (a) |(b) |(c) |(d) |(e) |(f) |(g) |(h) |(i) |(j) |(k) |(l) |(m) |(n) |(o) |(p) |
|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|
-|__Grids__|||||||||||||||||
+|**Grids**|||||||||||||||||
| - Grid||||||||||*|||||||
| - HierarchicalGrid||||||||||*|||||||
| - TreeGrid||||||||||*|||||||
-|__Other__||||||||||*|||||||
+|**Other**||||||||||*|||||||
| - Avatar|||||||||||||||||
| - Badge|||||||||||||||||
| - Bottom navigation||||||||||*|||||||
@@ -114,11 +114,11 @@ The table above is relevant only to the **Default theme** of Ignite UI for {Plat
|**Component/Guideline**|1.1 |1.2 |1.3 |1.4 |2.1 |2.2 |2.3 |2.4 |2.5 |3.1 |3.2 |3.3 |4.1 |
|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|
-|__Grids__||||||||||||||
+|**Grids**||||||||||||||
| - Grid|||||||*||||*|||
| - HierarchicalGrid|||||||*||||*|||
| - TreeGrid|||||||*||||*|||
-|__Other__|||||||*|||||||
+|**Other**|||||||*|||||||
| - Avatar|||||||||||*|||
| - Badge|||||||||||*|||
| - Banner||||||*|*||||*|||
diff --git a/docs/xplat/src/content/en/components/interactivity/chat.mdx b/docs/xplat/src/content/en/components/interactivity/chat.mdx
index 46b8345243..1eae96c93b 100644
--- a/docs/xplat/src/content/en/components/interactivity/chat.mdx
+++ b/docs/xplat/src/content/en/components/interactivity/chat.mdx
@@ -484,16 +484,16 @@ In this setup:
This approach gives you full flexibility over the chat input bar, letting you add, remove, or reorder actions without rebuilding the input area from scratch.
### Markdown Rendering
-The Chat component includes built-in support for Markdown content through the `createMarkdownRenderer` helper, which is exported from the
+The Chat component includes built-in support for Markdown content through the `createMarkdownRenderer` helper, which is exported from the
- `igniteui-webcomponents/extras`
+ `igniteui-webcomponents/extras`
- `igniteui-react/extras`
+ `igniteui-react/extras`
entry point of the main package. This allows you to display messages with formatted text, links, lists, and even syntax-highlighted code blocks, while ensuring that all rendered HTML is sanitized for security.
diff --git a/docs/xplat/src/content/en/components/layouts/dock-manager-electron.mdx b/docs/xplat/src/content/en/components/layouts/dock-manager-electron.mdx
index 6e3e4d9c4a..b867d03eac 100644
--- a/docs/xplat/src/content/en/components/layouts/dock-manager-electron.mdx
+++ b/docs/xplat/src/content/en/components/layouts/dock-manager-electron.mdx
@@ -17,7 +17,7 @@ import dockmanagerElectronApp from '@xplat-images/dockmanager-electron-app.gif';
The Infragistics {Platform} Dock Manager component can be used in a multi-window [Electron](https://www.electronjs.org/) desktop application to manage the layout of each window, drag panes outside of a window in order to create a new window and drag/drop panes from one window to another. You could find a sample implementation of such application in the following repository https://github.com/IgniteUI/dock-manager-electron-app.
-{/* TODO: Add a gif of the application and a link to download the exe */}
+{/*TODO: Add a gif of the application and a link to download the exe*/}
## Implementation
diff --git a/docs/xplat/src/content/en/components/layouts/dock-manager.mdx b/docs/xplat/src/content/en/components/layouts/dock-manager.mdx
index 6d8cd20e99..5c99ec2114 100644
--- a/docs/xplat/src/content/en/components/layouts/dock-manager.mdx
+++ b/docs/xplat/src/content/en/components/layouts/dock-manager.mdx
@@ -112,6 +112,7 @@ this.dockManager.layout = {
]
}
};
+
```
@@ -136,6 +137,7 @@ this.dockManager.layout = {
}
};
```
+
To load the content of the panes, the Dock Manager uses [slots](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot). The [slot](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot) attribute of the content element should match the `ContentId` of the content pane in the layout configuration. It is highly recommended to set width and height of the content elements to **100%** for predictable response when the end-user is resizing panes.
@@ -644,6 +646,7 @@ private saveLayout() {
private loadLayout() {
this.dockManager.layout = JSON.parse(this.savedLayout);
}
+
```
@@ -659,6 +662,7 @@ private loadLayout() {
this.dockManager.layout = JSON.parse(this.savedLayout);
}
```
+
@@ -684,7 +688,7 @@ The Dock Manager component raises events when specific end-user interactions are
-
+
@@ -1017,6 +1021,7 @@ The Dock Manager comes with a light and a dark theme. The light theme is the def
```html
```
+
@@ -1027,6 +1032,7 @@ The Dock Manager comes with a light and a dark theme. The light theme is the def
```tsx
```
+
@@ -1047,6 +1053,7 @@ const dockManagerStringsFr: IgcDockManagerResourceStrings = {
addResourceStrings('fr', dockManagerStringsFr);
```
+
The Dock Manager exposes `ResourceStrings` property which allows you to modify the strings. If you set the `ResourceStrings` property, the Dock Manager will use your strings no matter what [lang](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) attribute is set.
diff --git a/docs/xplat/src/content/en/components/layouts/icon.mdx b/docs/xplat/src/content/en/components/layouts/icon.mdx
index 7ee82e3e24..bd26f657ee 100644
--- a/docs/xplat/src/content/en/components/layouts/icon.mdx
+++ b/docs/xplat/src/content/en/components/layouts/icon.mdx
@@ -220,6 +220,7 @@ const searchIcon =
'';
registerIconFromText("search", searchIcon, "material");
+
```
@@ -241,6 +242,7 @@ registerIconFromText("search", searchIcon, "material");
}
}
```
+
diff --git a/docs/xplat/src/content/en/components/menus/toolbar.mdx b/docs/xplat/src/content/en/components/menus/toolbar.mdx
index 5407e9bfef..8ec7043608 100644
--- a/docs/xplat/src/content/en/components/menus/toolbar.mdx
+++ b/docs/xplat/src/content/en/components/menus/toolbar.mdx
@@ -585,7 +585,7 @@ The icon component can be styled by using it's `BaseTheme` property directly to
-{/* The following example demonstrates the various theme options that can be applied.
+{/*The following example demonstrates the various theme options that can be applied.
*/}
diff --git a/docs/xplat/src/content/en/components/notifications/snackbar.mdx b/docs/xplat/src/content/en/components/notifications/snackbar.mdx
index 947fbd4016..091ff87b06 100644
--- a/docs/xplat/src/content/en/components/notifications/snackbar.mdx
+++ b/docs/xplat/src/content/en/components/notifications/snackbar.mdx
@@ -160,7 +160,7 @@ Use the pro
By default, the snackbar component is hidden automatically after a period specified by the . You can use property to change this behavior. In this way, the snackbar will remain visible. Using the snackbar you can display an action button inside the component.
-
+
diff --git a/docs/xplat/src/content/en/components/scheduling/calendar.mdx b/docs/xplat/src/content/en/components/scheduling/calendar.mdx
index 464fd4339e..4b9c4c286d 100644
--- a/docs/xplat/src/content/en/components/scheduling/calendar.mdx
+++ b/docs/xplat/src/content/en/components/scheduling/calendar.mdx
@@ -298,6 +298,7 @@ this.radios.forEach(radio => {
});
})
```
+
@@ -317,12 +318,13 @@ this.radios.forEach(radio => {
JA
-
+
-
+
```
```tsx
@@ -342,6 +344,7 @@ public onRadioChange(e: any) {
}
}
```
+
If everything went well, we should now have a Calendar with customized display, that also changes the locale representation, based on the user selection. Let's have a look at it:
diff --git a/docs/xplat/src/content/en/components/scheduling/date-picker.mdx b/docs/xplat/src/content/en/components/scheduling/date-picker.mdx
index 250cf2419c..f1f0c22a84 100644
--- a/docs/xplat/src/content/en/components/scheduling/date-picker.mdx
+++ b/docs/xplat/src/content/en/components/scheduling/date-picker.mdx
@@ -20,7 +20,7 @@ The {ProductName} Date Picker Component lets users pick a single date through a
-The is a brand new component from {ProductName} version
+The is a brand new component from {ProductName} version
@@ -193,6 +193,7 @@ const date = new Date();
this.SelectedDate = DateTime.Today;
}
}
+
```
diff --git a/docs/xplat/src/content/jp/components/charts/chart-overview.mdx b/docs/xplat/src/content/jp/components/charts/chart-overview.mdx
index 7d5d7eddde..b99ac9ee06 100644
--- a/docs/xplat/src/content/jp/components/charts/chart-overview.mdx
+++ b/docs/xplat/src/content/jp/components/charts/chart-overview.mdx
@@ -142,7 +142,6 @@ import igniteUiAngularFinancialChartCustomTooltips1100 from '@xplat-images/chart
-
### {Platform} 極座標チャート
{Platform} 極座標エリア チャートまたは極座標グラフは、極座標チャートのグループに属し、頂点または隅がデータ ポイントの極 (角度/半径) 座標に配置された塗りつぶされたポリゴンの形状を持っています。極座標エリア チャートは、散布図と同じデータ プロットの概念を使用しますが、データ ポイントを水平方向に伸ばすのではなく、円の周りにラップします。他のシリーズ タイプと同じように、複数の極座標エリア チャートは同じデータ チャートにプロットでき、データセットの相違点を示すために互いにオーバーレイできます。[極座標チャート](types/polar-chart.md)の詳細をご覧ください。
diff --git a/docs/xplat/src/content/jp/components/charts/features/chart-axis-layouts.mdx b/docs/xplat/src/content/jp/components/charts/features/chart-axis-layouts.mdx
index 4fd1c0eecb..5687c5ed74 100644
--- a/docs/xplat/src/content/jp/components/charts/features/chart-axis-layouts.mdx
+++ b/docs/xplat/src/content/jp/components/charts/features/chart-axis-layouts.mdx
@@ -90,4 +90,3 @@ import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-
diff --git a/docs/xplat/src/content/jp/components/charts/features/chart-performance.mdx b/docs/xplat/src/content/jp/components/charts/features/chart-performance.mdx
index d39fff3bc3..cb1e553711 100644
--- a/docs/xplat/src/content/jp/components/charts/features/chart-performance.mdx
+++ b/docs/xplat/src/content/jp/components/charts/features/chart-performance.mdx
@@ -228,6 +228,7 @@ this.Chart.markerTypes.add(MarkerType.None);
// on LineSeries of DataChart
this.LineSeries.markerType = MarkerType.None;
+
```
@@ -258,6 +259,7 @@ this.Chart.Resolution = 10;
// on LineSeries of DataChart:
this.LineSeries.Resolution = 10;
+
```
diff --git a/docs/xplat/src/content/jp/components/charts/types/area-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/area-chart.mdx
index 81cb254ac3..0554648934 100644
--- a/docs/xplat/src/content/jp/components/charts/types/area-chart.mdx
+++ b/docs/xplat/src/content/jp/components/charts/types/area-chart.mdx
@@ -46,7 +46,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
- 時系列データを左から右へ並べ替える。
- 透明色を使用して、別の系列の背後にプロットされているデータがブロックされないようにする。
-### 以下の場合にエリア チャートを使用しないでください:
+### 以下の場合にエリア チャートを使用しないでください
- 多くの (7 または 10 以上) シリーズのデータがある場合。チャートが読みやすいことを確認する必要があります。
- 時系列データの値は類似している場合 (同じ期間のデータ)。これにより、重なり合った網掛け領域を区別できなくなります。
diff --git a/docs/xplat/src/content/jp/components/charts/types/bar-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/bar-chart.mdx
index 9c572c8832..db08faf49c 100644
--- a/docs/xplat/src/content/jp/components/charts/types/bar-chart.mdx
+++ b/docs/xplat/src/content/jp/components/charts/types/bar-chart.mdx
@@ -63,12 +63,12 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
- ランキング、または順序付けられたカテゴリ (項目) の比較は、昇順または降順でソートされていることを確認します。
- 読みやすくするために、Y 軸 (チャートの左側のラベル) のカテゴリ値を右揃えにします。
-### 以下の場合に棒チャートを使用しないでください:
+### 以下の場合に棒チャートを使用しないでください
- データが多すぎるため、Y 軸がスペースに収まらないか、判読できません。
- 詳細な時系列分析が必要なときは、時系列を含む[折れ線チャート](line-chart.md)を検討してください。
-### 棒チャートのデータ構造:
+### 棒チャートのデータ構造
- データ ソースはデータ項目の配列またはリストである必要があります。
- データ ソースに少なくとも 1 つのデータ項目を含む必要があります。
diff --git a/docs/xplat/src/content/jp/components/charts/types/column-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/column-chart.mdx
index be9f8b9f26..9c86013555 100644
--- a/docs/xplat/src/content/jp/components/charts/types/column-chart.mdx
+++ b/docs/xplat/src/content/jp/components/charts/types/column-chart.mdx
@@ -38,16 +38,16 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
- 同じデータ セットに正の値だけでなく負の値も表示する必要がある場合。
- パン、ズーム、ドリルダウンなどのチャート操作に適した大容量のデータセットを使用する場合。
-### 縦棒チャートのベスト プラクティス:
+### 縦棒チャートのベスト プラクティス
- データ比較が正確になるように Y 軸 (左軸または右軸) を常に 0 から開始する。
- 時系列データを左から右へ並べ替える。
-### 以下の場合に縦棒チャートを使用しないでください:
+### 以下の場合に縦棒チャートを使用しないでください
- 多くの (10 または 12 以上) シリーズのデータがある場合。チャートが読みやすいことを確認する必要があります。
-### 縦棒チャートのデータ構造:
+### 縦棒チャートのデータ構造
- データ モデルには少なくとも 1 つの数値プロパティを含む必要があります。
- データ モデルにはラベルのためのオプションの文字列または日時プロパティを含むことができます。
diff --git a/docs/xplat/src/content/jp/components/charts/types/donut-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/donut-chart.mdx
index 10024ea6df..033a97cd47 100644
--- a/docs/xplat/src/content/jp/components/charts/types/donut-chart.mdx
+++ b/docs/xplat/src/content/jp/components/charts/types/donut-chart.mdx
@@ -45,7 +45,7 @@ The {ProductName} ドーナツ チャートは[円チャート](pie-chart.md)と
- スライスの選択
- チャート アニメーション
-### ドーナツ チャートのベスト プラクティス:
+### ドーナツ チャートのベスト プラクティス
- 複数のデータ セットを使用して、データを輪に表示します。
- データをすばやく説明するために、ドーナツの穴の中に値やラベルなどの情報を配置します。
@@ -54,7 +54,7 @@ The {ProductName} ドーナツ チャートは[円チャート](pie-chart.md)と
- データ セグメントの合計が 100% になるようにします。
- パーツのセグメント/スライスでカラー パレットを区別できるようにします。
-### 以下の場合にドーナツ チャートを使用しないでください:
+### 以下の場合にドーナツ チャートを使用しないでください
- 時間の経過に伴う変化の比較の場合 - [棒](bar-chart.md)、[折れ線](line-chart.md)、または[エリア](area-chart.md)チャートを使用します。
- 正確なデータ比較が必要である場合 - [棒](bar-chart.md)、[折れ線](line-chart.md)、または[エリア](area-chart.md)チャートを使用します。
diff --git a/docs/xplat/src/content/jp/components/charts/types/line-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/line-chart.mdx
index 06595e66cf..fcd506fe93 100644
--- a/docs/xplat/src/content/jp/components/charts/types/line-chart.mdx
+++ b/docs/xplat/src/content/jp/components/charts/types/line-chart.mdx
@@ -53,7 +53,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
- 比較解析のために 1 つ以上のカテゴリのデータ トレンドを表示する必要がある場合
- 詳細な時系列データを可視化する必要がある場合
-### 折れ線チャートのベスト プラクティス:
+### 折れ線チャートのベスト プラクティス
- データ比較が正確になるように Y 軸 (左軸または右軸) を常に 0 から開始する
- 時系列データを左から右へ並べ替える
@@ -64,7 +64,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
- 多くの (7 または 10 以上) シリーズのデータがある場合チャートを読みやすくすることが目標である場合
- 時系列データの値は同じ (同じ期間のデータ) である場合; 重複した行を区別できなくなります。
-### 折れ線チャートのデータ構造:
+### 折れ線チャートのデータ構造
- データ ソースはデータ項目の配列またはリスト (単一シリーズの場合) である必要があります。
- データ ソースは、配列の配列またはリストのリスト (複数シリーズの場合) である必要があります。
diff --git a/docs/xplat/src/content/jp/components/charts/types/sparkline-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/sparkline-chart.mdx
index e261d7788b..55edc8835b 100644
--- a/docs/xplat/src/content/jp/components/charts/types/sparkline-chart.mdx
+++ b/docs/xplat/src/content/jp/components/charts/types/sparkline-chart.mdx
@@ -49,7 +49,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
- 時系列データを左から右へ並べ替える。
- 実線などの視覚属性を使用して一連のデータを表示する。
-### 次の場合にスパークラインを使用しないでください:
+### 次の場合にスパークラインを使用しないでください
- データを詳細に分析する必要がある場合。
- データ ポイントのすべてのラベルを表示する必要がある場合。Y 軸上には最大値と最小値のみを表示でき、X 軸には最初の値と最後の値のみを表示できます。
diff --git a/docs/xplat/src/content/jp/components/charts/types/treemap-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/treemap-chart.mdx
index ff584bc38f..7f6f4a5fe8 100644
--- a/docs/xplat/src/content/jp/components/charts/types/treemap-chart.mdx
+++ b/docs/xplat/src/content/jp/components/charts/types/treemap-chart.mdx
@@ -49,7 +49,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
- 正確な値を使用せずに、一目で迅速なデータ分析を提供したい場合長方形の相対的なサイズは、パターンや外れ値を非常に迅速に識別するのに役立ちます。
- スペースを有効に使用したい場合ツリーマップは、数千の項目を同時に画面に表示することが可能となります。
-### 以下の場合にツリーマップを使用しないでください:
+### 以下の場合にツリーマップを使用しないでください
- 正確な値を必要とするデータ ストーリーを説明している場合。
- 負のデータ値がある場合。
@@ -88,7 +88,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
- 項目を同じ値で色付けするグループ ベースのメカニズム。
- 階級区分図に似たスケール ベースのメカニズムで、ノードの色をその値に基づいてマップします。
-### レイアウト方向:
+### レイアウト方向
`LayoutOrientation` プロパティによってユーザーは階層のノードが展開される方向を設定できます。
diff --git a/docs/xplat/src/content/jp/components/excel-library.mdx b/docs/xplat/src/content/jp/components/excel-library.mdx
index 496b2743b0..32f656d58a 100644
--- a/docs/xplat/src/content/jp/components/excel-library.mdx
+++ b/docs/xplat/src/content/jp/components/excel-library.mdx
@@ -250,6 +250,7 @@ Modify `angular.json` by setting the `vendorSourceMap` option under architect =>
// ...
}
```
+
diff --git a/docs/xplat/src/content/jp/components/excel-utility.mdx b/docs/xplat/src/content/jp/components/excel-utility.mdx
index beac5a455b..889606813b 100644
--- a/docs/xplat/src/content/jp/components/excel-utility.mdx
+++ b/docs/xplat/src/content/jp/components/excel-utility.mdx
@@ -114,6 +114,7 @@ export class ExcelUtility {
});
}
}
+
```
diff --git a/docs/xplat/src/content/jp/components/general-changelog-dv-blazor.mdx b/docs/xplat/src/content/jp/components/general-changelog-dv-blazor.mdx
index 290baca01e..2656b8aafd 100644
--- a/docs/xplat/src/content/jp/components/general-changelog-dv-blazor.mdx
+++ b/docs/xplat/src/content/jp/components/general-changelog-dv-blazor.mdx
@@ -36,6 +36,7 @@ import chartdefaults4 from '@xplat-images/chartDefaults4.png';
DataPieChart および ProportionalCategoryAngleAxis に OthersCategoryBrush と OthersCategoryOutline を追加しました。
#### バグ修正
+
| バグ番号 | コントロール | 説明 |
|------------|---------|-------------|
|33808|IgbDataChart|TimeAxisInterval の IntervalType Ticks に設定されたスケールが表示されない。|
@@ -54,7 +55,7 @@ DataPieChart および ProportionalCategoryAngleAxis に OthersCategoryBrush と
**重大な変更**
#### {PackageCharts} (チャート)
- - New dot type, improved outline implementation following WCAG AA accessibility standards and theme based sizing. [#1889](https://github.com/IgniteUI/igniteui-webcomponents/pull/1889)
+- New dot type, improved outline implementation following WCAG AA accessibility standards and theme based sizing. [#1889](https://github.com/IgniteUI/igniteui-webcomponents/pull/1889)
#### ユーザー注釈
{ProductName} では、ユーザー注釈機能により、実行時に `DataChart` にスライス注釈、ストリップ注釈、ポイント注釈を追加できるようになりました。これにより、エンドユーザーは、スライス注釈を使用して会社の四半期レポートなどの単一の重要イベントを強調したり、ストリップ注釈を使用して期間を持つイベントを示したりすることで、プロットに詳細を追加できます。ポイント注釈またはこれら 3 つの任意の組み合わせを使用して、プロットされたシリーズ上の個々のポイントを呼び出すこともできます。
@@ -65,9 +66,9 @@ DataPieChart および ProportionalCategoryAngleAxis に OthersCategoryBrush と
#### {PackageGrids} (グリッド)
- - Accessibility color adjustments for Button, Button group, Calendar, Checkbox, Date picker, date range picker, Nav drawer, Radio group, Stepper. [#1959](https://github.com/IgniteUI/igniteui-webcomponents/pull/1959)
- - Updated and aligned styles with the design kit for Button, Calendar, Carousel, Combo, Date picker, Date range picker, input, Select, Textarea.
- - Improved keyboard navigation experience and grouping(now using native Math.groupBy) for Combo.
+- Accessibility color adjustments for Button, Button group, Calendar, Checkbox, Date picker, date range picker, Nav drawer, Radio group, Stepper. [#1959](https://github.com/IgniteUI/igniteui-webcomponents/pull/1959)
+- Updated and aligned styles with the design kit for Button, Calendar, Carousel, Combo, Date picker, Date range picker, input, Select, Textarea.
+- Improved keyboard navigation experience and grouping(now using native Math.groupBy) for Combo.
### **すべてのグリッド**
@@ -210,7 +211,7 @@ col.Pinned = true;
- Refactored grouping algorithm from recursive to iterative.
- Optimized grouping operations.
-- **Other Improvements**
+- **Other Improvements**
- A column's `MinWidth` and `MaxWidth` constrain the user-specified width so that it cannot go outside their bounds.
- The `PagingMode` property can now be set as simple strings "local" and "remote" and does not require importing the `GridPagingMode` enum.
@@ -525,6 +526,7 @@ Explore some of the publicly available [Azure maps here](https://azure.microsoft
- 内部グリッド アクション ボタンをカプセル化しました。
#### バグ修正
+
| バグ番号 | コントロール | 説明 |
|------------|---------|------------------|
|35497 | `IgbDialog` | ShowAsync と HideAsync が呼び出されると、後続のコードは実行されない。|
diff --git a/docs/xplat/src/content/jp/components/general-changelog-dv-wc.mdx b/docs/xplat/src/content/jp/components/general-changelog-dv-wc.mdx
index d555fd4c6e..e339995b04 100644
--- a/docs/xplat/src/content/jp/components/general-changelog-dv-wc.mdx
+++ b/docs/xplat/src/content/jp/components/general-changelog-dv-wc.mdx
@@ -1400,9 +1400,11 @@ igc-avatar {
- `value` is no longer readonly and can be explicitly set. The value attribute also supports declarative binding,
accepting a valid JSON stringified array.
- `value` type changed from `string[]` to `ComboValue[]` where
+
```ts
ComboValue = T | T[keyof T]
```
+
- `igcChange` event object properties are also changed to reflect the new `value` type:
diff --git a/docs/xplat/src/content/jp/components/general-getting-started-oss.mdx b/docs/xplat/src/content/jp/components/general-getting-started-oss.mdx
index 595915fcf0..e4c4d11ed0 100644
--- a/docs/xplat/src/content/jp/components/general-getting-started-oss.mdx
+++ b/docs/xplat/src/content/jp/components/general-getting-started-oss.mdx
@@ -24,7 +24,7 @@ import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBloc
## 新しい Blazor プロジェクトの作成
- - Visual Studio を起動し、スタート ページで **[新しいプロジェクトの作成]** をクリックし、**Blazor Server App**、**Blazor WebAssembly App**、**Blazor Web App** などの Blazor テンプレートを選択して **[次へ]** をクリックします。
+- Visual Studio を起動し、スタート ページで **[新しいプロジェクトの作成]** をクリックし、**Blazor Server App**、**Blazor WebAssembly App**、**Blazor Web App** などの Blazor テンプレートを選択して **[次へ]** をクリックします。
**Blazor Server App** を使用する場合は、コンポーネントが使用されるページに `@rendermode InteractiveServer` を追加してください。
diff --git a/docs/xplat/src/content/jp/components/general-nuget-feed.mdx b/docs/xplat/src/content/jp/components/general-nuget-feed.mdx
index 492e10d852..fbd3a0ec24 100644
--- a/docs/xplat/src/content/jp/components/general-nuget-feed.mdx
+++ b/docs/xplat/src/content/jp/components/general-nuget-feed.mdx
@@ -27,8 +27,8 @@ Infragistics は製品版を使用するユーザーにプライベート NuGet
2 - [**パッケージ ソース**] セクションで、ダイアログの右上にある **[+]** アイコンをクリックして新しいパッケージ ソースを追加します。
- - 名前を **Infragistics** に設定します。
- - NuGet プロトコル バージョン 3 を使用する場合は、ソースを **https://packages.infragistics.com/nuget/licensed/v3/index.json** に設定します。それ以外の場合は、**https://packages.infragistics.com/nuget/licensed/** に設定する必要があります。
+- 名前を **Infragistics** に設定します。
+- NuGet プロトコル バージョン 3 を使用する場合は、ソースを **https://packages.infragistics.com/nuget/licensed/v3/index.json** に設定します。それ以外の場合は、**https://packages.infragistics.com/nuget/licensed/** に設定する必要があります。
v3 またはそれ以前のバージョンを使用するかどうかの詳細については、次の Web サイト (英語) をご覧ください: **https://devblogs.microsoft.com/nuget/nuget-3-what-and-why/** 。プロトコル v3 は、新しいバージョンの NuGet クライアント (2015 以降) を使用する場合にのみ適用されます。古い NuGet クライアントは、v3 と互換性がない場合があります。
diff --git a/docs/xplat/src/content/jp/components/geo-map-display-bing-imagery.mdx b/docs/xplat/src/content/jp/components/geo-map-display-bing-imagery.mdx
index 2cbf002cf3..3a76989a10 100644
--- a/docs/xplat/src/content/jp/components/geo-map-display-bing-imagery.mdx
+++ b/docs/xplat/src/content/jp/components/geo-map-display-bing-imagery.mdx
@@ -28,7 +28,7 @@ import bingmapsimagery from '@xplat-images/general/BingMapsImagery.png';
## {Platform} Bing Maps 画像の表示の例
-{/* */}
+{/**/}
diff --git a/docs/xplat/src/content/jp/components/geo-map-display-heat-imagery.mdx b/docs/xplat/src/content/jp/components/geo-map-display-heat-imagery.mdx
index 4cd9287837..ba6e7b7a15 100644
--- a/docs/xplat/src/content/jp/components/geo-map-display-heat-imagery.mdx
+++ b/docs/xplat/src/content/jp/components/geo-map-display-heat-imagery.mdx
@@ -53,6 +53,7 @@ function heatWorkerPostMessage() {
}
HeatTileGeneratorWebWorker.start();
export default {} as typeof Worker & (new () => Worker);
+
```
@@ -89,6 +90,7 @@ function postMessageFunction() {
self.postMessage.apply(self, Array.prototype.slice.call(arguments));
}
export default {} as typeof Worker & (new () => Worker);
+
```
## 依存関係
diff --git a/docs/xplat/src/content/jp/components/geo-map-shape-files-reference.mdx b/docs/xplat/src/content/jp/components/geo-map-shape-files-reference.mdx
index 16c0450094..93a810b7f7 100644
--- a/docs/xplat/src/content/jp/components/geo-map-shape-files-reference.mdx
+++ b/docs/xplat/src/content/jp/components/geo-map-shape-files-reference.mdx
@@ -39,7 +39,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
## シェイプ ファイルのフォーマット
-{Platform} コントロールは、地理空間データのソースとして人気の高い[シェープ ファイル (英語)](http://en.wikipedia.org/wiki/Shapefile#Overview) フォーマットを使用します。シェープ ファイルは他のファイル タイプと一緒に配布されます。一般的なファイルには、*.shp*、*.shx*、および *.dbf* の拡張子が付いています。
+{Platform} コントロールは、地理空間データのソースとして人気の高い[シェープ ファイル (英語)](http://en.wikipedia.org/wiki/Shapefile#Overview) フォーマットを使用します。シェープ ファイルは他のファイル タイプと一緒に配布されます。一般的なファイルには、_.shp_、_.shx_、および _.dbf_ の拡張子が付いています。
以下の表は、シェープ ファイルの各タイプの基本情報および目的を提供しています。
@@ -83,7 +83,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
このトピックに関連する追加情報については、以下のトピックを参照してください。
- - [シェープファイルのバインディング](geo-map-binding-shp-file.md)
+- [シェープファイルのバインディング](geo-map-binding-shp-file.md)
## API リファレンス
diff --git a/docs/xplat/src/content/jp/components/grid-lite/binding.mdx b/docs/xplat/src/content/jp/components/grid-lite/binding.mdx
index 97e85d5de3..4013728028 100644
--- a/docs/xplat/src/content/jp/components/grid-lite/binding.mdx
+++ b/docs/xplat/src/content/jp/components/grid-lite/binding.mdx
@@ -159,7 +159,7 @@ grid.data = [];
-{/* TODO */}
+{/*TODO */}
## その他のリソース
diff --git a/docs/xplat/src/content/jp/components/grid-lite/cell-template.mdx b/docs/xplat/src/content/jp/components/grid-lite/cell-template.mdx
index dcba92443a..a8ef10bc79 100644
--- a/docs/xplat/src/content/jp/components/grid-lite/cell-template.mdx
+++ b/docs/xplat/src/content/jp/components/grid-lite/cell-template.mdx
@@ -35,6 +35,7 @@ column.cellTemplate = (params: IgcCellContext) => { return html`
```
+
@@ -69,6 +70,7 @@ column.cellTemplate = (params) => asCurrency(params.value); // => "€123,456.79
```
+
@@ -93,6 +95,7 @@ column.cellTemplate = ({value, row}) => asCurrency(value * row.data.count); // =
```
+
@@ -107,6 +110,7 @@ const totalCellTemplate = (ctx: IgrCellContext) => (
{asCurrency(ctx.value * ctx.row.data.count)}
);
```
+
@@ -115,6 +119,7 @@ const totalCellTemplate = (ctx: IgrCellContext) => (
```
+
## カスタム DOM テンプレート
@@ -202,7 +207,7 @@ export interface GridLiteCellContext<
-{/* TODO */}
+{/*TODO */}
## その他のリソース
diff --git a/docs/xplat/src/content/jp/components/grid-lite/column-configuration.mdx b/docs/xplat/src/content/jp/components/grid-lite/column-configuration.mdx
index ea202eb9b8..9705ed4219 100644
--- a/docs/xplat/src/content/jp/components/grid-lite/column-configuration.mdx
+++ b/docs/xplat/src/content/jp/components/grid-lite/column-configuration.mdx
@@ -312,7 +312,7 @@ return (
-{/* TODO */}
+{/*TODO */}
## その他のリソース
diff --git a/docs/xplat/src/content/jp/components/grid-lite/filtering.mdx b/docs/xplat/src/content/jp/components/grid-lite/filtering.mdx
index 9553459409..8f7896c36f 100644
--- a/docs/xplat/src/content/jp/components/grid-lite/filtering.mdx
+++ b/docs/xplat/src/content/jp/components/grid-lite/filtering.mdx
@@ -362,6 +362,7 @@ For example here is a Lit-based sample:
}
}
```
+
Here is an example:
@@ -377,6 +378,7 @@ return(
);
```
+
@@ -518,6 +520,7 @@ export type DataPipelineParams = {
type: 'sort' | 'filter';
};
```
+
```typescript
grid.dataPipelineConfiguration = { filter: (params: DataPipelineParams) => T[] | Promise };
@@ -560,6 +563,7 @@ grid.DataPipelineConfiguration = new DataPipelineConfiguration
}
};
```
+
`dataPipelineConfiguration` プロパティを使用すると、フィルター操作が実行されるたびに呼び出されるカスタム フックを提供できます。コールバックには `DataPipelineParams` オブジェクトが渡されます。
@@ -572,7 +576,7 @@ grid.DataPipelineConfiguration = new DataPipelineConfiguration
`DataPipelineConfiguration` プロパティを使用すると、フィルター操作が実行されるたびに呼び出されるカスタム フックを提供できます。コールバックには `DataPipelineParams` オブジェクトが渡されます。
-{/* TODO */}
+{/*TODO */}
## その他のリソース
diff --git a/docs/xplat/src/content/jp/components/grid-lite/header-template.mdx b/docs/xplat/src/content/jp/components/grid-lite/header-template.mdx
index 13431d6dcc..478c3d79e1 100644
--- a/docs/xplat/src/content/jp/components/grid-lite/header-template.mdx
+++ b/docs/xplat/src/content/jp/components/grid-lite/header-template.mdx
@@ -93,7 +93,7 @@ column.headerTemplate = () => html`
-* If there are 6 columns with column width set to `200px` they will fit in our window and all will be visible:
+- If there are 6 columns with column width set to `200px` they will fit in our window and all will be visible:
-* If there are more columns or ones with bigger width that go out of the browser's view, they will all still render. Let's have the same amount of columns but each with column width of `300px`. Since they don't all fit in the browser view area, it will create a scrollbar natively. The next example displays this exact scenario:
+- If there are more columns or ones with bigger width that go out of the browser's view, they will all still render. Let's have the same amount of columns but each with column width of `300px`. Since they don't all fit in the browser view area, it will create a scrollbar natively. The next example displays this exact scenario:
-* If the grid has a parent element of any sort and it doesn't have any overflow set, it will still render all columns visible. Otherwise if the parent element has overflow `auto` or `scroll`, a scrollbar for that parent element will be rendered natively. The parent has bigger height for easier visualization in the following example.
+- If the grid has a parent element of any sort and it doesn't have any overflow set, it will still render all columns visible. Otherwise if the parent element has overflow `auto` or `scroll`, a scrollbar for that parent element will be rendered natively. The parent has bigger height for easier visualization in the following example.
@@ -64,11 +64,11 @@ The grid's `width` can accepts value of `null`, which when set, renders all colu
When the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) `width` input is set to pixels it will set the whole grid size to that value and it will be static. It will not react to any browser resizing or changes in the DOM, although this is not the case for the grid content:
-* When width is set in pixels in order for the grid to render horizontal scrollbar, its content width needs to exceed the specified grid `width`. Let's, for example, have the combined width of the columns exceed `1200px`. In this case a horizontal scrollbar will be rendered.
+- When width is set in pixels in order for the grid to render horizontal scrollbar, its content width needs to exceed the specified grid `width`. Let's, for example, have the combined width of the columns exceed `1200px`. In this case a horizontal scrollbar will be rendered.
-* For scenarios where the grid has a parent element, it depends on the parent styling if it will render scrollbar or not. Everything else related to the grid itself is still retained. If the parent element width is smaller than the grid's width and has overflow style set to `auto` or `scroll`, it will render scrollbar natively. For example, if the parent has `width` set to `1000px` and the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) `width` is still `1200px`, it will look similar to the following illustrations:
+- For scenarios where the grid has a parent element, it depends on the parent styling if it will render scrollbar or not. Everything else related to the grid itself is still retained. If the parent element width is smaller than the grid's width and has overflow style set to `auto` or `scroll`, it will render scrollbar natively. For example, if the parent has `width` set to `1000px` and the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) `width` is still `1200px`, it will look similar to the following illustrations:
@@ -78,15 +78,15 @@ When the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) `
When the `width` of the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) is set to percentages it will size the grid according to the parent element's width. If the parent element does not have width specified the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) will size relative to the browser window.
-* For example, if we set the grid `width` input to `100%` and there is no parent element it will fill 100% of the available width of the browser window. If it is resized the grid will resize as well accordingly.
+- For example, if we set the grid `width` input to `100%` and there is no parent element it will fill 100% of the available width of the browser window. If it is resized the grid will resize as well accordingly.
-* If we set grid's width to `100%` and there is a parent element that has specific width of `1200px`, this will mean that the grid will size relative to that element and his final width will be `1200px`.
+- If we set grid's width to `100%` and there is a parent element that has specific width of `1200px`, this will mean that the grid will size relative to that element and his final width will be `1200px`.
-* If we have a parent element with `width` of `1000px` and have the grid's `width` set to `150%`, the calculated grid width will be `1500px`. In this case the grid will still render fully visible but if we set `overflow: auto` of the parent, that parent will render scrollbar on its own.
+- If we have a parent element with `width` of `1000px` and have the grid's `width` set to `150%`, the calculated grid width will be `1500px`. In this case the grid will still render fully visible but if we set `overflow: auto` of the parent, that parent will render scrollbar on its own.
@@ -102,15 +102,15 @@ By default if no height is defined for the [**@@igxName**]({environment:angularA
The [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) `height` input can accept `null` value, which when set, displays all rows with no scrollbar no matter how many they are. In this case, there is no vertical virtualization since the grid renders all rows anyway.
-* If we have data with 14 rows in this case the grid will render all 14 of them and size the grid so all are visible without any empty space inside the grid.
+- If we have data with 14 rows in this case the grid will render all 14 of them and size the grid so all are visible without any empty space inside the grid.
-* If we have 24 rows instead, the grid will still render all rows but since they are too many, they exceed the browser boundaries. That's why the browser itself will render vertical scrollbar by default so the user can scroll down to the rest of the rows.
+- If we have 24 rows instead, the grid will still render all rows but since they are too many, they exceed the browser boundaries. That's why the browser itself will render vertical scrollbar by default so the user can scroll down to the rest of the rows.
-* If there is a parent element with defined `height`, the grid will still render all rows and not be affected. Let's say the parent has `height` of `650px`. If he has `overflow` set to `auto` or `scroll`, it will render a vertical scrollbar but the grid will still be unaffected:
+- If there is a parent element with defined `height`, the grid will still render all rows and not be affected. Let's say the parent has `height` of `650px`. If he has `overflow` set to `auto` or `scroll`, it will render a vertical scrollbar but the grid will still be unaffected:
@@ -122,15 +122,15 @@ The [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) `heigh
Setting the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) `height` in pixels is more straightforward since the grid will size to that specific size in all occasions similarly to how `width` is set in pixels.
-* If we set, for example, the height `500px` with 4 rows for our data the grid will sit to that size and since 4 rows are not enough to fill the visible area it is expected to have some empty area.
+- If we set, for example, the height `500px` with 4 rows for our data the grid will sit to that size and since 4 rows are not enough to fill the visible area it is expected to have some empty area.
-* If the number of rows exceeds the visible area of the grid when `height` is set to pixels a vertical scrollbar will be rendered. For example, a grid with `500px` height set and 14 rows will be rendered the following way:
+- If the number of rows exceeds the visible area of the grid when `height` is set to pixels a vertical scrollbar will be rendered. For example, a grid with `500px` height set and 14 rows will be rendered the following way:
-* If there is a parent element with `height` defined, unless it has `overflow` set to `auto` or `scroll`, the grid will still be fully visible. Otherwise it will render a scrollbar.
+- If there is a parent element with `height` defined, unless it has `overflow` set to `auto` or `scroll`, the grid will still be fully visible. Otherwise it will render a scrollbar.
@@ -145,25 +145,25 @@ When the parent element does not have defined height, the browser does not assig
Let's have `width` set to `1200px` and the parent element not having any size applied to it:
-* If there are less than 10 rows the grid will try to fit all rows in the `visible area without having an empty space between the last row and the bottom of the visible area. For example, let's have the grid data to consist of 7 rows. The grid will render all 7 rows without vertical scrollbar and without empty space inside the grid.
+- If there are less than 10 rows the grid will try to fit all rows in the `visible area without having an empty space between the last row and the bottom of the visible area. For example, let's have the grid data to consist of 7 rows. The grid will render all 7 rows without vertical scrollbar and without empty space inside the grid.
-* If there are more than 10 rows a vertical scrollbar will be rendered for the rest of the rows and only 10 rows can be visible at any time. In the next example only the row number is increased to 14.
+- If there are more than 10 rows a vertical scrollbar will be rendered for the rest of the rows and only 10 rows can be visible at any time. In the next example only the row number is increased to 14.
-* If we set the parent element height to `800px` and the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) to `100%` height this means that the grid will be sized to 100 percentages of `800px`.
+- If we set the parent element height to `800px` and the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) to `100%` height this means that the grid will be sized to 100 percentages of `800px`.
-* If the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) `height` is set to a number bigger than `100%` and the parent element has height, for the parent to render scrollbar it again needs to have `overflow` set to `auto` or `scroll`. Otherwise the grid will be fully visibly and size relative to the parent size.
+- If the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) `height` is set to a number bigger than `100%` and the parent element has height, for the parent to render scrollbar it again needs to have `overflow` set to `auto` or `scroll`. Otherwise the grid will be fully visibly and size relative to the parent size.
-* If we want the grid to be sized to `100%` from the browser window we would need to set both `body` and parent grid element heights to `100%`. In this case, the parent element can be sized and the grid will size accordingly if the browser is resized.
+- If we want the grid to be sized to `100%` from the browser window we would need to set both `body` and parent grid element heights to `100%`. In this case, the parent element can be sized and the grid will size accordingly if the browser is resized.
@@ -178,23 +178,23 @@ By default when a column doesn't have a specified width it will try to autosize,
When the grid is resized in these scenarios, the column width is also updated to reflect the changes, so it fills any new empty space available.
-* If a column does not have specified `width` and the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) has `width` set to `null`, it will be sized to the minimum of `136px`. This means that for a grid with `width` `null` and 6 columns that don't have width, each column will be sized to `136px`.
+- If a column does not have specified `width` and the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) has `width` set to `null`, it will be sized to the minimum of `136px`. This means that for a grid with `width` `null` and 6 columns that don't have width, each column will be sized to `136px`.
-* If there is available empty space, so that each autosized column will be less than `136px`, all autosized columns will default to `136px` and the grid will render horizontal scrollbar. In the next example let's have 12 autosized columns and the grid `width` set to `1000px`.
+- If there is available empty space, so that each autosized column will be less than `136px`, all autosized columns will default to `136px` and the grid will render horizontal scrollbar. In the next example let's have 12 autosized columns and the grid `width` set to `1000px`.
-* If a column does not have `width` specified, but all other columns have either `width` in pixels or percentages, that column will try to also fill the available space. For example, if we don't have width set to the first column and all other 5 have `width` of `100px`, the first will fill the rest.
+- If a column does not have `width` specified, but all other columns have either `width` in pixels or percentages, that column will try to also fill the available space. For example, if we don't have width set to the first column and all other 5 have `width` of `100px`, the first will fill the rest.
-* Same applies if multiple columns does not have `width` specified, all will divide the available space between each other equally. In the next illustration the first column has `width` set to `100px`.
+- Same applies if multiple columns does not have `width` specified, all will divide the available space between each other equally. In the next illustration the first column has `width` set to `100px`.
@@ -205,11 +205,11 @@ When the grid is resized in these scenarios, the column width is also updated to
When columns have set specific `width` in pixels, they stick to that size, unless they are resized manually. Since the combined `width` of the columns is static, it can be less than the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) `width` or exceed it.
-* If the combined `width` of all columns is less than the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) `width`, there would be an empty are inside the grid that the columns wouldn't be able to fill. This is the expected behavior of the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html). In the next example the columns have `150px` width.
+- If the combined `width` of all columns is less than the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) `width`, there would be an empty are inside the grid that the columns wouldn't be able to fill. This is the expected behavior of the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html). In the next example the columns have `150px` width.
-* If the combined `width` of all columns is bigger than the actual [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) `width`, a horizontal scrollbar will be rendered. In the next example each of the 6 columns have width of `300px` and grid has width of `1200px`, which means that the columns combined have excess of `600px` that goes out of bounds.
+- If the combined `width` of all columns is bigger than the actual [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) `width`, a horizontal scrollbar will be rendered. In the next example each of the 6 columns have width of `300px` and grid has width of `1200px`, which means that the columns combined have excess of `600px` that goes out of bounds.
@@ -218,19 +218,19 @@ When columns have set specific `width` in pixels, they stick to that size, unles
When columns have set `width` in percentages, their size is calculated relatively to the grid size. It is similar to how width in pixels works, but provides also responsiveness to the columns which means that when the grid is resized, the columns also will resize accordingly.
-* If the combined width of all columns is less than `100%`, similarly to when in pixels, there could be an empty area of the grid that the columns do not cover.
+- If the combined width of all columns is less than `100%`, similarly to when in pixels, there could be an empty area of the grid that the columns do not cover.
-* If the combined width is exactly `100%`, the columns will fill all available space of the grid.
+- If the combined width is exactly `100%`, the columns will fill all available space of the grid.
-* If the combined width exceeds `100%` in order for the user to be able to see the columns out of view, a horizontal scrollbar is rendered.
+- If the combined width exceeds `100%` in order for the user to be able to see the columns out of view, a horizontal scrollbar is rendered.
-* If columns are set in percentages and the grid `width` is set to `null`, it would apply`width` of `136px` to each column. That is because the columns cannot be sized relatively to the grid, since it doesn't have `width` itself and relies on its content to be sized when its `width` is `null`. In the following example all 6 columns have `width` set to `50%`:
+- If columns are set in percentages and the grid `width` is set to `null`, it would apply`width` of `136px` to each column. That is because the columns cannot be sized relatively to the grid, since it doesn't have `width` itself and relies on its content to be sized when its `width` is `null`. In the following example all 6 columns have `width` set to `50%`:
@@ -238,7 +238,7 @@ When columns have set `width` in percentages, their size is calculated relativel
---
### Child Grid Sizing
-Because the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) usually contains children, they can also have their `width` and `height` specified, in order to accommodate different scenarios. Since the children are defined using `row island` template, this means that all children in the same level and island will have the same `width` and `height` property applied to them.
+Because the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) usually contains children, they can also have their `width` and `height` specified, in order to accommodate different scenarios. Since the children are defined using `row island` template, this means that all children in the same level and island will have the same `width` and `height` property applied to them.
#### Width
@@ -261,18 +261,18 @@ The difference is that for the child grid, when `height` is set to percentages,
## API References
-* [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
-@@if (igxName !== 'IgxTreeGrid') {* [IgxGridRow API]({environment:angularApiUrl}/classes/igxgridrow.html)}@@if (igxName === 'IgxTreeGrid') {* [IgxTreeGridRow API]({environment:angularApiUrl}/classes/igxtreegridrow.html)}
-* [@@igxNameComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme)
+- [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
+@@if (igxName !== 'IgxTreeGrid') {_[IgxGridRow API]({environment:angularApiUrl}/classes/igxgridrow.html)}@@if (igxName === 'IgxTreeGrid') {_ [IgxTreeGridRow API]({environment:angularApiUrl}/classes/igxtreegridrow.html)}
+- [@@igxNameComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme)
## Additional Resources
-* [@@igComponent overview](@@igMainTopic.md)
-* [Virtualization and Performance](virtualization.md)
+- [@@igComponent overview](@@igMainTopic.md)
+- [Virtualization and Performance](virtualization.md)
Our community is active and always welcoming to new ideas.
-* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
diff --git a/docs/angular/src/content/kr/grids_templates/sorting.md b/docs/angular/src/content/kr/grids_templates/sorting.md
index 990c3f2e5c..329b511895 100644
--- a/docs/angular/src/content/kr/grids_templates/sorting.md
+++ b/docs/angular/src/content/kr/grids_templates/sorting.md
@@ -28,24 +28,24 @@ In Ignite UI for Angular @@igComponent, data sorting is enabled on a per-column
@@if (igxName === 'IgxGrid') {
-
`
}, false);
+
```
@@ -323,6 +324,7 @@ public webGridFilterAltIconTemplate = (ctx: IgcCellTemplateContext) => {
return html`
- 
+ 
- 
+