IgniteUI · pamelabrasil · May 29, 2019 · Apr 9, 2019 · Apr 10, 2019 · Apr 10, 2019
diff --git a/en/.gitignore b/en/.gitignore
@@ -21,6 +21,7 @@ components/hierarchicalgrid/*.md
 # All tree grid specific files that should NOT be ignored:
 !components/treegrid/tree_grid.md
 !components/treegrid/aggregations.md
+!components/treegrid/load_on_demand.md
 
 # All hierarchical grid specific files that should NOT be ignored:
 !components/hierarchicalgrid/hierarchical_grid.md

diff --git a/en/components/bulletgraph.md b/en/components/bulletgraph.md
@@ -31,14 +31,12 @@ The features of the bullet graph include configurable orientation and direction,
 
 When installing the gauge package, the core package must also be installed.
 
-**npm install igniteui-angular-gauges igniteui-angular-core**
+-   **npm install --save igniteui-angular-core**
+-   **npm install --save igniteui-angular-gauges**
 
-The bullet graph is exported as an `NgModule`, you need to import the
-`IgxBulletGraphModule` inside your `AppModule`:
+### Required Modules
 
-<!-- -->
-
-<!-- -->
+The `IgxBulletGraph` requires the following modules:
 
 ```typescript
 // app.module.ts
@@ -109,7 +107,7 @@ Performance value is the primary measure displayed by the component and it is vi
 ```
 
 <div class="sample-container loading" style="height: 125px">
-    <iframe id="bullet-graph-measures-iframe" data-src='{environment:demosBaseUrl}/gauges/bullet-graph-measures' width="100%" height="100%" seamless="" frameBorder="0" class="lazyload"></iframe>
+    <iframe id="bullet-graph-measures-iframe" src='{environment:demosBaseUrl}/gauges/bullet-graph-measures' width="100%" height="100%" seamless="" frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
 </div>
 <div>
     <button data-localize="stackblitz" disabled class="stackblitz-btn"   data-iframe-id="bullet-graph-measures-iframe" data-demos-base-url="{environment:demosBaseUrl}">View on StackBlitz
@@ -146,7 +144,7 @@ The ranges are visual elements that highlight a specified range of values on a s
 ```
 
 <div class="sample-container loading" style="height: 125px">
-    <iframe id="bullet-graph-ranges-iframe" data-src='{environment:demosBaseUrl}/gauges/bullet-graph-ranges' width="100%" height="100%" seamless="" frameBorder="0" class="lazyload"></iframe>
+    <iframe id="bullet-graph-ranges-iframe" src='{environment:demosBaseUrl}/gauges/bullet-graph-ranges' width="100%" height="100%" seamless="" frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
 </div>
 <div>
     <button data-localize="stackblitz" disabled class="stackblitz-btn"   data-iframe-id="bullet-graph-ranges-iframe" data-demos-base-url="{environment:demosBaseUrl}">View on StackBlitz
@@ -181,7 +179,7 @@ The tick marks serve as a visual division of the scale into intervals in order t
 ```
 
 <div class="sample-container loading" style="height: 125px">
-    <iframe id="bullet-graph-tickmarks-iframe" data-src='{environment:demosBaseUrl}/gauges/bullet-graph-tickmarks' width="100%" height="100%" seamless="" frameBorder="0" class="lazyload"></iframe>
+    <iframe id="bullet-graph-tickmarks-iframe" src='{environment:demosBaseUrl}/gauges/bullet-graph-tickmarks' width="100%" height="100%" seamless="" frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
 </div>
 <div>
     <button data-localize="stackblitz" disabled class="stackblitz-btn"   data-iframe-id="bullet-graph-tickmarks-iframe" data-demos-base-url="{environment:demosBaseUrl}">View on StackBlitz
@@ -207,7 +205,7 @@ The labels indicate the measures on the scale.
 ```
 
 <div class="sample-container loading" style="height: 125px">
-    <iframe id="bullet-graph-labels-iframe" data-src='{environment:demosBaseUrl}/gauges/bullet-graph-labels' width="100%" height="100%" seamless="" frameBorder="0" class="lazyload"></iframe>
+    <iframe id="bullet-graph-labels-iframe" src='{environment:demosBaseUrl}/gauges/bullet-graph-labels' width="100%" height="100%" seamless="" frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
 </div>
 <div>
     <button data-localize="stackblitz" disabled class="stackblitz-btn"   data-iframe-id="bullet-graph-labels-iframe" data-demos-base-url="{environment:demosBaseUrl}">View on StackBlitz
@@ -232,7 +230,7 @@ The backing element represents background and border of the bullet graph compone
 ```
 
 <div class="sample-container loading" style="height: 125px">
-    <iframe id="bullet-graph-background-iframe" data-src='{environment:demosBaseUrl}/gauges/bullet-graph-background' width="100%" height="100%" seamless="" frameBorder="0" class="lazyload"></iframe>
+    <iframe id="bullet-graph-background-iframe" src='{environment:demosBaseUrl}/gauges/bullet-graph-background' width="100%" height="100%" seamless="" frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
 </div>
 <div>
     <button data-localize="stackblitz" disabled class="stackblitz-btn"   data-iframe-id="bullet-graph-background-iframe" data-demos-base-url="{environment:demosBaseUrl}">View on StackBlitz
@@ -258,7 +256,7 @@ The scale is visual element that highlights the full range of values in the gaug
 ```
 
 <div class="sample-container loading" style="height: 125px">
-    <iframe id="bullet-graph-scale-iframe" data-src='{environment:demosBaseUrl}/gauges/bullet-graph-scale' width="100%" height="100%" seamless="" frameBorder="0" class="lazyload"></iframe>
+    <iframe id="bullet-graph-scale-iframe" src='{environment:demosBaseUrl}/gauges/bullet-graph-scale' width="100%" height="100%" seamless="" frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
 </div>
 <div>
     <button data-localize="stackblitz" disabled class="stackblitz-btn"   data-iframe-id="bullet-graph-scale-iframe" data-demos-base-url="{environment:demosBaseUrl}">View on StackBlitz

diff --git a/en/components/button.md b/en/components/button.md
@@ -132,6 +132,55 @@ Icon results:
 | `fab` | Floating action button type. Circular with secondary theme color for background. |
 | `icon` | This is the simplest of button types. Use it whenever you need to use an icon as button. |
 
+### Display Density
+
+We can allow the user to choose the display density of the [`igxButton`]({environment:angularApiUrl}/classes/igxbuttondirective.html) by using its [`displayDensity`]({environment:angularApiUrl}/classes/igxbuttondirective.html#displaydensity) input. We will do this by importing the `IgxButtonGroupModule` and using the [**IgxButtonGroup**](buttonGroup.md) to display all density values. This way whenever one gets selected, we will update our own **density** property that is bound to the [`displayDensity`]({environment:angularApiUrl}/classes/igxbuttondirective.html#displaydensity) of the button.
+
+> [!NOTE] The `icon` type button does not introduce visual changes for different display density values.
+
+```typescript
+// app.module.ts
+...
+import { IgxButtonGroupModule } from 'igniteui-angular';
+@NgModule({
+    imports: [..., IgxButtonGroupModule]
+})
+```
+
+```html
+<!--buttons-density.component.html-->
+
+<igx-buttongroup [values]="displayDensities" (onSelect)="selectDensity($event)"></igx-buttongroup>
+...
+<button igxButton="flat" [displayDensity]="density">Flat</button>
+```
+
+```typescript
+// buttons-density.component.ts
+public density = "comfortable";
+public displayDensities;
+public ngOnInit() {
+    this.displayDensities = [
+        { label: 'comfortable', selected: this.density === 'comfortable', togglable: true },
+        { label: 'cosy', selected: this.density === 'cosy', togglable: true },
+        { label: 'compact', selected: this.density === 'compact', togglable: true }
+    ];
+}
+public selectDensity(event) {
+    this.density = this.displayDensities[event.index].label;
+}
+```
+
+And the final result:
+
+<div class="sample-container loading" style="height: 300px">
+    <iframe id="buttons-display-density-iframe" seamless width="100%" height="100%" frameborder="0" src="{environment:demosBaseUrl}/data-entries/buttons-display-density" onload="onSampleIframeContentLoaded(this);">
+</div>
+<div>
+<button data-localize="stackblitz" disabled class="stackblitz-btn" data-iframe-id="buttons-display-density-iframe" data-demos-base-url="{environment:demosBaseUrl}">view on stackblitz</button>
+</div>
+<div class="divider--half"></div>
+
 ### API References
 <div class="divider--half"></div>
 

diff --git a/en/components/categorychart.md b/en/components/categorychart.md
@@ -1,7 +1,7 @@
 ---
-title: Category Chart | Data Visualization Tools | Ignite UI for Angular | Infragistics 
+title: Category Chart | Data Visualization Tools | Ignite UI for Angular | Infragistics
 _description: Use the category chart component to analyze and  automatically choose the best chart type to represent data. Learn about our chart types for visualization.
-_keywords: category chart, Ignite UI for Angular, infragistics 
+_keywords: category chart, Ignite UI for Angular, infragistics
 ---
 
 ## Category Chart
@@ -43,14 +43,12 @@ Another example of the intuitive behavior of the category chart component is tha
 
 When installing the chart package, the core package must also be installed.
 
-**npm install igniteui-angular-charts igniteui-angular-core**
+-   **npm install --save igniteui-angular-core**
+-   **npm install --save igniteui-angular-charts**
 
-The category chart is exported as an `NgModule`, you need to import the
-`IgxCategoryChartModule` inside your `AppModule`:
+### Required Modules
 
-<!-- -->
-
-<!-- -->
+The `IgxCategoryChart` requires the following modules:
 
 ```typescript
 // app.module.ts

diff --git a/en/components/datachart.md b/en/components/datachart.md
@@ -25,14 +25,12 @@ The `IgxDataChart` is a charting component that provides modular design of axis,
 
 When installing the chart package, the core package must also be installed.
 
-**npm install igniteui-angular-charts igniteui-angular-core**
+-   **npm install --save igniteui-angular-core**
+-   **npm install --save igniteui-angular-charts**
 
-The data chart is exported as an `NgModule`, you need to import the
-`IgxDataChartCoreModule` inside your `AppModule`:
+### Required Modules
 
-<!-- -->
-
-<!-- -->
+The `IgxDataChart` requires the following modules:
 
 ```typescript
 // data chart's modules required for all series:

diff --git a/en/components/datachart_axis_scales.md b/en/components/datachart_axis_scales.md
@@ -14,7 +14,7 @@ The Data Chart is ... TODO ...
     <iframe id="data-chart-overview-iframe" src='{environment:demosBaseUrl}/charts/data-chart-overview' width="100%" height="100%" seamless frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
 </div>
 <div>
-    <button data-localize="stackblitz" disabled class="stackblitz-btn" data-iframe-id="financial-chart-overview-iframe" data-demos-base-url="{environment:demosBaseUrl}">View on StackBlitz
+    <button data-localize="stackblitz" disabled class="stackblitz-btn" data-iframe-id="data-chart-overview-iframe" data-demos-base-url="{environment:demosBaseUrl}">View on StackBlitz
     </button>
 </div>
 

diff --git a/en/components/datachart_axis_types.md b/en/components/datachart_axis_types.md
@@ -14,7 +14,7 @@ In the `IgxDataChart` control, an axis provides base properties for specifying a
     <iframe id="data-chart-overview-iframe" src='{environment:demosBaseUrl}/charts/data-chart-axis-types' width="100%" height="100%" seamless frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
 </div>
 <div>
-    <button data-localize="stackblitz" disabled class="stackblitz-btn" data-iframe-id="data-chart-axis-types-iframe" data-demos-base-url="{environment:demosBaseUrl}">View on StackBlitz
+    <button data-localize="stackblitz" disabled class="stackblitz-btn" data-iframe-id="data-chart-overview-iframe" data-demos-base-url="{environment:demosBaseUrl}">View on StackBlitz
     </button>
 </div>
 

diff --git a/en/components/datachart_chart_performance.md b/en/components/datachart_chart_performance.md
@@ -14,7 +14,7 @@ The Data Chart is ... TODO ...
     <iframe id="data-chart-overview-iframe" src='{environment:demosBaseUrl}/charts/data-chart-overview' width="100%" height="100%" seamless frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
 </div>
 <div>
-    <button data-localize="stackblitz" disabled class="stackblitz-btn" data-iframe-id="financial-chart-overview-iframe" data-demos-base-url="{environment:demosBaseUrl}">View on StackBlitz
+    <button data-localize="stackblitz" disabled class="stackblitz-btn" data-iframe-id="data-chart-overview-iframe" data-demos-base-url="{environment:demosBaseUrl}">View on StackBlitz
     </button>
 </div>
 

diff --git a/en/components/datachart_chart_synchronization.md b/en/components/datachart_chart_synchronization.md
@@ -14,7 +14,7 @@ The Data Chart is ... TODO ...
     <iframe id="data-chart-overview-iframe" src='{environment:demosBaseUrl}/charts/data-chart-overview' width="100%" height="100%" seamless frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
 </div>
 <div>
-    <button data-localize="stackblitz" disabled class="stackblitz-btn" data-iframe-id="financial-chart-overview-iframe" data-demos-base-url="{environment:demosBaseUrl}">View on StackBlitz
+    <button data-localize="stackblitz" disabled class="stackblitz-btn" data-iframe-id="data-chart-overview-iframe" data-demos-base-url="{environment:demosBaseUrl}">View on StackBlitz
     </button>
 </div>
 

diff --git a/en/components/datachart_data_triangulation.md b/en/components/datachart_data_triangulation.md
@@ -14,7 +14,7 @@ The Data Chart is ... TODO ...
     <iframe id="data-chart-overview-iframe" src='{environment:demosBaseUrl}/charts/data-chart-overview' width="100%" height="100%" seamless frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
 </div>
 <div>
-    <button data-localize="stackblitz" disabled class="stackblitz-btn" data-iframe-id="financial-chart-overview-iframe" data-demos-base-url="{environment:demosBaseUrl}">View on StackBlitz
+    <button data-localize="stackblitz" disabled class="stackblitz-btn" data-iframe-id="data-chart-overview-iframe" data-demos-base-url="{environment:demosBaseUrl}">View on StackBlitz
     </button>
 </div>
 

diff --git a/en/components/datachart_series_animations.md b/en/components/datachart_series_animations.md
@@ -14,7 +14,7 @@ The Data Chart is ... TODO ...
     <iframe id="data-chart-overview-iframe" src='{environment:demosBaseUrl}/charts/data-chart-overview' width="100%" height="100%" seamless frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
 </div>
 <div>
-    <button data-localize="stackblitz" disabled class="stackblitz-btn" data-iframe-id="financial-chart-overview-iframe" data-demos-base-url="{environment:demosBaseUrl}">View on StackBlitz
+    <button data-localize="stackblitz" disabled class="stackblitz-btn" data-iframe-id="data-chart-overview-iframe" data-demos-base-url="{environment:demosBaseUrl}">View on StackBlitz
     </button>
 </div>
 

diff --git a/en/components/datachart_series_errorbars.md b/en/components/datachart_series_errorbars.md
@@ -14,7 +14,7 @@ The Data Chart is ... TODO ...
     <iframe id="data-chart-overview-iframe" src='{environment:demosBaseUrl}/charts/data-chart-overview' width="100%" height="100%" seamless frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
 </div>
 <div>
-    <button data-localize="stackblitz" disabled class="stackblitz-btn" data-iframe-id="financial-chart-overview-iframe" data-demos-base-url="{environment:demosBaseUrl}">View on StackBlitz
+    <button data-localize="stackblitz" disabled class="stackblitz-btn" data-iframe-id="data-chart-overview-iframe" data-demos-base-url="{environment:demosBaseUrl}">View on StackBlitz
     </button>
 </div>
 

diff --git a/en/components/datachart_series_requirements.md b/en/components/datachart_series_requirements.md
@@ -14,7 +14,7 @@ The Data Chart is ... TODO ...
     <iframe id="data-chart-overview-iframe" src='{environment:demosBaseUrl}/charts/data-chart-overview' width="100%" height="100%" seamless frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
 </div>
 <div>
-    <button data-localize="stackblitz" disabled class="stackblitz-btn" data-iframe-id="financial-chart-overview-iframe" data-demos-base-url="{environment:demosBaseUrl}">View on StackBlitz
+    <button data-localize="stackblitz" disabled class="stackblitz-btn" data-iframe-id="data-chart-overview-iframe" data-demos-base-url="{environment:demosBaseUrl}">View on StackBlitz
     </button>
 </div>
 

diff --git a/en/components/datachart_series_types_category.md b/en/components/datachart_series_types_category.md
@@ -70,9 +70,7 @@ this.state = { dataSource: SampleCategoryData.create() }
 
 ### Required Modules
 
-<!-- Angular -->
-
-In order to use category series, you need to import the following modules in your app during load and register data chart modules:
+The category series require the following modules:
 
 ```typescript
 // axis' modules:

diff --git a/en/components/datachart_series_types_financial.md b/en/components/datachart_series_types_financial.md
@@ -92,9 +92,7 @@ this.state = { dataSource: SampleFinancialData.create() }
 
 ### Required Modules
 
-<!-- Angular -->
-
-In order to use financial series, you need to import the following modules in your app during load and register data chart modules:
+The financial series require the following modules:
 
 ```typescript
 // axis' modules:

diff --git a/en/components/datachart_series_types_polar.md b/en/components/datachart_series_types_polar.md
@@ -64,9 +64,7 @@ this.state = { dataSource: SamplePolarData.create() }
 
 ### Required Modules
 
-<!-- Angular -->
-
-In order to use polar series, you need to import the following modules in your app during load and register data chart modules:
+In order to use polar series, you need to import the following modules in your app during load:
 
 ```typescript
 // axis' modules:

diff --git a/en/components/datachart_series_types_radial.md b/en/components/datachart_series_types_radial.md
@@ -62,7 +62,7 @@ this.state = { dataSource: SampleRadialData.create() }
 
 <!-- Angular -->
 
-In order to use radial series, you need to import the following modules in your app during load and register data chart modules:
+In order to use radial series, you need to import the following modules in your app during load:
 
 ```typescript
 // axis' modules:

diff --git a/en/components/datachart_series_types_range.md b/en/components/datachart_series_types_range.md
@@ -55,9 +55,7 @@ this.state = { dataSource: SampleRangeData.create() }
 
 ### Required Modules
 
-<!-- Angular -->
-
-In order to use range series, you need to import the following modules in your app during load and register data chart modules:
+In order to use range series, you need to import the following modules in your app during load:
 
 ```typescript
 // in app.module.ts file

diff --git a/en/components/datachart_series_types_scatter_area.md b/en/components/datachart_series_types_scatter_area.md
@@ -40,8 +40,6 @@ this.state = { dataSource: SampleScatterData.create() }
 
 ### Required Modules
 
-<!-- Angular -->
-
 The scatter area series requires the following modules:
 
 ```typescript

diff --git a/en/components/datachart_series_types_scatter_bubble.md b/en/components/datachart_series_types_scatter_bubble.md
@@ -41,8 +41,6 @@ this.state = { dataSource: SampleScatterStats.getCountries() }
 
 ### Required Modules
 
-<!-- Angular -->
-
 The scatter bubble series requires the following modules:
 
 ```typescript

diff --git a/en/components/datachart_series_types_scatter_contour.md b/en/components/datachart_series_types_scatter_contour.md
@@ -41,9 +41,7 @@ this.state = { dataSource: SampleScatterData.create() }
 
 ### Required Modules
 
-<!-- Angular -->
-
-The scatter area series requires the following modules:
+The scatter contour series requires the following modules:
 
 ```typescript
 // axis' modules:

diff --git a/en/components/datachart_series_types_scatter_hd.md b/en/components/datachart_series_types_scatter_hd.md
@@ -14,7 +14,7 @@ The Data Chart is ... TODO ...
     <iframe id="data-chart-overview-iframe" src='{environment:demosBaseUrl}/charts/data-chart-overview' width="100%" height="100%" seamless frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
 </div>
 <div>
-    <button data-localize="stackblitz" disabled class="stackblitz-btn" data-iframe-id="financial-chart-overview-iframe" data-demos-base-url="{environment:demosBaseUrl}">View on StackBlitz
+    <button data-localize="stackblitz" disabled class="stackblitz-btn" data-iframe-id="data-chart-overview-iframe" data-demos-base-url="{environment:demosBaseUrl}">View on StackBlitz
     </button>
 </div>
 

diff --git a/en/components/datachart_series_types_scatter_marker.md b/en/components/datachart_series_types_scatter_marker.md
@@ -56,8 +56,6 @@ this.state = { dataSource: SampleScatterStats.getCountries() }
 
 ### Required Modules
 
-<!-- Angular -->
-
 The scatter marker series requires the following modules:
 
 ```typescript

diff --git a/en/components/datachart_series_types_shape.md b/en/components/datachart_series_types_shape.md
@@ -56,9 +56,7 @@ this.state = { dataSource: SampleShapeData.create() }
 
 ### Required Modules
 
-<!-- Angular -->
-
-In order to use scatter shape series, you need to import the following modules in your app during load and register data chart modules:
+The scatter polygon series requires the following modules:
 
 ```typescript
 // axis' modules: