From 5360c19fa3b80cea83a28f2248bfd78e7278e352 Mon Sep 17 00:00:00 2001
From: tfsbuild <tfsbuild@infragistics.com>
Date: Wed, 13 Dec 2023 18:04:13 +0200
Subject: [PATCH] Adding changes from build
 igniteui-xplat-examples-output+PRs_2023.12.13.1

---
 .../annotations-all/src/app.component.ts      |  41 ++++---
 .../annotations-callouts/src/app.component.ts |  27 +++--
 .../src/app.component.ts                      |  33 ++---
 .../annotations-custom/src/app.component.ts   |  27 +++--
 .../src/app.component.ts                      |  27 +++--
 .../src/app.component.ts                      |  33 ++---
 .../src/app.component.ts                      |  23 ++--
 .../src/app.component.ts                      |  19 +--
 .../area-chart-styling/src/app.component.ts   |  23 ++--
 .../axis-gap/src/app.component.ts             |  33 ++---
 .../axis-gridlines/src/app.component.ts       |  41 ++++---
 .../axis-inverted/src/app.component.ts        |  33 ++---
 .../axis-labels/src/app.component.ts          |  41 ++++---
 .../axis-locations/src/app.component.ts       |  33 ++---
 .../axis-options/src/app.component.ts         |  19 +--
 .../axis-overlap/src/app.component.ts         |  33 ++---
 .../axis-range/src/app.component.ts           |  37 +++---
 .../axis-tickmarks/src/app.component.ts       |  33 ++---
 .../axis-titles/src/app.component.ts          |  23 ++--
 .../src/app.component.ts                      |  23 ++--
 .../src/app.component.ts                      |  19 +--
 .../column-chart-styling/src/app.component.ts |  23 ++--
 .../src/app.component.ts                      |  33 ++---
 .../custom-selection/src/app.component.ts     |  64 +++++-----
 .../data-aggregations/src/app.component.ts    |  37 +++---
 .../src/app.component.ts                      |  23 ++--
 .../data-legend/src/app.component.ts          |  23 ++--
 .../src/app.component.ts                      |  19 +--
 .../src/app.component.ts                      |  37 +++---
 .../data-tooltip/src/app.component.ts         |  19 +--
 .../format-specifiers/src/app.component.ts    |  53 ++++----
 .../src/app.component.ts                      |  23 ++--
 .../src/app.component.ts                      |  19 +--
 .../line-chart-styling/src/app.component.ts   |  23 ++--
 .../marker-options/src/app.component.ts       |  43 ++++---
 .../overview/src/app.component.ts             |  23 ++--
 .../src/app.component.ts                      |  23 ++--
 .../src/app.component.ts                      |  19 +--
 .../point-chart-styling/src/app.component.ts  |  23 ++--
 .../src/app.component.ts                      |  23 ++--
 .../src/app.component.ts                      |  19 +--
 .../spline-area-styling/src/app.component.ts  |  23 ++--
 .../src/app.component.ts                      |  23 ++--
 .../spline-single-source/src/app.component.ts |  19 +--
 .../spline-styling/src/app.component.ts       |  23 ++--
 .../src/app.component.ts                      |  23 ++--
 .../src/app.component.ts                      |  19 +--
 .../step-area-styling/src/app.component.ts    |  23 ++--
 .../src/app.component.ts                      |  23 ++--
 .../src/app.component.ts                      |  19 +--
 .../step-line-styling/src/app.component.ts    |  23 ++--
 .../value-lines/src/app.component.ts          |  43 ++++---
 .../annotations-custom/src/app.component.ts   |  49 ++++----
 .../src/app.component.ts                      |  47 ++++----
 .../axis-label-rotation/src/app.component.ts  |  43 ++++---
 .../axis-min-max-gap/src/app.component.ts     |  39 +++---
 .../src/app.component.ts                      |  47 ++++----
 .../src/app.component.ts                      |  59 ++++-----
 .../src/app.component.ts                      |  39 +++---
 .../bar-chart-styling/src/app.component.ts    |  43 ++++---
 .../src/app.component.ts                      |  35 +++---
 .../dash-array-axes/src/app.component.ts      |  43 ++++---
 .../dash-array-series/src/app.component.ts    |  43 ++++---
 .../dash-array-tickmarks/src/app.component.ts |  31 +++--
 .../dash-array-trendline/src/app.component.ts |  31 +++--
 .../data-legend/src/app.component.ts          |  53 ++++----
 .../data-tooltip/src/app.component.ts         |  49 ++++----
 .../src/app.component.ts                      |  35 +++---
 .../format-specifiers/src/app.component.ts    |  73 +++++------
 .../src/app.component.ts                      |  39 +++---
 .../polar-area-chart/src/app.component.ts     |  43 ++++---
 .../polar-line-chart/src/app.component.ts     |  43 ++++---
 .../polar-scatter-chart/src/app.component.ts  |  39 +++---
 .../src/app.component.ts                      |  39 +++---
 .../polar-spline-chart/src/app.component.ts   |  39 +++---
 .../src/app.component.ts                      |  39 +++---
 .../radial-area-chart/src/app.component.ts    |  43 ++++---
 .../radial-column-chart/src/app.component.ts  |  43 ++++---
 .../radial-line-chart/src/app.component.ts    |  43 ++++---
 .../radial-pie-chart/src/app.component.ts     |  43 ++++---
 .../range-area-chart/src/app.component.ts     |  43 ++++---
 .../range-column-chart/src/app.component.ts   |  43 ++++---
 .../scatter-line-chart/src/app.component.ts   |  45 ++++---
 .../scatter-point-chart/src/app.component.ts  |  41 ++++---
 .../scatter-spline-chart/src/app.component.ts |  45 ++++---
 .../src/app.component.ts                      |  59 ++++-----
 .../src/app.component.ts                      |  55 +++++----
 .../src/app.component.ts                      |  51 ++++----
 .../src/app.component.ts                      |  59 ++++-----
 .../src/app.component.ts                      |  59 ++++-----
 .../src/app.component.ts                      |  59 ++++-----
 .../stacked-area-chart/src/app.component.ts   |  59 ++++-----
 .../stacked-bar-chart/src/app.component.ts    |  55 +++++----
 .../stacked-column-chart/src/app.component.ts |  59 ++++-----
 .../stacked-line-chart/src/app.component.ts   |  59 ++++-----
 .../src/app.component.ts                      |  59 ++++-----
 .../stacked-spline-chart/src/app.component.ts |  59 ++++-----
 .../transition-event/src/app.component.ts     |  55 +++++----
 .../waterfall-chart/src/app.component.ts      |  35 +++---
 .../legend/src/app.component.ts               |  27 +++--
 .../overview/src/app.component.ts             |  23 ++--
 .../doughnut-chart/rings/src/app.component.ts |  27 +++--
 .../src/app.component.ts                      |  23 ++--
 .../src/app.component.ts                      |  23 ++--
 .../data-legend/src/app.component.ts          |  23 ++--
 .../src/app.component.ts                      |  19 +--
 .../src/app.component.ts                      |  19 +--
 .../data-tooltip/src/app.component.ts         |  19 +--
 .../format-specifiers/src/app.component.ts    |  79 ++++++------
 .../scrollbars/src/app.component.ts           |  19 +--
 .../pie-chart/legend/src/app.component.ts     |  23 ++--
 .../pie-chart/others/src/app.component.ts     |  23 ++--
 .../pie-chart/overview/src/app.component.ts   |  23 ++--
 .../pie-chart/styling/src/app.component.ts    |  23 ++--
 .../display-area/src/app.component.ts         |  19 +--
 .../display-column/src/app.component.ts       |  19 +--
 .../display-lines/src/app.component.ts        |  19 +--
 .../display-winloss/src/app.component.ts      |  19 +--
 .../sparkline/markers/src/app.component.ts    |  47 ++++----
 .../normal-range/src/app.component.ts         |  37 +++---
 .../sparkline/trendlines/src/app.component.ts |  27 +++--
 .../unknown-values/src/app.component.ts       |  27 +++--
 .../src/app.component.ts                      |  27 +++--
 .../src/app.component.ts                      |  47 ++++----
 .../charts/toolbar/custom-tool/.stackblitzrc  |   1 +
 .../charts/toolbar/custom-tool/angular.json   | 106 ++++++++++++++++
 .../charts/toolbar/custom-tool/package.json   |  45 +++++++
 .../toolbar/custom-tool/sandbox.config.json   |   5 +
 .../custom-tool/src/app.component.html        |  14 +++
 .../custom-tool/src/app.component.scss        |   3 +
 .../toolbar/custom-tool/src/app.component.ts  |  34 ++++++
 .../toolbar/custom-tool/src/app.module.ts     |  25 ++++
 .../src/config/tsconfig-es5.app.json          |   6 +
 .../custom-tool/src/config/tsconfig.app.json  |  12 ++
 .../custom-tool/src/config/tsconfig.base.json |  24 ++++
 .../custom-tool/src/config/tsconfig.spec.json |  19 +++
 .../src/config/tsconfig.worker.json           |  14 +++
 .../src/environments/environment.prod.ts      |   3 +
 .../src/environments/environment.ts           |  16 +++
 .../charts/toolbar/custom-tool/src/index.html |  23 ++++
 .../charts/toolbar/custom-tool/src/main.ts    |  15 +++
 .../toolbar/custom-tool/src/polyfills.ts      |  65 ++++++++++
 .../toolbar/custom-tool/src/styles.scss       |   9 ++
 .../toolbar/custom-tool/src/typings.d.ts      |   5 +
 .../charts/toolbar/custom-tool/tsconfig.json  |  21 ++++
 .../charts/toolbar/custom-tool/tslint.json    |  31 +++++
 .../src/app.component.ts                      | 114 +++++++++---------
 .../src/app.component.ts                      |  35 +++---
 .../toolbar/theming/src/app.component.ts      |  39 +++---
 .../tree-map/layout/src/app.component.ts      |  41 ++++---
 .../tree-map/overview/src/app.component.ts    |  19 +--
 .../tree-map/styling/src/app.component.ts     |  51 ++++----
 152 files changed, 3141 insertions(+), 1997 deletions(-)
 create mode 100644 samples/charts/toolbar/custom-tool/.stackblitzrc
 create mode 100644 samples/charts/toolbar/custom-tool/angular.json
 create mode 100644 samples/charts/toolbar/custom-tool/package.json
 create mode 100644 samples/charts/toolbar/custom-tool/sandbox.config.json
 create mode 100644 samples/charts/toolbar/custom-tool/src/app.component.html
 create mode 100644 samples/charts/toolbar/custom-tool/src/app.component.scss
 create mode 100644 samples/charts/toolbar/custom-tool/src/app.component.ts
 create mode 100644 samples/charts/toolbar/custom-tool/src/app.module.ts
 create mode 100644 samples/charts/toolbar/custom-tool/src/config/tsconfig-es5.app.json
 create mode 100644 samples/charts/toolbar/custom-tool/src/config/tsconfig.app.json
 create mode 100644 samples/charts/toolbar/custom-tool/src/config/tsconfig.base.json
 create mode 100644 samples/charts/toolbar/custom-tool/src/config/tsconfig.spec.json
 create mode 100644 samples/charts/toolbar/custom-tool/src/config/tsconfig.worker.json
 create mode 100644 samples/charts/toolbar/custom-tool/src/environments/environment.prod.ts
 create mode 100644 samples/charts/toolbar/custom-tool/src/environments/environment.ts
 create mode 100644 samples/charts/toolbar/custom-tool/src/index.html
 create mode 100644 samples/charts/toolbar/custom-tool/src/main.ts
 create mode 100644 samples/charts/toolbar/custom-tool/src/polyfills.ts
 create mode 100644 samples/charts/toolbar/custom-tool/src/styles.scss
 create mode 100644 samples/charts/toolbar/custom-tool/src/typings.d.ts
 create mode 100644 samples/charts/toolbar/custom-tool/tsconfig.json
 create mode 100644 samples/charts/toolbar/custom-tool/tslint.json

diff --git a/samples/charts/category-chart/annotations-all/src/app.component.ts b/samples/charts/category-chart/annotations-all/src/app.component.ts
index 1e3593f54..b86dc3256 100644
--- a/samples/charts/category-chart/annotations-all/src/app.component.ts
+++ b/samples/charts/category-chart/annotations-all/src/app.component.ts
@@ -14,25 +14,22 @@ defineAllComponents();
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
-
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("propertyEditor", { static: true } )
-    private propertyEditor: IgxPropertyEditorPanelComponent
-    @ViewChild("crosshairsDisplayModeEditor", { static: true } )
-    private crosshairsDisplayModeEditor: IgxPropertyEditorPropertyDescriptionComponent
-    @ViewChild("highlightingModeEditor", { static: true } )
-    private highlightingModeEditor: IgxPropertyEditorPropertyDescriptionComponent
-    @ViewChild("calloutsVisibleEditor", { static: true } )
-    private calloutsVisibleEditor: IgxPropertyEditorPropertyDescriptionComponent
-    @ViewChild("finalValueAnnotationsEditor", { static: true } )
-    private finalValueAnnotationsEditor: IgxPropertyEditorPropertyDescriptionComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxCategoryChartComponent
 
+export class AppComponent implements AfterViewInit
+{
+
+	@ViewChild("propertyEditor", { static: true } )
+	private propertyEditor: IgxPropertyEditorPanelComponent
+	@ViewChild("crosshairsDisplayModeEditor", { static: true } )
+	private crosshairsDisplayModeEditor: IgxPropertyEditorPropertyDescriptionComponent
+	@ViewChild("highlightingModeEditor", { static: true } )
+	private highlightingModeEditor: IgxPropertyEditorPropertyDescriptionComponent
+	@ViewChild("calloutsVisibleEditor", { static: true } )
+	private calloutsVisibleEditor: IgxPropertyEditorPropertyDescriptionComponent
+	@ViewChild("finalValueAnnotationsEditor", { static: true } )
+	private finalValueAnnotationsEditor: IgxPropertyEditorPropertyDescriptionComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxCategoryChartComponent
     private _temperatureAnnotatedData: TemperatureAnnotatedData = null;
     public get temperatureAnnotatedData(): TemperatureAnnotatedData {
         if (this._temperatureAnnotatedData == null)
@@ -53,5 +50,13 @@ export class AppComponent {
         return this._componentRenderer;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/category-chart/annotations-callouts/src/app.component.ts b/samples/charts/category-chart/annotations-callouts/src/app.component.ts
index b78b38db8..4b1d1ed65 100644
--- a/samples/charts/category-chart/annotations-callouts/src/app.component.ts
+++ b/samples/charts/category-chart/annotations-callouts/src/app.component.ts
@@ -14,19 +14,16 @@ defineAllComponents();
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("propertyEditor", { static: true } )
-    private propertyEditor: IgxPropertyEditorPanelComponent
-    @ViewChild("calloutsVisibleEditor", { static: true } )
-    private calloutsVisibleEditor: IgxPropertyEditorPropertyDescriptionComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxCategoryChartComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("propertyEditor", { static: true } )
+	private propertyEditor: IgxPropertyEditorPanelComponent
+	@ViewChild("calloutsVisibleEditor", { static: true } )
+	private calloutsVisibleEditor: IgxPropertyEditorPropertyDescriptionComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxCategoryChartComponent
     private _temperatureAnnotatedData: TemperatureAnnotatedData = null;
     public get temperatureAnnotatedData(): TemperatureAnnotatedData {
         if (this._temperatureAnnotatedData == null)
@@ -47,5 +44,13 @@ export class AppComponent {
         return this._componentRenderer;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/category-chart/annotations-crosshairs/src/app.component.ts b/samples/charts/category-chart/annotations-crosshairs/src/app.component.ts
index 65b5cb9b2..701095b31 100644
--- a/samples/charts/category-chart/annotations-crosshairs/src/app.component.ts
+++ b/samples/charts/category-chart/annotations-crosshairs/src/app.component.ts
@@ -14,21 +14,18 @@ defineAllComponents();
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
-
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("propertyEditor", { static: true } )
-    private propertyEditor: IgxPropertyEditorPanelComponent
-    @ViewChild("crosshairsDisplayModeEditor", { static: true } )
-    private crosshairsDisplayModeEditor: IgxPropertyEditorPropertyDescriptionComponent
-    @ViewChild("crosshairsSnapToDataEditor", { static: true } )
-    private crosshairsSnapToDataEditor: IgxPropertyEditorPropertyDescriptionComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxCategoryChartComponent
 
+export class AppComponent implements AfterViewInit
+{
+
+	@ViewChild("propertyEditor", { static: true } )
+	private propertyEditor: IgxPropertyEditorPanelComponent
+	@ViewChild("crosshairsDisplayModeEditor", { static: true } )
+	private crosshairsDisplayModeEditor: IgxPropertyEditorPropertyDescriptionComponent
+	@ViewChild("crosshairsSnapToDataEditor", { static: true } )
+	private crosshairsSnapToDataEditor: IgxPropertyEditorPropertyDescriptionComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxCategoryChartComponent
     private _temperatureAnnotatedData: TemperatureAnnotatedData = null;
     public get temperatureAnnotatedData(): TemperatureAnnotatedData {
         if (this._temperatureAnnotatedData == null)
@@ -49,5 +46,13 @@ export class AppComponent {
         return this._componentRenderer;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/category-chart/annotations-custom/src/app.component.ts b/samples/charts/category-chart/annotations-custom/src/app.component.ts
index b78b38db8..4b1d1ed65 100644
--- a/samples/charts/category-chart/annotations-custom/src/app.component.ts
+++ b/samples/charts/category-chart/annotations-custom/src/app.component.ts
@@ -14,19 +14,16 @@ defineAllComponents();
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("propertyEditor", { static: true } )
-    private propertyEditor: IgxPropertyEditorPanelComponent
-    @ViewChild("calloutsVisibleEditor", { static: true } )
-    private calloutsVisibleEditor: IgxPropertyEditorPropertyDescriptionComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxCategoryChartComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("propertyEditor", { static: true } )
+	private propertyEditor: IgxPropertyEditorPanelComponent
+	@ViewChild("calloutsVisibleEditor", { static: true } )
+	private calloutsVisibleEditor: IgxPropertyEditorPropertyDescriptionComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxCategoryChartComponent
     private _temperatureAnnotatedData: TemperatureAnnotatedData = null;
     public get temperatureAnnotatedData(): TemperatureAnnotatedData {
         if (this._temperatureAnnotatedData == null)
@@ -47,5 +44,13 @@ export class AppComponent {
         return this._componentRenderer;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/category-chart/annotations-final-value/src/app.component.ts b/samples/charts/category-chart/annotations-final-value/src/app.component.ts
index 652c137d7..9418dc1d0 100644
--- a/samples/charts/category-chart/annotations-final-value/src/app.component.ts
+++ b/samples/charts/category-chart/annotations-final-value/src/app.component.ts
@@ -14,19 +14,16 @@ defineAllComponents();
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("propertyEditor", { static: true } )
-    private propertyEditor: IgxPropertyEditorPanelComponent
-    @ViewChild("finalValueAnnotationsEditor", { static: true } )
-    private finalValueAnnotationsEditor: IgxPropertyEditorPropertyDescriptionComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxCategoryChartComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("propertyEditor", { static: true } )
+	private propertyEditor: IgxPropertyEditorPanelComponent
+	@ViewChild("finalValueAnnotationsEditor", { static: true } )
+	private finalValueAnnotationsEditor: IgxPropertyEditorPropertyDescriptionComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxCategoryChartComponent
     private _temperatureAnnotatedData: TemperatureAnnotatedData = null;
     public get temperatureAnnotatedData(): TemperatureAnnotatedData {
         if (this._temperatureAnnotatedData == null)
@@ -47,5 +44,13 @@ export class AppComponent {
         return this._componentRenderer;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/category-chart/annotations-highlighting/src/app.component.ts b/samples/charts/category-chart/annotations-highlighting/src/app.component.ts
index 82ff6a943..ec61ecf09 100644
--- a/samples/charts/category-chart/annotations-highlighting/src/app.component.ts
+++ b/samples/charts/category-chart/annotations-highlighting/src/app.component.ts
@@ -14,21 +14,18 @@ defineAllComponents();
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
-
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("propertyEditor", { static: true } )
-    private propertyEditor: IgxPropertyEditorPanelComponent
-    @ViewChild("highlightingModeEditor", { static: true } )
-    private highlightingModeEditor: IgxPropertyEditorPropertyDescriptionComponent
-    @ViewChild("highlightingBehaviorEditor", { static: true } )
-    private highlightingBehaviorEditor: IgxPropertyEditorPropertyDescriptionComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxCategoryChartComponent
 
+export class AppComponent implements AfterViewInit
+{
+
+	@ViewChild("propertyEditor", { static: true } )
+	private propertyEditor: IgxPropertyEditorPanelComponent
+	@ViewChild("highlightingModeEditor", { static: true } )
+	private highlightingModeEditor: IgxPropertyEditorPropertyDescriptionComponent
+	@ViewChild("highlightingBehaviorEditor", { static: true } )
+	private highlightingBehaviorEditor: IgxPropertyEditorPropertyDescriptionComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxCategoryChartComponent
     private _temperatureAnnotatedData: TemperatureAnnotatedData = null;
     public get temperatureAnnotatedData(): TemperatureAnnotatedData {
         if (this._temperatureAnnotatedData == null)
@@ -49,5 +46,13 @@ export class AppComponent {
         return this._componentRenderer;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/category-chart/area-chart-multiple-sources/src/app.component.ts b/samples/charts/category-chart/area-chart-multiple-sources/src/app.component.ts
index 7f293a2f5..cf1e9fcaf 100644
--- a/samples/charts/category-chart/area-chart-multiple-sources/src/app.component.ts
+++ b/samples/charts/category-chart/area-chart-multiple-sources/src/app.component.ts
@@ -8,17 +8,14 @@ import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxCategoryChartComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("legend", { static: true } )
+	private legend: IgxLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxCategoryChartComponent
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
     public get countryRenewableElectricity(): CountryRenewableElectricity {
         if (this._countryRenewableElectricity == null)
@@ -28,5 +25,13 @@ export class AppComponent {
         return this._countryRenewableElectricity;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/category-chart/area-chart-single-source/src/app.component.ts b/samples/charts/category-chart/area-chart-single-source/src/app.component.ts
index ea8682686..0ad6dc0d6 100644
--- a/samples/charts/category-chart/area-chart-single-source/src/app.component.ts
+++ b/samples/charts/category-chart/area-chart-single-source/src/app.component.ts
@@ -8,15 +8,12 @@ import { IgxCategoryChartComponent } from 'igniteui-angular-charts';
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("chart", { static: true } )
-    private chart: IgxCategoryChartComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("chart", { static: true } )
+	private chart: IgxCategoryChartComponent
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
     public get countryRenewableElectricity(): CountryRenewableElectricity {
         if (this._countryRenewableElectricity == null)
@@ -26,5 +23,13 @@ export class AppComponent {
         return this._countryRenewableElectricity;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/category-chart/area-chart-styling/src/app.component.ts b/samples/charts/category-chart/area-chart-styling/src/app.component.ts
index 7f293a2f5..cf1e9fcaf 100644
--- a/samples/charts/category-chart/area-chart-styling/src/app.component.ts
+++ b/samples/charts/category-chart/area-chart-styling/src/app.component.ts
@@ -8,17 +8,14 @@ import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxCategoryChartComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("legend", { static: true } )
+	private legend: IgxLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxCategoryChartComponent
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
     public get countryRenewableElectricity(): CountryRenewableElectricity {
         if (this._countryRenewableElectricity == null)
@@ -28,5 +25,13 @@ export class AppComponent {
         return this._countryRenewableElectricity;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/category-chart/axis-gap/src/app.component.ts b/samples/charts/category-chart/axis-gap/src/app.component.ts
index 453e40a53..43690271d 100644
--- a/samples/charts/category-chart/axis-gap/src/app.component.ts
+++ b/samples/charts/category-chart/axis-gap/src/app.component.ts
@@ -14,21 +14,18 @@ defineAllComponents();
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
-
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("propertyEditorPanel1", { static: true } )
-    private propertyEditorPanel1: IgxPropertyEditorPanelComponent
-    @ViewChild("xAxisGap", { static: true } )
-    private xAxisGap: IgxPropertyEditorPropertyDescriptionComponent
-    @ViewChild("xAxisMaximumGap", { static: true } )
-    private xAxisMaximumGap: IgxPropertyEditorPropertyDescriptionComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxCategoryChartComponent
 
+export class AppComponent implements AfterViewInit
+{
+
+	@ViewChild("propertyEditorPanel1", { static: true } )
+	private propertyEditorPanel1: IgxPropertyEditorPanelComponent
+	@ViewChild("xAxisGap", { static: true } )
+	private xAxisGap: IgxPropertyEditorPropertyDescriptionComponent
+	@ViewChild("xAxisMaximumGap", { static: true } )
+	private xAxisMaximumGap: IgxPropertyEditorPropertyDescriptionComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxCategoryChartComponent
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
     public get countryRenewableElectricity(): CountryRenewableElectricity {
         if (this._countryRenewableElectricity == null)
@@ -50,5 +47,13 @@ export class AppComponent {
         return this._componentRenderer;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/category-chart/axis-gridlines/src/app.component.ts b/samples/charts/category-chart/axis-gridlines/src/app.component.ts
index b45fe99ef..8c8d83a45 100644
--- a/samples/charts/category-chart/axis-gridlines/src/app.component.ts
+++ b/samples/charts/category-chart/axis-gridlines/src/app.component.ts
@@ -14,25 +14,22 @@ defineAllComponents();
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
-
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxLegendComponent
-    @ViewChild("propertyEditorPanel1", { static: true } )
-    private propertyEditorPanel1: IgxPropertyEditorPanelComponent
-    @ViewChild("yAxisStroke", { static: true } )
-    private yAxisStroke: IgxPropertyEditorPropertyDescriptionComponent
-    @ViewChild("yAxisMajorStroke", { static: true } )
-    private yAxisMajorStroke: IgxPropertyEditorPropertyDescriptionComponent
-    @ViewChild("yAxisMinorStroke", { static: true } )
-    private yAxisMinorStroke: IgxPropertyEditorPropertyDescriptionComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxCategoryChartComponent
 
+export class AppComponent implements AfterViewInit
+{
+
+	@ViewChild("legend", { static: true } )
+	private legend: IgxLegendComponent
+	@ViewChild("propertyEditorPanel1", { static: true } )
+	private propertyEditorPanel1: IgxPropertyEditorPanelComponent
+	@ViewChild("yAxisStroke", { static: true } )
+	private yAxisStroke: IgxPropertyEditorPropertyDescriptionComponent
+	@ViewChild("yAxisMajorStroke", { static: true } )
+	private yAxisMajorStroke: IgxPropertyEditorPropertyDescriptionComponent
+	@ViewChild("yAxisMinorStroke", { static: true } )
+	private yAxisMinorStroke: IgxPropertyEditorPropertyDescriptionComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxCategoryChartComponent
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
     public get countryRenewableElectricity(): CountryRenewableElectricity {
         if (this._countryRenewableElectricity == null)
@@ -54,5 +51,13 @@ export class AppComponent {
         return this._componentRenderer;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/category-chart/axis-inverted/src/app.component.ts b/samples/charts/category-chart/axis-inverted/src/app.component.ts
index 943b70033..72b004825 100644
--- a/samples/charts/category-chart/axis-inverted/src/app.component.ts
+++ b/samples/charts/category-chart/axis-inverted/src/app.component.ts
@@ -14,21 +14,18 @@ defineAllComponents();
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
-
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("propertyEditorPanel1", { static: true } )
-    private propertyEditorPanel1: IgxPropertyEditorPanelComponent
-    @ViewChild("xAxisInvertedEditor", { static: true } )
-    private xAxisInvertedEditor: IgxPropertyEditorPropertyDescriptionComponent
-    @ViewChild("yAxisInvertedEditor", { static: true } )
-    private yAxisInvertedEditor: IgxPropertyEditorPropertyDescriptionComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxCategoryChartComponent
 
+export class AppComponent implements AfterViewInit
+{
+
+	@ViewChild("propertyEditorPanel1", { static: true } )
+	private propertyEditorPanel1: IgxPropertyEditorPanelComponent
+	@ViewChild("xAxisInvertedEditor", { static: true } )
+	private xAxisInvertedEditor: IgxPropertyEditorPropertyDescriptionComponent
+	@ViewChild("yAxisInvertedEditor", { static: true } )
+	private yAxisInvertedEditor: IgxPropertyEditorPropertyDescriptionComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxCategoryChartComponent
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
     public get countryRenewableElectricity(): CountryRenewableElectricity {
         if (this._countryRenewableElectricity == null)
@@ -49,5 +46,13 @@ export class AppComponent {
         return this._componentRenderer;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/category-chart/axis-labels/src/app.component.ts b/samples/charts/category-chart/axis-labels/src/app.component.ts
index 0c15fb0b5..0336cdb5f 100644
--- a/samples/charts/category-chart/axis-labels/src/app.component.ts
+++ b/samples/charts/category-chart/axis-labels/src/app.component.ts
@@ -14,25 +14,22 @@ defineAllComponents();
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
-
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxLegendComponent
-    @ViewChild("propertyEditorPanel1", { static: true } )
-    private propertyEditorPanel1: IgxPropertyEditorPanelComponent
-    @ViewChild("xAxisLabelAngleEditor", { static: true } )
-    private xAxisLabelAngleEditor: IgxPropertyEditorPropertyDescriptionComponent
-    @ViewChild("yAxisLabelAngleEditor", { static: true } )
-    private yAxisLabelAngleEditor: IgxPropertyEditorPropertyDescriptionComponent
-    @ViewChild("xAxisLabelTextColorEditor", { static: true } )
-    private xAxisLabelTextColorEditor: IgxPropertyEditorPropertyDescriptionComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxCategoryChartComponent
 
+export class AppComponent implements AfterViewInit
+{
+
+	@ViewChild("legend", { static: true } )
+	private legend: IgxLegendComponent
+	@ViewChild("propertyEditorPanel1", { static: true } )
+	private propertyEditorPanel1: IgxPropertyEditorPanelComponent
+	@ViewChild("xAxisLabelAngleEditor", { static: true } )
+	private xAxisLabelAngleEditor: IgxPropertyEditorPropertyDescriptionComponent
+	@ViewChild("yAxisLabelAngleEditor", { static: true } )
+	private yAxisLabelAngleEditor: IgxPropertyEditorPropertyDescriptionComponent
+	@ViewChild("xAxisLabelTextColorEditor", { static: true } )
+	private xAxisLabelTextColorEditor: IgxPropertyEditorPropertyDescriptionComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxCategoryChartComponent
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
     public get countryRenewableElectricity(): CountryRenewableElectricity {
         if (this._countryRenewableElectricity == null)
@@ -54,5 +51,13 @@ export class AppComponent {
         return this._componentRenderer;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/category-chart/axis-locations/src/app.component.ts b/samples/charts/category-chart/axis-locations/src/app.component.ts
index 2afab5af6..595fd5643 100644
--- a/samples/charts/category-chart/axis-locations/src/app.component.ts
+++ b/samples/charts/category-chart/axis-locations/src/app.component.ts
@@ -14,21 +14,18 @@ defineAllComponents();
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
-
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxLegendComponent
-    @ViewChild("propertyEditorPanel1", { static: true } )
-    private propertyEditorPanel1: IgxPropertyEditorPanelComponent
-    @ViewChild("yAxisLabelLocation", { static: true } )
-    private yAxisLabelLocation: IgxPropertyEditorPropertyDescriptionComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxCategoryChartComponent
 
+export class AppComponent implements AfterViewInit
+{
+
+	@ViewChild("legend", { static: true } )
+	private legend: IgxLegendComponent
+	@ViewChild("propertyEditorPanel1", { static: true } )
+	private propertyEditorPanel1: IgxPropertyEditorPanelComponent
+	@ViewChild("yAxisLabelLocation", { static: true } )
+	private yAxisLabelLocation: IgxPropertyEditorPropertyDescriptionComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxCategoryChartComponent
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
     public get countryRenewableElectricity(): CountryRenewableElectricity {
         if (this._countryRenewableElectricity == null)
@@ -50,5 +47,13 @@ export class AppComponent {
         return this._componentRenderer;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/category-chart/axis-options/src/app.component.ts b/samples/charts/category-chart/axis-options/src/app.component.ts
index e077a55aa..1fe82f4f4 100644
--- a/samples/charts/category-chart/axis-options/src/app.component.ts
+++ b/samples/charts/category-chart/axis-options/src/app.component.ts
@@ -8,15 +8,12 @@ import { IgxCategoryChartComponent } from 'igniteui-angular-charts';
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("chart", { static: true } )
-    private chart: IgxCategoryChartComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("chart", { static: true } )
+	private chart: IgxCategoryChartComponent
     private _olympicMedalsTopCountries: OlympicMedalsTopCountries = null;
     public get olympicMedalsTopCountries(): OlympicMedalsTopCountries {
         if (this._olympicMedalsTopCountries == null)
@@ -26,5 +23,13 @@ export class AppComponent {
         return this._olympicMedalsTopCountries;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/category-chart/axis-overlap/src/app.component.ts b/samples/charts/category-chart/axis-overlap/src/app.component.ts
index c6812c83f..c24c345f3 100644
--- a/samples/charts/category-chart/axis-overlap/src/app.component.ts
+++ b/samples/charts/category-chart/axis-overlap/src/app.component.ts
@@ -14,21 +14,18 @@ defineAllComponents();
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
-
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxLegendComponent
-    @ViewChild("propertyEditorPanel1", { static: true } )
-    private propertyEditorPanel1: IgxPropertyEditorPanelComponent
-    @ViewChild("xAxisOverlap", { static: true } )
-    private xAxisOverlap: IgxPropertyEditorPropertyDescriptionComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxCategoryChartComponent
 
+export class AppComponent implements AfterViewInit
+{
+
+	@ViewChild("legend", { static: true } )
+	private legend: IgxLegendComponent
+	@ViewChild("propertyEditorPanel1", { static: true } )
+	private propertyEditorPanel1: IgxPropertyEditorPanelComponent
+	@ViewChild("xAxisOverlap", { static: true } )
+	private xAxisOverlap: IgxPropertyEditorPropertyDescriptionComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxCategoryChartComponent
     private _highestGrossingMovies: HighestGrossingMovies = null;
     public get highestGrossingMovies(): HighestGrossingMovies {
         if (this._highestGrossingMovies == null)
@@ -50,5 +47,13 @@ export class AppComponent {
         return this._componentRenderer;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/category-chart/axis-range/src/app.component.ts b/samples/charts/category-chart/axis-range/src/app.component.ts
index 72839c285..b4a0e8ea8 100644
--- a/samples/charts/category-chart/axis-range/src/app.component.ts
+++ b/samples/charts/category-chart/axis-range/src/app.component.ts
@@ -14,23 +14,20 @@ defineAllComponents();
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
-
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxLegendComponent
-    @ViewChild("propertyEditorPanel1", { static: true } )
-    private propertyEditorPanel1: IgxPropertyEditorPanelComponent
-    @ViewChild("yAxisMinimumValue", { static: true } )
-    private yAxisMinimumValue: IgxPropertyEditorPropertyDescriptionComponent
-    @ViewChild("yAxisMaximumValue", { static: true } )
-    private yAxisMaximumValue: IgxPropertyEditorPropertyDescriptionComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxCategoryChartComponent
 
+export class AppComponent implements AfterViewInit
+{
+
+	@ViewChild("legend", { static: true } )
+	private legend: IgxLegendComponent
+	@ViewChild("propertyEditorPanel1", { static: true } )
+	private propertyEditorPanel1: IgxPropertyEditorPanelComponent
+	@ViewChild("yAxisMinimumValue", { static: true } )
+	private yAxisMinimumValue: IgxPropertyEditorPropertyDescriptionComponent
+	@ViewChild("yAxisMaximumValue", { static: true } )
+	private yAxisMaximumValue: IgxPropertyEditorPropertyDescriptionComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxCategoryChartComponent
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
     public get countryRenewableElectricity(): CountryRenewableElectricity {
         if (this._countryRenewableElectricity == null)
@@ -52,5 +49,13 @@ export class AppComponent {
         return this._componentRenderer;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/category-chart/axis-tickmarks/src/app.component.ts b/samples/charts/category-chart/axis-tickmarks/src/app.component.ts
index 5f2b6f2d4..760cce5fe 100644
--- a/samples/charts/category-chart/axis-tickmarks/src/app.component.ts
+++ b/samples/charts/category-chart/axis-tickmarks/src/app.component.ts
@@ -14,21 +14,18 @@ defineAllComponents();
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
-
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxLegendComponent
-    @ViewChild("propertyEditorPanel1", { static: true } )
-    private propertyEditorPanel1: IgxPropertyEditorPanelComponent
-    @ViewChild("xAxisTickLength", { static: true } )
-    private xAxisTickLength: IgxPropertyEditorPropertyDescriptionComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxCategoryChartComponent
 
+export class AppComponent implements AfterViewInit
+{
+
+	@ViewChild("legend", { static: true } )
+	private legend: IgxLegendComponent
+	@ViewChild("propertyEditorPanel1", { static: true } )
+	private propertyEditorPanel1: IgxPropertyEditorPanelComponent
+	@ViewChild("xAxisTickLength", { static: true } )
+	private xAxisTickLength: IgxPropertyEditorPropertyDescriptionComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxCategoryChartComponent
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
     public get countryRenewableElectricity(): CountryRenewableElectricity {
         if (this._countryRenewableElectricity == null)
@@ -50,5 +47,13 @@ export class AppComponent {
         return this._componentRenderer;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/category-chart/axis-titles/src/app.component.ts b/samples/charts/category-chart/axis-titles/src/app.component.ts
index 7f293a2f5..cf1e9fcaf 100644
--- a/samples/charts/category-chart/axis-titles/src/app.component.ts
+++ b/samples/charts/category-chart/axis-titles/src/app.component.ts
@@ -8,17 +8,14 @@ import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxCategoryChartComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("legend", { static: true } )
+	private legend: IgxLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxCategoryChartComponent
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
     public get countryRenewableElectricity(): CountryRenewableElectricity {
         if (this._countryRenewableElectricity == null)
@@ -28,5 +25,13 @@ export class AppComponent {
         return this._countryRenewableElectricity;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/category-chart/column-chart-multiple-sources/src/app.component.ts b/samples/charts/category-chart/column-chart-multiple-sources/src/app.component.ts
index 8e1aae8dc..05ffc0780 100644
--- a/samples/charts/category-chart/column-chart-multiple-sources/src/app.component.ts
+++ b/samples/charts/category-chart/column-chart-multiple-sources/src/app.component.ts
@@ -8,17 +8,14 @@ import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxCategoryChartComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("legend", { static: true } )
+	private legend: IgxLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxCategoryChartComponent
     private _highestGrossingMovies: HighestGrossingMovies = null;
     public get highestGrossingMovies(): HighestGrossingMovies {
         if (this._highestGrossingMovies == null)
@@ -28,5 +25,13 @@ export class AppComponent {
         return this._highestGrossingMovies;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/category-chart/column-chart-single-source/src/app.component.ts b/samples/charts/category-chart/column-chart-single-source/src/app.component.ts
index f05c8e8a8..2ee433ece 100644
--- a/samples/charts/category-chart/column-chart-single-source/src/app.component.ts
+++ b/samples/charts/category-chart/column-chart-single-source/src/app.component.ts
@@ -8,15 +8,12 @@ import { IgxCategoryChartComponent } from 'igniteui-angular-charts';
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("chart", { static: true } )
-    private chart: IgxCategoryChartComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("chart", { static: true } )
+	private chart: IgxCategoryChartComponent
     private _temperatureAverageData: TemperatureAverageData = null;
     public get temperatureAverageData(): TemperatureAverageData {
         if (this._temperatureAverageData == null)
@@ -26,5 +23,13 @@ export class AppComponent {
         return this._temperatureAverageData;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/category-chart/column-chart-styling/src/app.component.ts b/samples/charts/category-chart/column-chart-styling/src/app.component.ts
index 0262d3cb7..6539c9693 100644
--- a/samples/charts/category-chart/column-chart-styling/src/app.component.ts
+++ b/samples/charts/category-chart/column-chart-styling/src/app.component.ts
@@ -8,17 +8,14 @@ import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxCategoryChartComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("legend", { static: true } )
+	private legend: IgxLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxCategoryChartComponent
     private _energyRenewableConsumption: EnergyRenewableConsumption = null;
     public get energyRenewableConsumption(): EnergyRenewableConsumption {
         if (this._energyRenewableConsumption == null)
@@ -28,5 +25,13 @@ export class AppComponent {
         return this._energyRenewableConsumption;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/category-chart/column-chart-with-tooltips/src/app.component.ts b/samples/charts/category-chart/column-chart-with-tooltips/src/app.component.ts
index 091fb0ae6..0e6fef269 100644
--- a/samples/charts/category-chart/column-chart-with-tooltips/src/app.component.ts
+++ b/samples/charts/category-chart/column-chart-with-tooltips/src/app.component.ts
@@ -14,21 +14,18 @@ defineAllComponents();
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
-
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("propertyEditor", { static: true } )
-    private propertyEditor: IgxPropertyEditorPanelComponent
-    @ViewChild("toolTipTypeEditor", { static: true } )
-    private toolTipTypeEditor: IgxPropertyEditorPropertyDescriptionComponent
-    @ViewChild("legend", { static: true } )
-    private legend: IgxLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxCategoryChartComponent
 
+export class AppComponent implements AfterViewInit
+{
+
+	@ViewChild("propertyEditor", { static: true } )
+	private propertyEditor: IgxPropertyEditorPanelComponent
+	@ViewChild("toolTipTypeEditor", { static: true } )
+	private toolTipTypeEditor: IgxPropertyEditorPropertyDescriptionComponent
+	@ViewChild("legend", { static: true } )
+	private legend: IgxLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxCategoryChartComponent
     private _highestGrossingMovies: HighestGrossingMovies = null;
     public get highestGrossingMovies(): HighestGrossingMovies {
         if (this._highestGrossingMovies == null)
@@ -50,5 +47,13 @@ export class AppComponent {
         return this._componentRenderer;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/category-chart/custom-selection/src/app.component.ts b/samples/charts/category-chart/custom-selection/src/app.component.ts
index aca6652c7..2524c1ea1 100644
--- a/samples/charts/category-chart/custom-selection/src/app.component.ts
+++ b/samples/charts/category-chart/custom-selection/src/app.component.ts
@@ -8,17 +8,14 @@ import { IgxDataLegendComponent, IgxCategoryChartComponent } from 'igniteui-angu
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxDataLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxCategoryChartComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("legend", { static: true } )
+	private legend: IgxDataLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxCategoryChartComponent
     private _selectableData: SelectableData = null;
     public get selectableData(): SelectableData {
         if (this._selectableData == null)
@@ -28,34 +25,41 @@ export class AppComponent {
         return this._selectableData;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
 
-    public categoryChartCustomSelectionPointerDown(e: any): void {
+	public ngAfterViewInit(): void
+	{
+	}
 
-        let oldItem = e.args.item as SelectableDataItem;
+	public categoryChartCustomSelectionPointerDown(e: any): void {
 
-        if (oldItem === null) return;
+	    let oldItem = e.args.item as SelectableDataItem;
 
-        let newItem: SelectableDataItem = new SelectableDataItem({
-            category: oldItem.category,
-            dataValue: oldItem.dataValue,
-            selectedValue: oldItem.selectedValue
-        });
+	    if (oldItem === null) return;
 
-        var selectedIndex = -1;
-        for (var i = 0; i < this.selectableData.length; i++) {
-            if (oldItem.category === this.selectableData[i].category) {
-                selectedIndex = i;
-                break;
-            }
-        }
+	    let newItem: SelectableDataItem = new SelectableDataItem({
+	        category: oldItem.category,
+	        dataValue: oldItem.dataValue,
+	        selectedValue: oldItem.selectedValue
+	    });
 
-        if (oldItem.selectedValue === oldItem.dataValue)
-            newItem.selectedValue = null;
-        else
-            newItem.selectedValue = newItem.dataValue;
+	    var selectedIndex = -1;
+	    for (var i = 0; i < this.selectableData.length; i++) {
+	        if (oldItem.category === this.selectableData[i].category) {
+	            selectedIndex = i;
+	            break;
+	        }
+	    }
 
-        this.chart.notifySetItem(this.selectableData, selectedIndex, oldItem, newItem);
-    }
+	    if (oldItem.selectedValue === oldItem.dataValue)
+	        newItem.selectedValue = null;
+	    else
+	        newItem.selectedValue = newItem.dataValue;
+
+	    this.chart.notifySetItem(this.selectableData, selectedIndex, oldItem, newItem);
+	}
 
 }
 
diff --git a/samples/charts/category-chart/data-aggregations/src/app.component.ts b/samples/charts/category-chart/data-aggregations/src/app.component.ts
index 78074c3c7..c0c93e81b 100644
--- a/samples/charts/category-chart/data-aggregations/src/app.component.ts
+++ b/samples/charts/category-chart/data-aggregations/src/app.component.ts
@@ -14,23 +14,20 @@ defineAllComponents();
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
-
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("propertyEditorPanel1", { static: true } )
-    private propertyEditorPanel1: IgxPropertyEditorPanelComponent
-    @ViewChild("initialGroups", { static: true } )
-    private initialGroups: IgxPropertyEditorPropertyDescriptionComponent
-    @ViewChild("initialSummaries", { static: true } )
-    private initialSummaries: IgxPropertyEditorPropertyDescriptionComponent
-    @ViewChild("groupSorts", { static: true } )
-    private groupSorts: IgxPropertyEditorPropertyDescriptionComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxCategoryChartComponent
 
+export class AppComponent implements AfterViewInit
+{
+
+	@ViewChild("propertyEditorPanel1", { static: true } )
+	private propertyEditorPanel1: IgxPropertyEditorPanelComponent
+	@ViewChild("initialGroups", { static: true } )
+	private initialGroups: IgxPropertyEditorPropertyDescriptionComponent
+	@ViewChild("initialSummaries", { static: true } )
+	private initialSummaries: IgxPropertyEditorPropertyDescriptionComponent
+	@ViewChild("groupSorts", { static: true } )
+	private groupSorts: IgxPropertyEditorPropertyDescriptionComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxCategoryChartComponent
     private _salesData: SalesData = null;
     public get salesData(): SalesData {
         if (this._salesData == null)
@@ -52,5 +49,13 @@ export class AppComponent {
         return this._componentRenderer;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/category-chart/data-legend-formatting-decimals/src/app.component.ts b/samples/charts/category-chart/data-legend-formatting-decimals/src/app.component.ts
index bd82ff8f9..38b629f73 100644
--- a/samples/charts/category-chart/data-legend-formatting-decimals/src/app.component.ts
+++ b/samples/charts/category-chart/data-legend-formatting-decimals/src/app.component.ts
@@ -8,17 +8,14 @@ import { IgxDataLegendComponent, IgxCategoryChartComponent } from 'igniteui-angu
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxDataLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxCategoryChartComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("legend", { static: true } )
+	private legend: IgxDataLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxCategoryChartComponent
     private _highestGrossingMovies: HighestGrossingMovies = null;
     public get highestGrossingMovies(): HighestGrossingMovies {
         if (this._highestGrossingMovies == null)
@@ -28,5 +25,13 @@ export class AppComponent {
         return this._highestGrossingMovies;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/category-chart/data-legend/src/app.component.ts b/samples/charts/category-chart/data-legend/src/app.component.ts
index bd82ff8f9..38b629f73 100644
--- a/samples/charts/category-chart/data-legend/src/app.component.ts
+++ b/samples/charts/category-chart/data-legend/src/app.component.ts
@@ -8,17 +8,14 @@ import { IgxDataLegendComponent, IgxCategoryChartComponent } from 'igniteui-angu
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxDataLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxCategoryChartComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("legend", { static: true } )
+	private legend: IgxDataLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxCategoryChartComponent
     private _highestGrossingMovies: HighestGrossingMovies = null;
     public get highestGrossingMovies(): HighestGrossingMovies {
         if (this._highestGrossingMovies == null)
@@ -28,5 +25,13 @@ export class AppComponent {
         return this._highestGrossingMovies;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/category-chart/data-tooltip-formatting-decimals/src/app.component.ts b/samples/charts/category-chart/data-tooltip-formatting-decimals/src/app.component.ts
index 1c77ff43d..870facf82 100644
--- a/samples/charts/category-chart/data-tooltip-formatting-decimals/src/app.component.ts
+++ b/samples/charts/category-chart/data-tooltip-formatting-decimals/src/app.component.ts
@@ -8,15 +8,12 @@ import { IgxCategoryChartComponent } from 'igniteui-angular-charts';
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("chart", { static: true } )
-    private chart: IgxCategoryChartComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("chart", { static: true } )
+	private chart: IgxCategoryChartComponent
     private _highestGrossingMovies: HighestGrossingMovies = null;
     public get highestGrossingMovies(): HighestGrossingMovies {
         if (this._highestGrossingMovies == null)
@@ -26,5 +23,13 @@ export class AppComponent {
         return this._highestGrossingMovies;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/category-chart/data-tooltip-positioning/src/app.component.ts b/samples/charts/category-chart/data-tooltip-positioning/src/app.component.ts
index 5d042f95d..88b9a8fb8 100644
--- a/samples/charts/category-chart/data-tooltip-positioning/src/app.component.ts
+++ b/samples/charts/category-chart/data-tooltip-positioning/src/app.component.ts
@@ -14,23 +14,20 @@ defineAllComponents();
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
-
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("propertyEditor", { static: true } )
-    private propertyEditor: IgxPropertyEditorPanelComponent
-    @ViewChild("groupedPositionXEditor", { static: true } )
-    private groupedPositionXEditor: IgxPropertyEditorPropertyDescriptionComponent
-    @ViewChild("groupedPositionYEditor", { static: true } )
-    private groupedPositionYEditor: IgxPropertyEditorPropertyDescriptionComponent
-    @ViewChild("groupingModeEditor", { static: true } )
-    private groupingModeEditor: IgxPropertyEditorPropertyDescriptionComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxCategoryChartComponent
 
+export class AppComponent implements AfterViewInit
+{
+
+	@ViewChild("propertyEditor", { static: true } )
+	private propertyEditor: IgxPropertyEditorPanelComponent
+	@ViewChild("groupedPositionXEditor", { static: true } )
+	private groupedPositionXEditor: IgxPropertyEditorPropertyDescriptionComponent
+	@ViewChild("groupedPositionYEditor", { static: true } )
+	private groupedPositionYEditor: IgxPropertyEditorPropertyDescriptionComponent
+	@ViewChild("groupingModeEditor", { static: true } )
+	private groupingModeEditor: IgxPropertyEditorPropertyDescriptionComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxCategoryChartComponent
     private _highestGrossingMovies: HighestGrossingMovies = null;
     public get highestGrossingMovies(): HighestGrossingMovies {
         if (this._highestGrossingMovies == null)
@@ -52,5 +49,13 @@ export class AppComponent {
         return this._componentRenderer;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/category-chart/data-tooltip/src/app.component.ts b/samples/charts/category-chart/data-tooltip/src/app.component.ts
index 1c77ff43d..870facf82 100644
--- a/samples/charts/category-chart/data-tooltip/src/app.component.ts
+++ b/samples/charts/category-chart/data-tooltip/src/app.component.ts
@@ -8,15 +8,12 @@ import { IgxCategoryChartComponent } from 'igniteui-angular-charts';
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("chart", { static: true } )
-    private chart: IgxCategoryChartComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("chart", { static: true } )
+	private chart: IgxCategoryChartComponent
     private _highestGrossingMovies: HighestGrossingMovies = null;
     public get highestGrossingMovies(): HighestGrossingMovies {
         if (this._highestGrossingMovies == null)
@@ -26,5 +23,13 @@ export class AppComponent {
         return this._highestGrossingMovies;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/category-chart/format-specifiers/src/app.component.ts b/samples/charts/category-chart/format-specifiers/src/app.component.ts
index 537db7978..c2bd289c8 100644
--- a/samples/charts/category-chart/format-specifiers/src/app.component.ts
+++ b/samples/charts/category-chart/format-specifiers/src/app.component.ts
@@ -10,33 +10,30 @@ import { IgxNumberFormatSpecifier } from 'igniteui-angular-core';
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
+export class AppComponent implements AfterViewInit
+{
 
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxDataLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxCategoryChartComponent
-    private _numberFormatSpecifier1: IgxNumberFormatSpecifier[] | null = null;
-    public get numberFormatSpecifier1(): IgxNumberFormatSpecifier[] {
-        if (this._numberFormatSpecifier1 == null)
-        {
-            let numberFormatSpecifier1: IgxNumberFormatSpecifier[] = [];
-            var numberFormatSpecifier2 = new IgxNumberFormatSpecifier();
-            numberFormatSpecifier2.style = "currency";
-            numberFormatSpecifier2.currency = "USD";
-            numberFormatSpecifier2.currencyDisplay = "symbol";
-            numberFormatSpecifier2.minimumFractionDigits = 0;
-
-            numberFormatSpecifier1.push(numberFormatSpecifier2)
-            this._numberFormatSpecifier1 = numberFormatSpecifier1;
-        }
-        return this._numberFormatSpecifier1;
-    }
+	@ViewChild("legend", { static: true } )
+	private legend: IgxDataLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxCategoryChartComponent
+	private _numberFormatSpecifier1: IgxNumberFormatSpecifier[] | null = null;
+	public get numberFormatSpecifier1(): IgxNumberFormatSpecifier[] {
+	    if (this._numberFormatSpecifier1 == null)
+	    {
+	        let numberFormatSpecifier1: IgxNumberFormatSpecifier[] = [];
+	        var numberFormatSpecifier2 = new IgxNumberFormatSpecifier();
+	        numberFormatSpecifier2.style = "currency";
+	        numberFormatSpecifier2.currency = "USD";
+	        numberFormatSpecifier2.currencyDisplay = "symbol";
+	        numberFormatSpecifier2.minimumFractionDigits = 0;
 
+	        numberFormatSpecifier1.push(numberFormatSpecifier2)
+	        this._numberFormatSpecifier1 = numberFormatSpecifier1;
+	    }
+	    return this._numberFormatSpecifier1;
+	}
     private _highestGrossingMovies: HighestGrossingMovies = null;
     public get highestGrossingMovies(): HighestGrossingMovies {
         if (this._highestGrossingMovies == null)
@@ -58,5 +55,13 @@ export class AppComponent {
         return this._componentRenderer;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/category-chart/line-chart-multiple-sources/src/app.component.ts b/samples/charts/category-chart/line-chart-multiple-sources/src/app.component.ts
index 7f293a2f5..cf1e9fcaf 100644
--- a/samples/charts/category-chart/line-chart-multiple-sources/src/app.component.ts
+++ b/samples/charts/category-chart/line-chart-multiple-sources/src/app.component.ts
@@ -8,17 +8,14 @@ import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxCategoryChartComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("legend", { static: true } )
+	private legend: IgxLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxCategoryChartComponent
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
     public get countryRenewableElectricity(): CountryRenewableElectricity {
         if (this._countryRenewableElectricity == null)
@@ -28,5 +25,13 @@ export class AppComponent {
         return this._countryRenewableElectricity;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/category-chart/line-chart-single-source/src/app.component.ts b/samples/charts/category-chart/line-chart-single-source/src/app.component.ts
index ea8682686..0ad6dc0d6 100644
--- a/samples/charts/category-chart/line-chart-single-source/src/app.component.ts
+++ b/samples/charts/category-chart/line-chart-single-source/src/app.component.ts
@@ -8,15 +8,12 @@ import { IgxCategoryChartComponent } from 'igniteui-angular-charts';
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("chart", { static: true } )
-    private chart: IgxCategoryChartComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("chart", { static: true } )
+	private chart: IgxCategoryChartComponent
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
     public get countryRenewableElectricity(): CountryRenewableElectricity {
         if (this._countryRenewableElectricity == null)
@@ -26,5 +23,13 @@ export class AppComponent {
         return this._countryRenewableElectricity;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/category-chart/line-chart-styling/src/app.component.ts b/samples/charts/category-chart/line-chart-styling/src/app.component.ts
index 7f293a2f5..cf1e9fcaf 100644
--- a/samples/charts/category-chart/line-chart-styling/src/app.component.ts
+++ b/samples/charts/category-chart/line-chart-styling/src/app.component.ts
@@ -8,17 +8,14 @@ import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxCategoryChartComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("legend", { static: true } )
+	private legend: IgxLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxCategoryChartComponent
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
     public get countryRenewableElectricity(): CountryRenewableElectricity {
         if (this._countryRenewableElectricity == null)
@@ -28,5 +25,13 @@ export class AppComponent {
         return this._countryRenewableElectricity;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/category-chart/marker-options/src/app.component.ts b/samples/charts/category-chart/marker-options/src/app.component.ts
index cfe0c731d..4ffde8434 100644
--- a/samples/charts/category-chart/marker-options/src/app.component.ts
+++ b/samples/charts/category-chart/marker-options/src/app.component.ts
@@ -16,21 +16,18 @@ defineAllComponents();
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("propertyEditor", { static: true } )
-    private propertyEditor: IgxPropertyEditorPanelComponent
-    @ViewChild("chartTypeEditor", { static: true } )
-    private chartTypeEditor: IgxPropertyEditorPropertyDescriptionComponent
-    @ViewChild("markerTypeEditor", { static: true } )
-    private markerTypeEditor: IgxPropertyEditorPropertyDescriptionComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxCategoryChartComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("propertyEditor", { static: true } )
+	private propertyEditor: IgxPropertyEditorPanelComponent
+	@ViewChild("chartTypeEditor", { static: true } )
+	private chartTypeEditor: IgxPropertyEditorPropertyDescriptionComponent
+	@ViewChild("markerTypeEditor", { static: true } )
+	private markerTypeEditor: IgxPropertyEditorPropertyDescriptionComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxCategoryChartComponent
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
     public get countryRenewableElectricity(): CountryRenewableElectricity {
         if (this._countryRenewableElectricity == null)
@@ -52,13 +49,21 @@ export class AppComponent {
         return this._componentRenderer;
     }
 
-    public editorChangeUpdateMarkerType({ sender, args }: { sender: any, args: IgxPropertyEditorPropertyDescriptionChangedEventArgs }): void {
-        var item = sender as IgxPropertyEditorPropertyDescriptionComponent;
-        var chart = this.chart;
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
 
-        var markerVal = item.primitiveValue;
-        chart.markerTypes = markerVal;
-    }
+	public ngAfterViewInit(): void
+	{
+	}
+
+	public editorChangeUpdateMarkerType({ sender, args }: { sender: any, args: IgxPropertyEditorPropertyDescriptionChangedEventArgs }): void {
+	    var item = sender as IgxPropertyEditorPropertyDescriptionComponent;
+	    var chart = this.chart;
+
+	    var markerVal = item.primitiveValue;
+	    chart.markerTypes = markerVal;
+	}
 
 }
 
diff --git a/samples/charts/category-chart/overview/src/app.component.ts b/samples/charts/category-chart/overview/src/app.component.ts
index 7f293a2f5..cf1e9fcaf 100644
--- a/samples/charts/category-chart/overview/src/app.component.ts
+++ b/samples/charts/category-chart/overview/src/app.component.ts
@@ -8,17 +8,14 @@ import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxCategoryChartComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("legend", { static: true } )
+	private legend: IgxLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxCategoryChartComponent
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
     public get countryRenewableElectricity(): CountryRenewableElectricity {
         if (this._countryRenewableElectricity == null)
@@ -28,5 +25,13 @@ export class AppComponent {
         return this._countryRenewableElectricity;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/category-chart/point-chart-multiple-sources/src/app.component.ts b/samples/charts/category-chart/point-chart-multiple-sources/src/app.component.ts
index 7f293a2f5..cf1e9fcaf 100644
--- a/samples/charts/category-chart/point-chart-multiple-sources/src/app.component.ts
+++ b/samples/charts/category-chart/point-chart-multiple-sources/src/app.component.ts
@@ -8,17 +8,14 @@ import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxCategoryChartComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("legend", { static: true } )
+	private legend: IgxLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxCategoryChartComponent
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
     public get countryRenewableElectricity(): CountryRenewableElectricity {
         if (this._countryRenewableElectricity == null)
@@ -28,5 +25,13 @@ export class AppComponent {
         return this._countryRenewableElectricity;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/category-chart/point-chart-single-source/src/app.component.ts b/samples/charts/category-chart/point-chart-single-source/src/app.component.ts
index ea8682686..0ad6dc0d6 100644
--- a/samples/charts/category-chart/point-chart-single-source/src/app.component.ts
+++ b/samples/charts/category-chart/point-chart-single-source/src/app.component.ts
@@ -8,15 +8,12 @@ import { IgxCategoryChartComponent } from 'igniteui-angular-charts';
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("chart", { static: true } )
-    private chart: IgxCategoryChartComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("chart", { static: true } )
+	private chart: IgxCategoryChartComponent
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
     public get countryRenewableElectricity(): CountryRenewableElectricity {
         if (this._countryRenewableElectricity == null)
@@ -26,5 +23,13 @@ export class AppComponent {
         return this._countryRenewableElectricity;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/category-chart/point-chart-styling/src/app.component.ts b/samples/charts/category-chart/point-chart-styling/src/app.component.ts
index 7f293a2f5..cf1e9fcaf 100644
--- a/samples/charts/category-chart/point-chart-styling/src/app.component.ts
+++ b/samples/charts/category-chart/point-chart-styling/src/app.component.ts
@@ -8,17 +8,14 @@ import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxCategoryChartComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("legend", { static: true } )
+	private legend: IgxLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxCategoryChartComponent
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
     public get countryRenewableElectricity(): CountryRenewableElectricity {
         if (this._countryRenewableElectricity == null)
@@ -28,5 +25,13 @@ export class AppComponent {
         return this._countryRenewableElectricity;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/category-chart/spline-area-multiple-sources/src/app.component.ts b/samples/charts/category-chart/spline-area-multiple-sources/src/app.component.ts
index 7f293a2f5..cf1e9fcaf 100644
--- a/samples/charts/category-chart/spline-area-multiple-sources/src/app.component.ts
+++ b/samples/charts/category-chart/spline-area-multiple-sources/src/app.component.ts
@@ -8,17 +8,14 @@ import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxCategoryChartComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("legend", { static: true } )
+	private legend: IgxLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxCategoryChartComponent
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
     public get countryRenewableElectricity(): CountryRenewableElectricity {
         if (this._countryRenewableElectricity == null)
@@ -28,5 +25,13 @@ export class AppComponent {
         return this._countryRenewableElectricity;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/category-chart/spline-area-single-source/src/app.component.ts b/samples/charts/category-chart/spline-area-single-source/src/app.component.ts
index ea8682686..0ad6dc0d6 100644
--- a/samples/charts/category-chart/spline-area-single-source/src/app.component.ts
+++ b/samples/charts/category-chart/spline-area-single-source/src/app.component.ts
@@ -8,15 +8,12 @@ import { IgxCategoryChartComponent } from 'igniteui-angular-charts';
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("chart", { static: true } )
-    private chart: IgxCategoryChartComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("chart", { static: true } )
+	private chart: IgxCategoryChartComponent
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
     public get countryRenewableElectricity(): CountryRenewableElectricity {
         if (this._countryRenewableElectricity == null)
@@ -26,5 +23,13 @@ export class AppComponent {
         return this._countryRenewableElectricity;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/category-chart/spline-area-styling/src/app.component.ts b/samples/charts/category-chart/spline-area-styling/src/app.component.ts
index 7f293a2f5..cf1e9fcaf 100644
--- a/samples/charts/category-chart/spline-area-styling/src/app.component.ts
+++ b/samples/charts/category-chart/spline-area-styling/src/app.component.ts
@@ -8,17 +8,14 @@ import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxCategoryChartComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("legend", { static: true } )
+	private legend: IgxLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxCategoryChartComponent
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
     public get countryRenewableElectricity(): CountryRenewableElectricity {
         if (this._countryRenewableElectricity == null)
@@ -28,5 +25,13 @@ export class AppComponent {
         return this._countryRenewableElectricity;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/category-chart/spline-multiple-sources/src/app.component.ts b/samples/charts/category-chart/spline-multiple-sources/src/app.component.ts
index 7f293a2f5..cf1e9fcaf 100644
--- a/samples/charts/category-chart/spline-multiple-sources/src/app.component.ts
+++ b/samples/charts/category-chart/spline-multiple-sources/src/app.component.ts
@@ -8,17 +8,14 @@ import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxCategoryChartComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("legend", { static: true } )
+	private legend: IgxLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxCategoryChartComponent
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
     public get countryRenewableElectricity(): CountryRenewableElectricity {
         if (this._countryRenewableElectricity == null)
@@ -28,5 +25,13 @@ export class AppComponent {
         return this._countryRenewableElectricity;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/category-chart/spline-single-source/src/app.component.ts b/samples/charts/category-chart/spline-single-source/src/app.component.ts
index ea8682686..0ad6dc0d6 100644
--- a/samples/charts/category-chart/spline-single-source/src/app.component.ts
+++ b/samples/charts/category-chart/spline-single-source/src/app.component.ts
@@ -8,15 +8,12 @@ import { IgxCategoryChartComponent } from 'igniteui-angular-charts';
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("chart", { static: true } )
-    private chart: IgxCategoryChartComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("chart", { static: true } )
+	private chart: IgxCategoryChartComponent
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
     public get countryRenewableElectricity(): CountryRenewableElectricity {
         if (this._countryRenewableElectricity == null)
@@ -26,5 +23,13 @@ export class AppComponent {
         return this._countryRenewableElectricity;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/category-chart/spline-styling/src/app.component.ts b/samples/charts/category-chart/spline-styling/src/app.component.ts
index 7f293a2f5..cf1e9fcaf 100644
--- a/samples/charts/category-chart/spline-styling/src/app.component.ts
+++ b/samples/charts/category-chart/spline-styling/src/app.component.ts
@@ -8,17 +8,14 @@ import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxCategoryChartComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("legend", { static: true } )
+	private legend: IgxLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxCategoryChartComponent
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
     public get countryRenewableElectricity(): CountryRenewableElectricity {
         if (this._countryRenewableElectricity == null)
@@ -28,5 +25,13 @@ export class AppComponent {
         return this._countryRenewableElectricity;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/category-chart/step-area-multiple-sources/src/app.component.ts b/samples/charts/category-chart/step-area-multiple-sources/src/app.component.ts
index 7f293a2f5..cf1e9fcaf 100644
--- a/samples/charts/category-chart/step-area-multiple-sources/src/app.component.ts
+++ b/samples/charts/category-chart/step-area-multiple-sources/src/app.component.ts
@@ -8,17 +8,14 @@ import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxCategoryChartComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("legend", { static: true } )
+	private legend: IgxLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxCategoryChartComponent
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
     public get countryRenewableElectricity(): CountryRenewableElectricity {
         if (this._countryRenewableElectricity == null)
@@ -28,5 +25,13 @@ export class AppComponent {
         return this._countryRenewableElectricity;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/category-chart/step-area-single-source/src/app.component.ts b/samples/charts/category-chart/step-area-single-source/src/app.component.ts
index ea8682686..0ad6dc0d6 100644
--- a/samples/charts/category-chart/step-area-single-source/src/app.component.ts
+++ b/samples/charts/category-chart/step-area-single-source/src/app.component.ts
@@ -8,15 +8,12 @@ import { IgxCategoryChartComponent } from 'igniteui-angular-charts';
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("chart", { static: true } )
-    private chart: IgxCategoryChartComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("chart", { static: true } )
+	private chart: IgxCategoryChartComponent
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
     public get countryRenewableElectricity(): CountryRenewableElectricity {
         if (this._countryRenewableElectricity == null)
@@ -26,5 +23,13 @@ export class AppComponent {
         return this._countryRenewableElectricity;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/category-chart/step-area-styling/src/app.component.ts b/samples/charts/category-chart/step-area-styling/src/app.component.ts
index 7f293a2f5..cf1e9fcaf 100644
--- a/samples/charts/category-chart/step-area-styling/src/app.component.ts
+++ b/samples/charts/category-chart/step-area-styling/src/app.component.ts
@@ -8,17 +8,14 @@ import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxCategoryChartComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("legend", { static: true } )
+	private legend: IgxLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxCategoryChartComponent
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
     public get countryRenewableElectricity(): CountryRenewableElectricity {
         if (this._countryRenewableElectricity == null)
@@ -28,5 +25,13 @@ export class AppComponent {
         return this._countryRenewableElectricity;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/category-chart/step-line-multiple-sources/src/app.component.ts b/samples/charts/category-chart/step-line-multiple-sources/src/app.component.ts
index 7f293a2f5..cf1e9fcaf 100644
--- a/samples/charts/category-chart/step-line-multiple-sources/src/app.component.ts
+++ b/samples/charts/category-chart/step-line-multiple-sources/src/app.component.ts
@@ -8,17 +8,14 @@ import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxCategoryChartComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("legend", { static: true } )
+	private legend: IgxLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxCategoryChartComponent
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
     public get countryRenewableElectricity(): CountryRenewableElectricity {
         if (this._countryRenewableElectricity == null)
@@ -28,5 +25,13 @@ export class AppComponent {
         return this._countryRenewableElectricity;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/category-chart/step-line-single-source/src/app.component.ts b/samples/charts/category-chart/step-line-single-source/src/app.component.ts
index ea8682686..0ad6dc0d6 100644
--- a/samples/charts/category-chart/step-line-single-source/src/app.component.ts
+++ b/samples/charts/category-chart/step-line-single-source/src/app.component.ts
@@ -8,15 +8,12 @@ import { IgxCategoryChartComponent } from 'igniteui-angular-charts';
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("chart", { static: true } )
-    private chart: IgxCategoryChartComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("chart", { static: true } )
+	private chart: IgxCategoryChartComponent
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
     public get countryRenewableElectricity(): CountryRenewableElectricity {
         if (this._countryRenewableElectricity == null)
@@ -26,5 +23,13 @@ export class AppComponent {
         return this._countryRenewableElectricity;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/category-chart/step-line-styling/src/app.component.ts b/samples/charts/category-chart/step-line-styling/src/app.component.ts
index 7f293a2f5..cf1e9fcaf 100644
--- a/samples/charts/category-chart/step-line-styling/src/app.component.ts
+++ b/samples/charts/category-chart/step-line-styling/src/app.component.ts
@@ -8,17 +8,14 @@ import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxCategoryChartComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("legend", { static: true } )
+	private legend: IgxLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxCategoryChartComponent
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
     public get countryRenewableElectricity(): CountryRenewableElectricity {
         if (this._countryRenewableElectricity == null)
@@ -28,5 +25,13 @@ export class AppComponent {
         return this._countryRenewableElectricity;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/category-chart/value-lines/src/app.component.ts b/samples/charts/category-chart/value-lines/src/app.component.ts
index 6e68d1e31..de1ff9d7c 100644
--- a/samples/charts/category-chart/value-lines/src/app.component.ts
+++ b/samples/charts/category-chart/value-lines/src/app.component.ts
@@ -17,21 +17,18 @@ defineAllComponents();
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxLegendComponent
-    @ViewChild("propertyEditor", { static: true } )
-    private propertyEditor: IgxPropertyEditorPanelComponent
-    @ViewChild("valueListEditor", { static: true } )
-    private valueListEditor: IgxPropertyEditorPropertyDescriptionComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxCategoryChartComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("legend", { static: true } )
+	private legend: IgxLegendComponent
+	@ViewChild("propertyEditor", { static: true } )
+	private propertyEditor: IgxPropertyEditorPanelComponent
+	@ViewChild("valueListEditor", { static: true } )
+	private valueListEditor: IgxPropertyEditorPropertyDescriptionComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxCategoryChartComponent
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
     public get countryRenewableElectricity(): CountryRenewableElectricity {
         if (this._countryRenewableElectricity == null)
@@ -53,13 +50,21 @@ export class AppComponent {
         return this._componentRenderer;
     }
 
-    public editorChangeUpdateValueLines({ sender, args }: { sender: any, args: IgxPropertyEditorPropertyDescriptionChangedEventArgs }): void {
-        var item = sender as IgxPropertyEditorPropertyDescriptionComponent;
-        var chart = this.chart;
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
 
-        var valueLineType = item.primitiveValue;
-        chart.valueLines = valueLineType;
-    }
+	public ngAfterViewInit(): void
+	{
+	}
+
+	public editorChangeUpdateValueLines({ sender, args }: { sender: any, args: IgxPropertyEditorPropertyDescriptionChangedEventArgs }): void {
+	    var item = sender as IgxPropertyEditorPropertyDescriptionComponent;
+	    var chart = this.chart;
+
+	    var valueLineType = item.primitiveValue;
+	    chart.valueLines = valueLineType;
+	}
 
 }
 
diff --git a/samples/charts/data-chart/annotations-custom/src/app.component.ts b/samples/charts/data-chart/annotations-custom/src/app.component.ts
index 3f14afa0d..c23557ab5 100644
--- a/samples/charts/data-chart/annotations-custom/src/app.component.ts
+++ b/samples/charts/data-chart/annotations-custom/src/app.component.ts
@@ -9,29 +9,26 @@ import { IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisCompon
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
-
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("chart", { static: true } )
-    private chart: IgxDataChartComponent
-    @ViewChild("xAxis", { static: true } )
-    private xAxis: IgxCategoryXAxisComponent
-    @ViewChild("yAxis", { static: true } )
-    private yAxis: IgxNumericYAxisComponent
-    @ViewChild("lineSeries1", { static: true } )
-    private lineSeries1: IgxLineSeriesComponent
-    @ViewChild("calloutLayer1", { static: true } )
-    private calloutLayer1: IgxCalloutLayerComponent
-    @ViewChild("finalValueLayer", { static: true } )
-    private finalValueLayer: IgxFinalValueLayerComponent
-    @ViewChild("crosshairLayer", { static: true } )
-    private crosshairLayer: IgxCrosshairLayerComponent
-    @ViewChild("tooltips", { static: true } )
-    private tooltips: IgxDataToolTipLayerComponent
 
+export class AppComponent implements AfterViewInit
+{
+
+	@ViewChild("chart", { static: true } )
+	private chart: IgxDataChartComponent
+	@ViewChild("xAxis", { static: true } )
+	private xAxis: IgxCategoryXAxisComponent
+	@ViewChild("yAxis", { static: true } )
+	private yAxis: IgxNumericYAxisComponent
+	@ViewChild("lineSeries1", { static: true } )
+	private lineSeries1: IgxLineSeriesComponent
+	@ViewChild("calloutLayer1", { static: true } )
+	private calloutLayer1: IgxCalloutLayerComponent
+	@ViewChild("finalValueLayer", { static: true } )
+	private finalValueLayer: IgxFinalValueLayerComponent
+	@ViewChild("crosshairLayer", { static: true } )
+	private crosshairLayer: IgxCrosshairLayerComponent
+	@ViewChild("tooltips", { static: true } )
+	private tooltips: IgxDataToolTipLayerComponent
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
     public get countryRenewableElectricity(): CountryRenewableElectricity {
         if (this._countryRenewableElectricity == null)
@@ -50,5 +47,13 @@ export class AppComponent {
         return this._countryRenewableCallouts;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/data-chart/axis-annotations-corner-radius/src/app.component.ts b/samples/charts/data-chart/axis-annotations-corner-radius/src/app.component.ts
index 6b7e105bc..fc863ead4 100644
--- a/samples/charts/data-chart/axis-annotations-corner-radius/src/app.component.ts
+++ b/samples/charts/data-chart/axis-annotations-corner-radius/src/app.component.ts
@@ -8,29 +8,26 @@ import { IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisCompon
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("chart", { static: true } )
-    private chart: IgxDataChartComponent
-    @ViewChild("xAxis", { static: true } )
-    private xAxis: IgxCategoryXAxisComponent
-    @ViewChild("yAxis", { static: true } )
-    private yAxis: IgxNumericYAxisComponent
-    @ViewChild("lineSeries1", { static: true } )
-    private lineSeries1: IgxLineSeriesComponent
-    @ViewChild("calloutLayer1", { static: true } )
-    private calloutLayer1: IgxCalloutLayerComponent
-    @ViewChild("finalValueLayer", { static: true } )
-    private finalValueLayer: IgxFinalValueLayerComponent
-    @ViewChild("crosshairLayer", { static: true } )
-    private crosshairLayer: IgxCrosshairLayerComponent
-    @ViewChild("tooltips", { static: true } )
-    private tooltips: IgxDataToolTipLayerComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("chart", { static: true } )
+	private chart: IgxDataChartComponent
+	@ViewChild("xAxis", { static: true } )
+	private xAxis: IgxCategoryXAxisComponent
+	@ViewChild("yAxis", { static: true } )
+	private yAxis: IgxNumericYAxisComponent
+	@ViewChild("lineSeries1", { static: true } )
+	private lineSeries1: IgxLineSeriesComponent
+	@ViewChild("calloutLayer1", { static: true } )
+	private calloutLayer1: IgxCalloutLayerComponent
+	@ViewChild("finalValueLayer", { static: true } )
+	private finalValueLayer: IgxFinalValueLayerComponent
+	@ViewChild("crosshairLayer", { static: true } )
+	private crosshairLayer: IgxCrosshairLayerComponent
+	@ViewChild("tooltips", { static: true } )
+	private tooltips: IgxDataToolTipLayerComponent
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
     public get countryRenewableElectricity(): CountryRenewableElectricity {
         if (this._countryRenewableElectricity == null)
@@ -40,5 +37,13 @@ export class AppComponent {
         return this._countryRenewableElectricity;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/data-chart/axis-label-rotation/src/app.component.ts b/samples/charts/data-chart/axis-label-rotation/src/app.component.ts
index 18b6c21b3..2e8e963d0 100644
--- a/samples/charts/data-chart/axis-label-rotation/src/app.component.ts
+++ b/samples/charts/data-chart/axis-label-rotation/src/app.component.ts
@@ -14,27 +14,24 @@ defineAllComponents();
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("propertyEditorPanel1", { static: true } )
-    private propertyEditorPanel1: IgxPropertyEditorPanelComponent
-    @ViewChild("shouldConsiderAutoRotationForInitialLabels", { static: true } )
-    private shouldConsiderAutoRotationForInitialLabels: IgxPropertyEditorPropertyDescriptionComponent
-    @ViewChild("autoMarginAndAngleUpdateMode", { static: true } )
-    private autoMarginAndAngleUpdateMode: IgxPropertyEditorPropertyDescriptionComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxDataChartComponent
-    @ViewChild("xAxis", { static: true } )
-    private xAxis: IgxCategoryXAxisComponent
-    @ViewChild("yAxis", { static: true } )
-    private yAxis: IgxNumericYAxisComponent
-    @ViewChild("colSeries1", { static: true } )
-    private colSeries1: IgxColumnSeriesComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("propertyEditorPanel1", { static: true } )
+	private propertyEditorPanel1: IgxPropertyEditorPanelComponent
+	@ViewChild("shouldConsiderAutoRotationForInitialLabels", { static: true } )
+	private shouldConsiderAutoRotationForInitialLabels: IgxPropertyEditorPropertyDescriptionComponent
+	@ViewChild("autoMarginAndAngleUpdateMode", { static: true } )
+	private autoMarginAndAngleUpdateMode: IgxPropertyEditorPropertyDescriptionComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxDataChartComponent
+	@ViewChild("xAxis", { static: true } )
+	private xAxis: IgxCategoryXAxisComponent
+	@ViewChild("yAxis", { static: true } )
+	private yAxis: IgxNumericYAxisComponent
+	@ViewChild("colSeries1", { static: true } )
+	private colSeries1: IgxColumnSeriesComponent
     private _temperatureAverageDataLongLabels: TemperatureAverageDataLongLabels = null;
     public get temperatureAverageDataLongLabels(): TemperatureAverageDataLongLabels {
         if (this._temperatureAverageDataLongLabels == null)
@@ -56,5 +53,13 @@ export class AppComponent {
         return this._componentRenderer;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/data-chart/axis-min-max-gap/src/app.component.ts b/samples/charts/data-chart/axis-min-max-gap/src/app.component.ts
index 96193f38a..220a57600 100644
--- a/samples/charts/data-chart/axis-min-max-gap/src/app.component.ts
+++ b/samples/charts/data-chart/axis-min-max-gap/src/app.component.ts
@@ -8,25 +8,22 @@ import { IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisCompon
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("chart", { static: true } )
-    private chart: IgxDataChartComponent
-    @ViewChild("xAxis", { static: true } )
-    private xAxis: IgxCategoryXAxisComponent
-    @ViewChild("yAxis", { static: true } )
-    private yAxis: IgxNumericYAxisComponent
-    @ViewChild("categoryHighlightLayer", { static: true } )
-    private categoryHighlightLayer: IgxCategoryHighlightLayerComponent
-    @ViewChild("columnSeries1", { static: true } )
-    private columnSeries1: IgxColumnSeriesComponent
-    @ViewChild("tooltips", { static: true } )
-    private tooltips: IgxDataToolTipLayerComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("chart", { static: true } )
+	private chart: IgxDataChartComponent
+	@ViewChild("xAxis", { static: true } )
+	private xAxis: IgxCategoryXAxisComponent
+	@ViewChild("yAxis", { static: true } )
+	private yAxis: IgxNumericYAxisComponent
+	@ViewChild("categoryHighlightLayer", { static: true } )
+	private categoryHighlightLayer: IgxCategoryHighlightLayerComponent
+	@ViewChild("columnSeries1", { static: true } )
+	private columnSeries1: IgxColumnSeriesComponent
+	@ViewChild("tooltips", { static: true } )
+	private tooltips: IgxDataToolTipLayerComponent
     private _temperatureAverageData: TemperatureAverageData = null;
     public get temperatureAverageData(): TemperatureAverageData {
         if (this._temperatureAverageData == null)
@@ -36,5 +33,13 @@ export class AppComponent {
         return this._temperatureAverageData;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/data-chart/bar-chart-multiple-sources/src/app.component.ts b/samples/charts/data-chart/bar-chart-multiple-sources/src/app.component.ts
index 15f485044..7c59dd98c 100644
--- a/samples/charts/data-chart/bar-chart-multiple-sources/src/app.component.ts
+++ b/samples/charts/data-chart/bar-chart-multiple-sources/src/app.component.ts
@@ -8,29 +8,26 @@ import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryYAxisComponent, I
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxDataChartComponent
-    @ViewChild("yAxis", { static: true } )
-    private yAxis: IgxCategoryYAxisComponent
-    @ViewChild("xAxis", { static: true } )
-    private xAxis: IgxNumericXAxisComponent
-    @ViewChild("categoryHighlightLayer", { static: true } )
-    private categoryHighlightLayer: IgxCategoryHighlightLayerComponent
-    @ViewChild("barSeries1", { static: true } )
-    private barSeries1: IgxBarSeriesComponent
-    @ViewChild("barSeries2", { static: true } )
-    private barSeries2: IgxBarSeriesComponent
-    @ViewChild("tooltips", { static: true } )
-    private tooltips: IgxDataToolTipLayerComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("legend", { static: true } )
+	private legend: IgxLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxDataChartComponent
+	@ViewChild("yAxis", { static: true } )
+	private yAxis: IgxCategoryYAxisComponent
+	@ViewChild("xAxis", { static: true } )
+	private xAxis: IgxNumericXAxisComponent
+	@ViewChild("categoryHighlightLayer", { static: true } )
+	private categoryHighlightLayer: IgxCategoryHighlightLayerComponent
+	@ViewChild("barSeries1", { static: true } )
+	private barSeries1: IgxBarSeriesComponent
+	@ViewChild("barSeries2", { static: true } )
+	private barSeries2: IgxBarSeriesComponent
+	@ViewChild("tooltips", { static: true } )
+	private tooltips: IgxDataToolTipLayerComponent
     private _highestGrossingMovies: HighestGrossingMovies = null;
     public get highestGrossingMovies(): HighestGrossingMovies {
         if (this._highestGrossingMovies == null)
@@ -40,5 +37,13 @@ export class AppComponent {
         return this._highestGrossingMovies;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/data-chart/bar-chart-overlapping/src/app.component.ts b/samples/charts/data-chart/bar-chart-overlapping/src/app.component.ts
index 0037c11d2..7ccec65ef 100644
--- a/samples/charts/data-chart/bar-chart-overlapping/src/app.component.ts
+++ b/samples/charts/data-chart/bar-chart-overlapping/src/app.component.ts
@@ -8,35 +8,32 @@ import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryYAxisComponent, I
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxDataChartComponent
-    @ViewChild("yAxis1", { static: true } )
-    private yAxis1: IgxCategoryYAxisComponent
-    @ViewChild("yAxis2", { static: true } )
-    private yAxis2: IgxCategoryYAxisComponent
-    @ViewChild("xAxis", { static: true } )
-    private xAxis: IgxNumericXAxisComponent
-    @ViewChild("categoryHighlightLayer", { static: true } )
-    private categoryHighlightLayer: IgxCategoryHighlightLayerComponent
-    @ViewChild("barSeries1", { static: true } )
-    private barSeries1: IgxBarSeriesComponent
-    @ViewChild("barSeries2", { static: true } )
-    private barSeries2: IgxBarSeriesComponent
-    @ViewChild("calloutLayer1", { static: true } )
-    private calloutLayer1: IgxCalloutLayerComponent
-    @ViewChild("calloutLayer2", { static: true } )
-    private calloutLayer2: IgxCalloutLayerComponent
-    @ViewChild("tooltips", { static: true } )
-    private tooltips: IgxDataToolTipLayerComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("legend", { static: true } )
+	private legend: IgxLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxDataChartComponent
+	@ViewChild("yAxis1", { static: true } )
+	private yAxis1: IgxCategoryYAxisComponent
+	@ViewChild("yAxis2", { static: true } )
+	private yAxis2: IgxCategoryYAxisComponent
+	@ViewChild("xAxis", { static: true } )
+	private xAxis: IgxNumericXAxisComponent
+	@ViewChild("categoryHighlightLayer", { static: true } )
+	private categoryHighlightLayer: IgxCategoryHighlightLayerComponent
+	@ViewChild("barSeries1", { static: true } )
+	private barSeries1: IgxBarSeriesComponent
+	@ViewChild("barSeries2", { static: true } )
+	private barSeries2: IgxBarSeriesComponent
+	@ViewChild("calloutLayer1", { static: true } )
+	private calloutLayer1: IgxCalloutLayerComponent
+	@ViewChild("calloutLayer2", { static: true } )
+	private calloutLayer2: IgxCalloutLayerComponent
+	@ViewChild("tooltips", { static: true } )
+	private tooltips: IgxDataToolTipLayerComponent
     private _roadblocksToSuccess: RoadblocksToSuccess = null;
     public get roadblocksToSuccess(): RoadblocksToSuccess {
         if (this._roadblocksToSuccess == null)
@@ -46,5 +43,13 @@ export class AppComponent {
         return this._roadblocksToSuccess;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/data-chart/bar-chart-single-source/src/app.component.ts b/samples/charts/data-chart/bar-chart-single-source/src/app.component.ts
index 72dc46598..b70343bc5 100644
--- a/samples/charts/data-chart/bar-chart-single-source/src/app.component.ts
+++ b/samples/charts/data-chart/bar-chart-single-source/src/app.component.ts
@@ -8,25 +8,22 @@ import { IgxDataChartComponent, IgxCategoryYAxisComponent, IgxNumericXAxisCompon
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("chart", { static: true } )
-    private chart: IgxDataChartComponent
-    @ViewChild("yAxis", { static: true } )
-    private yAxis: IgxCategoryYAxisComponent
-    @ViewChild("xAxis", { static: true } )
-    private xAxis: IgxNumericXAxisComponent
-    @ViewChild("categoryHighlightLayer", { static: true } )
-    private categoryHighlightLayer: IgxCategoryHighlightLayerComponent
-    @ViewChild("barSeries1", { static: true } )
-    private barSeries1: IgxBarSeriesComponent
-    @ViewChild("tooltips", { static: true } )
-    private tooltips: IgxDataToolTipLayerComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("chart", { static: true } )
+	private chart: IgxDataChartComponent
+	@ViewChild("yAxis", { static: true } )
+	private yAxis: IgxCategoryYAxisComponent
+	@ViewChild("xAxis", { static: true } )
+	private xAxis: IgxNumericXAxisComponent
+	@ViewChild("categoryHighlightLayer", { static: true } )
+	private categoryHighlightLayer: IgxCategoryHighlightLayerComponent
+	@ViewChild("barSeries1", { static: true } )
+	private barSeries1: IgxBarSeriesComponent
+	@ViewChild("tooltips", { static: true } )
+	private tooltips: IgxDataToolTipLayerComponent
     private _onlineShoppingSearches: OnlineShoppingSearches = null;
     public get onlineShoppingSearches(): OnlineShoppingSearches {
         if (this._onlineShoppingSearches == null)
@@ -36,5 +33,13 @@ export class AppComponent {
         return this._onlineShoppingSearches;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/data-chart/bar-chart-styling/src/app.component.ts b/samples/charts/data-chart/bar-chart-styling/src/app.component.ts
index b3ac7948f..6a091f05d 100644
--- a/samples/charts/data-chart/bar-chart-styling/src/app.component.ts
+++ b/samples/charts/data-chart/bar-chart-styling/src/app.component.ts
@@ -8,27 +8,24 @@ import { IgxDataChartComponent, IgxCategoryYAxisComponent, IgxNumericXAxisCompon
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("chart", { static: true } )
-    private chart: IgxDataChartComponent
-    @ViewChild("yAxis", { static: true } )
-    private yAxis: IgxCategoryYAxisComponent
-    @ViewChild("xAxis", { static: true } )
-    private xAxis: IgxNumericXAxisComponent
-    @ViewChild("categoryHighlightLayer", { static: true } )
-    private categoryHighlightLayer: IgxCategoryHighlightLayerComponent
-    @ViewChild("barSeries1", { static: true } )
-    private barSeries1: IgxBarSeriesComponent
-    @ViewChild("calloutLayer1", { static: true } )
-    private calloutLayer1: IgxCalloutLayerComponent
-    @ViewChild("tooltips", { static: true } )
-    private tooltips: IgxDataToolTipLayerComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("chart", { static: true } )
+	private chart: IgxDataChartComponent
+	@ViewChild("yAxis", { static: true } )
+	private yAxis: IgxCategoryYAxisComponent
+	@ViewChild("xAxis", { static: true } )
+	private xAxis: IgxNumericXAxisComponent
+	@ViewChild("categoryHighlightLayer", { static: true } )
+	private categoryHighlightLayer: IgxCategoryHighlightLayerComponent
+	@ViewChild("barSeries1", { static: true } )
+	private barSeries1: IgxBarSeriesComponent
+	@ViewChild("calloutLayer1", { static: true } )
+	private calloutLayer1: IgxCalloutLayerComponent
+	@ViewChild("tooltips", { static: true } )
+	private tooltips: IgxDataToolTipLayerComponent
     private _onlineShoppingSearches: OnlineShoppingSearches = null;
     public get onlineShoppingSearches(): OnlineShoppingSearches {
         if (this._onlineShoppingSearches == null)
@@ -38,5 +35,13 @@ export class AppComponent {
         return this._onlineShoppingSearches;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/data-chart/callout-layer-styling/src/app.component.ts b/samples/charts/data-chart/callout-layer-styling/src/app.component.ts
index 416884c5b..01c6b3623 100644
--- a/samples/charts/data-chart/callout-layer-styling/src/app.component.ts
+++ b/samples/charts/data-chart/callout-layer-styling/src/app.component.ts
@@ -8,23 +8,20 @@ import { IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisCompon
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("chart", { static: true } )
-    private chart: IgxDataChartComponent
-    @ViewChild("xAxis", { static: true } )
-    private xAxis: IgxCategoryXAxisComponent
-    @ViewChild("yAxis", { static: true } )
-    private yAxis: IgxNumericYAxisComponent
-    @ViewChild("lineSeries1", { static: true } )
-    private lineSeries1: IgxLineSeriesComponent
-    @ViewChild("calloutLayer1", { static: true } )
-    private calloutLayer1: IgxCalloutLayerComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("chart", { static: true } )
+	private chart: IgxDataChartComponent
+	@ViewChild("xAxis", { static: true } )
+	private xAxis: IgxCategoryXAxisComponent
+	@ViewChild("yAxis", { static: true } )
+	private yAxis: IgxNumericYAxisComponent
+	@ViewChild("lineSeries1", { static: true } )
+	private lineSeries1: IgxLineSeriesComponent
+	@ViewChild("calloutLayer1", { static: true } )
+	private calloutLayer1: IgxCalloutLayerComponent
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
     public get countryRenewableElectricity(): CountryRenewableElectricity {
         if (this._countryRenewableElectricity == null)
@@ -34,5 +31,13 @@ export class AppComponent {
         return this._countryRenewableElectricity;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/data-chart/dash-array-axes/src/app.component.ts b/samples/charts/data-chart/dash-array-axes/src/app.component.ts
index 829a2de47..9086ad69a 100644
--- a/samples/charts/data-chart/dash-array-axes/src/app.component.ts
+++ b/samples/charts/data-chart/dash-array-axes/src/app.component.ts
@@ -8,27 +8,24 @@ import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryXAxisComponent, I
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxDataChartComponent
-    @ViewChild("xAxis", { static: true } )
-    private xAxis: IgxCategoryXAxisComponent
-    @ViewChild("yAxis", { static: true } )
-    private yAxis: IgxNumericYAxisComponent
-    @ViewChild("lineSeries1", { static: true } )
-    private lineSeries1: IgxLineSeriesComponent
-    @ViewChild("lineSeries2", { static: true } )
-    private lineSeries2: IgxLineSeriesComponent
-    @ViewChild("lineSeries3", { static: true } )
-    private lineSeries3: IgxLineSeriesComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("legend", { static: true } )
+	private legend: IgxLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxDataChartComponent
+	@ViewChild("xAxis", { static: true } )
+	private xAxis: IgxCategoryXAxisComponent
+	@ViewChild("yAxis", { static: true } )
+	private yAxis: IgxNumericYAxisComponent
+	@ViewChild("lineSeries1", { static: true } )
+	private lineSeries1: IgxLineSeriesComponent
+	@ViewChild("lineSeries2", { static: true } )
+	private lineSeries2: IgxLineSeriesComponent
+	@ViewChild("lineSeries3", { static: true } )
+	private lineSeries3: IgxLineSeriesComponent
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
     public get countryRenewableElectricity(): CountryRenewableElectricity {
         if (this._countryRenewableElectricity == null)
@@ -38,5 +35,13 @@ export class AppComponent {
         return this._countryRenewableElectricity;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/data-chart/dash-array-series/src/app.component.ts b/samples/charts/data-chart/dash-array-series/src/app.component.ts
index 829a2de47..9086ad69a 100644
--- a/samples/charts/data-chart/dash-array-series/src/app.component.ts
+++ b/samples/charts/data-chart/dash-array-series/src/app.component.ts
@@ -8,27 +8,24 @@ import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryXAxisComponent, I
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxDataChartComponent
-    @ViewChild("xAxis", { static: true } )
-    private xAxis: IgxCategoryXAxisComponent
-    @ViewChild("yAxis", { static: true } )
-    private yAxis: IgxNumericYAxisComponent
-    @ViewChild("lineSeries1", { static: true } )
-    private lineSeries1: IgxLineSeriesComponent
-    @ViewChild("lineSeries2", { static: true } )
-    private lineSeries2: IgxLineSeriesComponent
-    @ViewChild("lineSeries3", { static: true } )
-    private lineSeries3: IgxLineSeriesComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("legend", { static: true } )
+	private legend: IgxLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxDataChartComponent
+	@ViewChild("xAxis", { static: true } )
+	private xAxis: IgxCategoryXAxisComponent
+	@ViewChild("yAxis", { static: true } )
+	private yAxis: IgxNumericYAxisComponent
+	@ViewChild("lineSeries1", { static: true } )
+	private lineSeries1: IgxLineSeriesComponent
+	@ViewChild("lineSeries2", { static: true } )
+	private lineSeries2: IgxLineSeriesComponent
+	@ViewChild("lineSeries3", { static: true } )
+	private lineSeries3: IgxLineSeriesComponent
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
     public get countryRenewableElectricity(): CountryRenewableElectricity {
         if (this._countryRenewableElectricity == null)
@@ -38,5 +35,13 @@ export class AppComponent {
         return this._countryRenewableElectricity;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/data-chart/dash-array-tickmarks/src/app.component.ts b/samples/charts/data-chart/dash-array-tickmarks/src/app.component.ts
index 00f9c93ed..6915a499b 100644
--- a/samples/charts/data-chart/dash-array-tickmarks/src/app.component.ts
+++ b/samples/charts/data-chart/dash-array-tickmarks/src/app.component.ts
@@ -8,21 +8,18 @@ import { IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisCompon
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("chart", { static: true } )
-    private chart: IgxDataChartComponent
-    @ViewChild("xAxis", { static: true } )
-    private xAxis: IgxCategoryXAxisComponent
-    @ViewChild("yAxis", { static: true } )
-    private yAxis: IgxNumericYAxisComponent
-    @ViewChild("columnSeries1", { static: true } )
-    private columnSeries1: IgxColumnSeriesComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("chart", { static: true } )
+	private chart: IgxDataChartComponent
+	@ViewChild("xAxis", { static: true } )
+	private xAxis: IgxCategoryXAxisComponent
+	@ViewChild("yAxis", { static: true } )
+	private yAxis: IgxNumericYAxisComponent
+	@ViewChild("columnSeries1", { static: true } )
+	private columnSeries1: IgxColumnSeriesComponent
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
     public get countryRenewableElectricity(): CountryRenewableElectricity {
         if (this._countryRenewableElectricity == null)
@@ -32,5 +29,13 @@ export class AppComponent {
         return this._countryRenewableElectricity;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/data-chart/dash-array-trendline/src/app.component.ts b/samples/charts/data-chart/dash-array-trendline/src/app.component.ts
index 40aa79cb9..dc495cc1d 100644
--- a/samples/charts/data-chart/dash-array-trendline/src/app.component.ts
+++ b/samples/charts/data-chart/dash-array-trendline/src/app.component.ts
@@ -8,21 +8,18 @@ import { IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisCompon
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("chart", { static: true } )
-    private chart: IgxDataChartComponent
-    @ViewChild("xAxis", { static: true } )
-    private xAxis: IgxCategoryXAxisComponent
-    @ViewChild("yAxis", { static: true } )
-    private yAxis: IgxNumericYAxisComponent
-    @ViewChild("series1", { static: true } )
-    private series1: IgxFinancialPriceSeriesComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("chart", { static: true } )
+	private chart: IgxDataChartComponent
+	@ViewChild("xAxis", { static: true } )
+	private xAxis: IgxCategoryXAxisComponent
+	@ViewChild("yAxis", { static: true } )
+	private yAxis: IgxNumericYAxisComponent
+	@ViewChild("series1", { static: true } )
+	private series1: IgxFinancialPriceSeriesComponent
     private _stock2Years: Stock2Years = null;
     public get stock2Years(): Stock2Years {
         if (this._stock2Years == null)
@@ -32,5 +29,13 @@ export class AppComponent {
         return this._stock2Years;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/data-chart/data-legend/src/app.component.ts b/samples/charts/data-chart/data-legend/src/app.component.ts
index 00e7bb142..7b200e628 100644
--- a/samples/charts/data-chart/data-legend/src/app.component.ts
+++ b/samples/charts/data-chart/data-legend/src/app.component.ts
@@ -9,31 +9,28 @@ import { IgxDataLegendComponent, IgxDataChartComponent, IgxNumericXAxisComponent
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
-
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxDataLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxDataChartComponent
-    @ViewChild("xAxis", { static: true } )
-    private xAxis: IgxNumericXAxisComponent
-    @ViewChild("yAxis", { static: true } )
-    private yAxis: IgxNumericYAxisComponent
-    @ViewChild("bubbleSeries1", { static: true } )
-    private bubbleSeries1: IgxBubbleSeriesComponent
-    @ViewChild("sizeScale1", { static: true } )
-    private sizeScale1: IgxSizeScaleComponent
-    @ViewChild("bubbleSeries2", { static: true } )
-    private bubbleSeries2: IgxBubbleSeriesComponent
-    @ViewChild("sizeScale2", { static: true } )
-    private sizeScale2: IgxSizeScaleComponent
-    @ViewChild("crosshairLayer", { static: true } )
-    private crosshairLayer: IgxCrosshairLayerComponent
 
+export class AppComponent implements AfterViewInit
+{
+
+	@ViewChild("legend", { static: true } )
+	private legend: IgxDataLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxDataChartComponent
+	@ViewChild("xAxis", { static: true } )
+	private xAxis: IgxNumericXAxisComponent
+	@ViewChild("yAxis", { static: true } )
+	private yAxis: IgxNumericYAxisComponent
+	@ViewChild("bubbleSeries1", { static: true } )
+	private bubbleSeries1: IgxBubbleSeriesComponent
+	@ViewChild("sizeScale1", { static: true } )
+	private sizeScale1: IgxSizeScaleComponent
+	@ViewChild("bubbleSeries2", { static: true } )
+	private bubbleSeries2: IgxBubbleSeriesComponent
+	@ViewChild("sizeScale2", { static: true } )
+	private sizeScale2: IgxSizeScaleComponent
+	@ViewChild("crosshairLayer", { static: true } )
+	private crosshairLayer: IgxCrosshairLayerComponent
     private _countryDemographicAfrican: CountryDemographicAfrican = null;
     public get countryDemographicAfrican(): CountryDemographicAfrican {
         if (this._countryDemographicAfrican == null)
@@ -52,5 +49,13 @@ export class AppComponent {
         return this._countryDemographicEurope;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/data-chart/data-tooltip/src/app.component.ts b/samples/charts/data-chart/data-tooltip/src/app.component.ts
index c6b6c6625..172281ef5 100644
--- a/samples/charts/data-chart/data-tooltip/src/app.component.ts
+++ b/samples/charts/data-chart/data-tooltip/src/app.component.ts
@@ -9,29 +9,26 @@ import { IgxDataChartComponent, IgxNumericXAxisComponent, IgxNumericYAxisCompone
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
-
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("chart", { static: true } )
-    private chart: IgxDataChartComponent
-    @ViewChild("xAxis", { static: true } )
-    private xAxis: IgxNumericXAxisComponent
-    @ViewChild("yAxis", { static: true } )
-    private yAxis: IgxNumericYAxisComponent
-    @ViewChild("bubbleSeries1", { static: true } )
-    private bubbleSeries1: IgxBubbleSeriesComponent
-    @ViewChild("sizeScale1", { static: true } )
-    private sizeScale1: IgxSizeScaleComponent
-    @ViewChild("bubbleSeries2", { static: true } )
-    private bubbleSeries2: IgxBubbleSeriesComponent
-    @ViewChild("sizeScale2", { static: true } )
-    private sizeScale2: IgxSizeScaleComponent
-    @ViewChild("dataToolTipLayer", { static: true } )
-    private dataToolTipLayer: IgxDataToolTipLayerComponent
 
+export class AppComponent implements AfterViewInit
+{
+
+	@ViewChild("chart", { static: true } )
+	private chart: IgxDataChartComponent
+	@ViewChild("xAxis", { static: true } )
+	private xAxis: IgxNumericXAxisComponent
+	@ViewChild("yAxis", { static: true } )
+	private yAxis: IgxNumericYAxisComponent
+	@ViewChild("bubbleSeries1", { static: true } )
+	private bubbleSeries1: IgxBubbleSeriesComponent
+	@ViewChild("sizeScale1", { static: true } )
+	private sizeScale1: IgxSizeScaleComponent
+	@ViewChild("bubbleSeries2", { static: true } )
+	private bubbleSeries2: IgxBubbleSeriesComponent
+	@ViewChild("sizeScale2", { static: true } )
+	private sizeScale2: IgxSizeScaleComponent
+	@ViewChild("dataToolTipLayer", { static: true } )
+	private dataToolTipLayer: IgxDataToolTipLayerComponent
     private _countryDemographicAfrican: CountryDemographicAfrican = null;
     public get countryDemographicAfrican(): CountryDemographicAfrican {
         if (this._countryDemographicAfrican == null)
@@ -50,5 +47,13 @@ export class AppComponent {
         return this._countryDemographicEurope;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/data-chart/financial-price-series/src/app.component.ts b/samples/charts/data-chart/financial-price-series/src/app.component.ts
index feb227362..cb899d910 100644
--- a/samples/charts/data-chart/financial-price-series/src/app.component.ts
+++ b/samples/charts/data-chart/financial-price-series/src/app.component.ts
@@ -8,23 +8,20 @@ import { IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisCompon
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("chart", { static: true } )
-    private chart: IgxDataChartComponent
-    @ViewChild("xAxis", { static: true } )
-    private xAxis: IgxCategoryXAxisComponent
-    @ViewChild("yAxis", { static: true } )
-    private yAxis: IgxNumericYAxisComponent
-    @ViewChild("series1", { static: true } )
-    private series1: IgxFinancialPriceSeriesComponent
-    @ViewChild("tooltip", { static: true } )
-    private tooltip: IgxDataToolTipLayerComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("chart", { static: true } )
+	private chart: IgxDataChartComponent
+	@ViewChild("xAxis", { static: true } )
+	private xAxis: IgxCategoryXAxisComponent
+	@ViewChild("yAxis", { static: true } )
+	private yAxis: IgxNumericYAxisComponent
+	@ViewChild("series1", { static: true } )
+	private series1: IgxFinancialPriceSeriesComponent
+	@ViewChild("tooltip", { static: true } )
+	private tooltip: IgxDataToolTipLayerComponent
     private _stock2Years: Stock2Years = null;
     public get stock2Years(): Stock2Years {
         if (this._stock2Years == null)
@@ -34,5 +31,13 @@ export class AppComponent {
         return this._stock2Years;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/data-chart/format-specifiers/src/app.component.ts b/samples/charts/data-chart/format-specifiers/src/app.component.ts
index fc0fed04e..85545a924 100644
--- a/samples/charts/data-chart/format-specifiers/src/app.component.ts
+++ b/samples/charts/data-chart/format-specifiers/src/app.component.ts
@@ -9,43 +9,40 @@ import { IgxNumberFormatSpecifier } from 'igniteui-angular-core';
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
+export class AppComponent implements AfterViewInit
+{
 
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxDataLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxDataChartComponent
-    @ViewChild("yAxis", { static: true } )
-    private yAxis: IgxCategoryYAxisComponent
-    @ViewChild("xAxis", { static: true } )
-    private xAxis: IgxNumericXAxisComponent
-    private _numberFormatSpecifier1: IgxNumberFormatSpecifier[] | null = null;
-    public get numberFormatSpecifier1(): IgxNumberFormatSpecifier[] {
-        if (this._numberFormatSpecifier1 == null)
-        {
-            let numberFormatSpecifier1: IgxNumberFormatSpecifier[] = [];
-            var numberFormatSpecifier2 = new IgxNumberFormatSpecifier();
-            numberFormatSpecifier2.style = "currency";
-            numberFormatSpecifier2.currency = "USD";
-            numberFormatSpecifier2.currencyDisplay = "symbol";
-            numberFormatSpecifier2.minimumFractionDigits = 0;
-
-            numberFormatSpecifier1.push(numberFormatSpecifier2)
-            this._numberFormatSpecifier1 = numberFormatSpecifier1;
-        }
-        return this._numberFormatSpecifier1;
-    }
-    @ViewChild("barSeries1", { static: true } )
-    private barSeries1: IgxBarSeriesComponent
-    @ViewChild("barSeries2", { static: true } )
-    private barSeries2: IgxBarSeriesComponent
-    @ViewChild("tooltips", { static: true } )
-    private tooltips: IgxDataToolTipLayerComponent
+	@ViewChild("legend", { static: true } )
+	private legend: IgxDataLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxDataChartComponent
+	@ViewChild("yAxis", { static: true } )
+	private yAxis: IgxCategoryYAxisComponent
+	@ViewChild("xAxis", { static: true } )
+	private xAxis: IgxNumericXAxisComponent
+	private _numberFormatSpecifier1: IgxNumberFormatSpecifier[] | null = null;
+	public get numberFormatSpecifier1(): IgxNumberFormatSpecifier[] {
+	    if (this._numberFormatSpecifier1 == null)
+	    {
+	        let numberFormatSpecifier1: IgxNumberFormatSpecifier[] = [];
+	        var numberFormatSpecifier2 = new IgxNumberFormatSpecifier();
+	        numberFormatSpecifier2.style = "currency";
+	        numberFormatSpecifier2.currency = "USD";
+	        numberFormatSpecifier2.currencyDisplay = "symbol";
+	        numberFormatSpecifier2.minimumFractionDigits = 0;
 
+	        numberFormatSpecifier1.push(numberFormatSpecifier2)
+	        this._numberFormatSpecifier1 = numberFormatSpecifier1;
+	    }
+	    return this._numberFormatSpecifier1;
+	}
+	@ViewChild("barSeries1", { static: true } )
+	private barSeries1: IgxBarSeriesComponent
+	@ViewChild("barSeries2", { static: true } )
+	private barSeries2: IgxBarSeriesComponent
+	@ViewChild("tooltips", { static: true } )
+	private tooltips: IgxDataToolTipLayerComponent
     private _highestGrossingMovies: HighestGrossingMovies = null;
     public get highestGrossingMovies(): HighestGrossingMovies {
         if (this._highestGrossingMovies == null)
@@ -55,5 +52,13 @@ export class AppComponent {
         return this._highestGrossingMovies;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/data-chart/polar-area-chart-styling/src/app.component.ts b/samples/charts/data-chart/polar-area-chart-styling/src/app.component.ts
index 431a6b332..27eefd200 100644
--- a/samples/charts/data-chart/polar-area-chart-styling/src/app.component.ts
+++ b/samples/charts/data-chart/polar-area-chart-styling/src/app.component.ts
@@ -8,25 +8,22 @@ import { IgxLegendComponent, IgxDataChartComponent, IgxNumericAngleAxisComponent
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxDataChartComponent
-    @ViewChild("angleAxis", { static: true } )
-    private angleAxis: IgxNumericAngleAxisComponent
-    @ViewChild("radiusAxis", { static: true } )
-    private radiusAxis: IgxNumericRadiusAxisComponent
-    @ViewChild("polarAreaSeries1", { static: true } )
-    private polarAreaSeries1: IgxPolarAreaSeriesComponent
-    @ViewChild("polarAreaSeries2", { static: true } )
-    private polarAreaSeries2: IgxPolarAreaSeriesComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("legend", { static: true } )
+	private legend: IgxLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxDataChartComponent
+	@ViewChild("angleAxis", { static: true } )
+	private angleAxis: IgxNumericAngleAxisComponent
+	@ViewChild("radiusAxis", { static: true } )
+	private radiusAxis: IgxNumericRadiusAxisComponent
+	@ViewChild("polarAreaSeries1", { static: true } )
+	private polarAreaSeries1: IgxPolarAreaSeriesComponent
+	@ViewChild("polarAreaSeries2", { static: true } )
+	private polarAreaSeries2: IgxPolarAreaSeriesComponent
     private _boatSailingData: BoatSailingData = null;
     public get boatSailingData(): BoatSailingData {
         if (this._boatSailingData == null)
@@ -36,5 +33,13 @@ export class AppComponent {
         return this._boatSailingData;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/data-chart/polar-area-chart/src/app.component.ts b/samples/charts/data-chart/polar-area-chart/src/app.component.ts
index 562d5a050..b927a2be0 100644
--- a/samples/charts/data-chart/polar-area-chart/src/app.component.ts
+++ b/samples/charts/data-chart/polar-area-chart/src/app.component.ts
@@ -8,27 +8,24 @@ import { IgxLegendComponent, IgxDataChartComponent, IgxNumericAngleAxisComponent
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxDataChartComponent
-    @ViewChild("angleAxis", { static: true } )
-    private angleAxis: IgxNumericAngleAxisComponent
-    @ViewChild("radiusAxis", { static: true } )
-    private radiusAxis: IgxNumericRadiusAxisComponent
-    @ViewChild("polarAreaSeries1", { static: true } )
-    private polarAreaSeries1: IgxPolarAreaSeriesComponent
-    @ViewChild("polarAreaSeries2", { static: true } )
-    private polarAreaSeries2: IgxPolarAreaSeriesComponent
-    @ViewChild("dataToolTipLayer", { static: true } )
-    private dataToolTipLayer: IgxDataToolTipLayerComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("legend", { static: true } )
+	private legend: IgxLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxDataChartComponent
+	@ViewChild("angleAxis", { static: true } )
+	private angleAxis: IgxNumericAngleAxisComponent
+	@ViewChild("radiusAxis", { static: true } )
+	private radiusAxis: IgxNumericRadiusAxisComponent
+	@ViewChild("polarAreaSeries1", { static: true } )
+	private polarAreaSeries1: IgxPolarAreaSeriesComponent
+	@ViewChild("polarAreaSeries2", { static: true } )
+	private polarAreaSeries2: IgxPolarAreaSeriesComponent
+	@ViewChild("dataToolTipLayer", { static: true } )
+	private dataToolTipLayer: IgxDataToolTipLayerComponent
     private _boatSailingData: BoatSailingData = null;
     public get boatSailingData(): BoatSailingData {
         if (this._boatSailingData == null)
@@ -38,5 +35,13 @@ export class AppComponent {
         return this._boatSailingData;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/data-chart/polar-line-chart/src/app.component.ts b/samples/charts/data-chart/polar-line-chart/src/app.component.ts
index 91ff581e7..9fc0bdd6f 100644
--- a/samples/charts/data-chart/polar-line-chart/src/app.component.ts
+++ b/samples/charts/data-chart/polar-line-chart/src/app.component.ts
@@ -8,27 +8,24 @@ import { IgxLegendComponent, IgxDataChartComponent, IgxNumericAngleAxisComponent
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxDataChartComponent
-    @ViewChild("angleAxis", { static: true } )
-    private angleAxis: IgxNumericAngleAxisComponent
-    @ViewChild("radiusAxis", { static: true } )
-    private radiusAxis: IgxNumericRadiusAxisComponent
-    @ViewChild("polarLineSeries1", { static: true } )
-    private polarLineSeries1: IgxPolarLineSeriesComponent
-    @ViewChild("polarLineSeries2", { static: true } )
-    private polarLineSeries2: IgxPolarLineSeriesComponent
-    @ViewChild("dataToolTipLayer", { static: true } )
-    private dataToolTipLayer: IgxDataToolTipLayerComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("legend", { static: true } )
+	private legend: IgxLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxDataChartComponent
+	@ViewChild("angleAxis", { static: true } )
+	private angleAxis: IgxNumericAngleAxisComponent
+	@ViewChild("radiusAxis", { static: true } )
+	private radiusAxis: IgxNumericRadiusAxisComponent
+	@ViewChild("polarLineSeries1", { static: true } )
+	private polarLineSeries1: IgxPolarLineSeriesComponent
+	@ViewChild("polarLineSeries2", { static: true } )
+	private polarLineSeries2: IgxPolarLineSeriesComponent
+	@ViewChild("dataToolTipLayer", { static: true } )
+	private dataToolTipLayer: IgxDataToolTipLayerComponent
     private _boatSailingData: BoatSailingData = null;
     public get boatSailingData(): BoatSailingData {
         if (this._boatSailingData == null)
@@ -38,5 +35,13 @@ export class AppComponent {
         return this._boatSailingData;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/data-chart/polar-scatter-chart/src/app.component.ts b/samples/charts/data-chart/polar-scatter-chart/src/app.component.ts
index dd872b853..03ceb77a4 100644
--- a/samples/charts/data-chart/polar-scatter-chart/src/app.component.ts
+++ b/samples/charts/data-chart/polar-scatter-chart/src/app.component.ts
@@ -8,25 +8,22 @@ import { IgxDataChartComponent, IgxNumericAngleAxisComponent, IgxNumericRadiusAx
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("chart", { static: true } )
-    private chart: IgxDataChartComponent
-    @ViewChild("angleAxis", { static: true } )
-    private angleAxis: IgxNumericAngleAxisComponent
-    @ViewChild("radiusAxis", { static: true } )
-    private radiusAxis: IgxNumericRadiusAxisComponent
-    @ViewChild("polarScatterSeries1", { static: true } )
-    private polarScatterSeries1: IgxPolarScatterSeriesComponent
-    @ViewChild("polarScatterSeries2", { static: true } )
-    private polarScatterSeries2: IgxPolarScatterSeriesComponent
-    @ViewChild("dataToolTipLayer", { static: true } )
-    private dataToolTipLayer: IgxDataToolTipLayerComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("chart", { static: true } )
+	private chart: IgxDataChartComponent
+	@ViewChild("angleAxis", { static: true } )
+	private angleAxis: IgxNumericAngleAxisComponent
+	@ViewChild("radiusAxis", { static: true } )
+	private radiusAxis: IgxNumericRadiusAxisComponent
+	@ViewChild("polarScatterSeries1", { static: true } )
+	private polarScatterSeries1: IgxPolarScatterSeriesComponent
+	@ViewChild("polarScatterSeries2", { static: true } )
+	private polarScatterSeries2: IgxPolarScatterSeriesComponent
+	@ViewChild("dataToolTipLayer", { static: true } )
+	private dataToolTipLayer: IgxDataToolTipLayerComponent
     private _boatSailingData: BoatSailingData = null;
     public get boatSailingData(): BoatSailingData {
         if (this._boatSailingData == null)
@@ -36,5 +33,13 @@ export class AppComponent {
         return this._boatSailingData;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/data-chart/polar-spline-area-chart/src/app.component.ts b/samples/charts/data-chart/polar-spline-area-chart/src/app.component.ts
index ae65fce59..52c2c3a8c 100644
--- a/samples/charts/data-chart/polar-spline-area-chart/src/app.component.ts
+++ b/samples/charts/data-chart/polar-spline-area-chart/src/app.component.ts
@@ -8,25 +8,22 @@ import { IgxDataChartComponent, IgxNumericAngleAxisComponent, IgxNumericRadiusAx
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("chart", { static: true } )
-    private chart: IgxDataChartComponent
-    @ViewChild("angleAxis", { static: true } )
-    private angleAxis: IgxNumericAngleAxisComponent
-    @ViewChild("radiusAxis", { static: true } )
-    private radiusAxis: IgxNumericRadiusAxisComponent
-    @ViewChild("polarSplineAreaSeries1", { static: true } )
-    private polarSplineAreaSeries1: IgxPolarSplineAreaSeriesComponent
-    @ViewChild("polarSplineAreaSeries2", { static: true } )
-    private polarSplineAreaSeries2: IgxPolarSplineAreaSeriesComponent
-    @ViewChild("dataToolTipLayer", { static: true } )
-    private dataToolTipLayer: IgxDataToolTipLayerComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("chart", { static: true } )
+	private chart: IgxDataChartComponent
+	@ViewChild("angleAxis", { static: true } )
+	private angleAxis: IgxNumericAngleAxisComponent
+	@ViewChild("radiusAxis", { static: true } )
+	private radiusAxis: IgxNumericRadiusAxisComponent
+	@ViewChild("polarSplineAreaSeries1", { static: true } )
+	private polarSplineAreaSeries1: IgxPolarSplineAreaSeriesComponent
+	@ViewChild("polarSplineAreaSeries2", { static: true } )
+	private polarSplineAreaSeries2: IgxPolarSplineAreaSeriesComponent
+	@ViewChild("dataToolTipLayer", { static: true } )
+	private dataToolTipLayer: IgxDataToolTipLayerComponent
     private _boatSailingData: BoatSailingData = null;
     public get boatSailingData(): BoatSailingData {
         if (this._boatSailingData == null)
@@ -36,5 +33,13 @@ export class AppComponent {
         return this._boatSailingData;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/data-chart/polar-spline-chart/src/app.component.ts b/samples/charts/data-chart/polar-spline-chart/src/app.component.ts
index eb4e68596..99447b199 100644
--- a/samples/charts/data-chart/polar-spline-chart/src/app.component.ts
+++ b/samples/charts/data-chart/polar-spline-chart/src/app.component.ts
@@ -8,25 +8,22 @@ import { IgxDataChartComponent, IgxNumericAngleAxisComponent, IgxNumericRadiusAx
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("chart", { static: true } )
-    private chart: IgxDataChartComponent
-    @ViewChild("angleAxis", { static: true } )
-    private angleAxis: IgxNumericAngleAxisComponent
-    @ViewChild("radiusAxis", { static: true } )
-    private radiusAxis: IgxNumericRadiusAxisComponent
-    @ViewChild("polarSplineSeries1", { static: true } )
-    private polarSplineSeries1: IgxPolarSplineSeriesComponent
-    @ViewChild("polarSplineSeries2", { static: true } )
-    private polarSplineSeries2: IgxPolarSplineSeriesComponent
-    @ViewChild("dataToolTipLayer", { static: true } )
-    private dataToolTipLayer: IgxDataToolTipLayerComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("chart", { static: true } )
+	private chart: IgxDataChartComponent
+	@ViewChild("angleAxis", { static: true } )
+	private angleAxis: IgxNumericAngleAxisComponent
+	@ViewChild("radiusAxis", { static: true } )
+	private radiusAxis: IgxNumericRadiusAxisComponent
+	@ViewChild("polarSplineSeries1", { static: true } )
+	private polarSplineSeries1: IgxPolarSplineSeriesComponent
+	@ViewChild("polarSplineSeries2", { static: true } )
+	private polarSplineSeries2: IgxPolarSplineSeriesComponent
+	@ViewChild("dataToolTipLayer", { static: true } )
+	private dataToolTipLayer: IgxDataToolTipLayerComponent
     private _boatSailingData: BoatSailingData = null;
     public get boatSailingData(): BoatSailingData {
         if (this._boatSailingData == null)
@@ -36,5 +33,13 @@ export class AppComponent {
         return this._boatSailingData;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/data-chart/radial-area-chart-styling/src/app.component.ts b/samples/charts/data-chart/radial-area-chart-styling/src/app.component.ts
index 3536280bc..a6609b0db 100644
--- a/samples/charts/data-chart/radial-area-chart-styling/src/app.component.ts
+++ b/samples/charts/data-chart/radial-area-chart-styling/src/app.component.ts
@@ -8,25 +8,22 @@ import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryAngleAxisComponen
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxDataChartComponent
-    @ViewChild("angleAxis", { static: true } )
-    private angleAxis: IgxCategoryAngleAxisComponent
-    @ViewChild("radiusAxis", { static: true } )
-    private radiusAxis: IgxNumericRadiusAxisComponent
-    @ViewChild("radialAreaSeries1", { static: true } )
-    private radialAreaSeries1: IgxRadialAreaSeriesComponent
-    @ViewChild("radialAreaSeries2", { static: true } )
-    private radialAreaSeries2: IgxRadialAreaSeriesComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("legend", { static: true } )
+	private legend: IgxLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxDataChartComponent
+	@ViewChild("angleAxis", { static: true } )
+	private angleAxis: IgxCategoryAngleAxisComponent
+	@ViewChild("radiusAxis", { static: true } )
+	private radiusAxis: IgxNumericRadiusAxisComponent
+	@ViewChild("radialAreaSeries1", { static: true } )
+	private radialAreaSeries1: IgxRadialAreaSeriesComponent
+	@ViewChild("radialAreaSeries2", { static: true } )
+	private radialAreaSeries2: IgxRadialAreaSeriesComponent
     private _footballPlayerStats: FootballPlayerStats = null;
     public get footballPlayerStats(): FootballPlayerStats {
         if (this._footballPlayerStats == null)
@@ -36,5 +33,13 @@ export class AppComponent {
         return this._footballPlayerStats;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/data-chart/radial-area-chart/src/app.component.ts b/samples/charts/data-chart/radial-area-chart/src/app.component.ts
index 9e2b52823..2b8c9b3f3 100644
--- a/samples/charts/data-chart/radial-area-chart/src/app.component.ts
+++ b/samples/charts/data-chart/radial-area-chart/src/app.component.ts
@@ -8,27 +8,24 @@ import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryAngleAxisComponen
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxDataChartComponent
-    @ViewChild("angleAxis", { static: true } )
-    private angleAxis: IgxCategoryAngleAxisComponent
-    @ViewChild("radiusAxis", { static: true } )
-    private radiusAxis: IgxNumericRadiusAxisComponent
-    @ViewChild("radialAreaSeries1", { static: true } )
-    private radialAreaSeries1: IgxRadialAreaSeriesComponent
-    @ViewChild("radialAreaSeries2", { static: true } )
-    private radialAreaSeries2: IgxRadialAreaSeriesComponent
-    @ViewChild("dataToolTipLayer", { static: true } )
-    private dataToolTipLayer: IgxDataToolTipLayerComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("legend", { static: true } )
+	private legend: IgxLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxDataChartComponent
+	@ViewChild("angleAxis", { static: true } )
+	private angleAxis: IgxCategoryAngleAxisComponent
+	@ViewChild("radiusAxis", { static: true } )
+	private radiusAxis: IgxNumericRadiusAxisComponent
+	@ViewChild("radialAreaSeries1", { static: true } )
+	private radialAreaSeries1: IgxRadialAreaSeriesComponent
+	@ViewChild("radialAreaSeries2", { static: true } )
+	private radialAreaSeries2: IgxRadialAreaSeriesComponent
+	@ViewChild("dataToolTipLayer", { static: true } )
+	private dataToolTipLayer: IgxDataToolTipLayerComponent
     private _footballPlayerStats: FootballPlayerStats = null;
     public get footballPlayerStats(): FootballPlayerStats {
         if (this._footballPlayerStats == null)
@@ -38,5 +35,13 @@ export class AppComponent {
         return this._footballPlayerStats;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/data-chart/radial-column-chart/src/app.component.ts b/samples/charts/data-chart/radial-column-chart/src/app.component.ts
index 6f2ca8919..6f51ac4c9 100644
--- a/samples/charts/data-chart/radial-column-chart/src/app.component.ts
+++ b/samples/charts/data-chart/radial-column-chart/src/app.component.ts
@@ -8,27 +8,24 @@ import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryAngleAxisComponen
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxDataChartComponent
-    @ViewChild("angleAxis", { static: true } )
-    private angleAxis: IgxCategoryAngleAxisComponent
-    @ViewChild("radiusAxis", { static: true } )
-    private radiusAxis: IgxNumericRadiusAxisComponent
-    @ViewChild("radialColumnSeries1", { static: true } )
-    private radialColumnSeries1: IgxRadialColumnSeriesComponent
-    @ViewChild("radialColumnSeries2", { static: true } )
-    private radialColumnSeries2: IgxRadialColumnSeriesComponent
-    @ViewChild("dataToolTipLayer", { static: true } )
-    private dataToolTipLayer: IgxDataToolTipLayerComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("legend", { static: true } )
+	private legend: IgxLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxDataChartComponent
+	@ViewChild("angleAxis", { static: true } )
+	private angleAxis: IgxCategoryAngleAxisComponent
+	@ViewChild("radiusAxis", { static: true } )
+	private radiusAxis: IgxNumericRadiusAxisComponent
+	@ViewChild("radialColumnSeries1", { static: true } )
+	private radialColumnSeries1: IgxRadialColumnSeriesComponent
+	@ViewChild("radialColumnSeries2", { static: true } )
+	private radialColumnSeries2: IgxRadialColumnSeriesComponent
+	@ViewChild("dataToolTipLayer", { static: true } )
+	private dataToolTipLayer: IgxDataToolTipLayerComponent
     private _footballPlayerStats: FootballPlayerStats = null;
     public get footballPlayerStats(): FootballPlayerStats {
         if (this._footballPlayerStats == null)
@@ -38,5 +35,13 @@ export class AppComponent {
         return this._footballPlayerStats;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/data-chart/radial-line-chart/src/app.component.ts b/samples/charts/data-chart/radial-line-chart/src/app.component.ts
index acc1445d4..cda60a81a 100644
--- a/samples/charts/data-chart/radial-line-chart/src/app.component.ts
+++ b/samples/charts/data-chart/radial-line-chart/src/app.component.ts
@@ -8,27 +8,24 @@ import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryAngleAxisComponen
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxDataChartComponent
-    @ViewChild("angleAxis", { static: true } )
-    private angleAxis: IgxCategoryAngleAxisComponent
-    @ViewChild("radiusAxis", { static: true } )
-    private radiusAxis: IgxNumericRadiusAxisComponent
-    @ViewChild("radialLineSeries1", { static: true } )
-    private radialLineSeries1: IgxRadialLineSeriesComponent
-    @ViewChild("radialLineSeries2", { static: true } )
-    private radialLineSeries2: IgxRadialLineSeriesComponent
-    @ViewChild("dataToolTipLayer", { static: true } )
-    private dataToolTipLayer: IgxDataToolTipLayerComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("legend", { static: true } )
+	private legend: IgxLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxDataChartComponent
+	@ViewChild("angleAxis", { static: true } )
+	private angleAxis: IgxCategoryAngleAxisComponent
+	@ViewChild("radiusAxis", { static: true } )
+	private radiusAxis: IgxNumericRadiusAxisComponent
+	@ViewChild("radialLineSeries1", { static: true } )
+	private radialLineSeries1: IgxRadialLineSeriesComponent
+	@ViewChild("radialLineSeries2", { static: true } )
+	private radialLineSeries2: IgxRadialLineSeriesComponent
+	@ViewChild("dataToolTipLayer", { static: true } )
+	private dataToolTipLayer: IgxDataToolTipLayerComponent
     private _footballPlayerStats: FootballPlayerStats = null;
     public get footballPlayerStats(): FootballPlayerStats {
         if (this._footballPlayerStats == null)
@@ -38,5 +35,13 @@ export class AppComponent {
         return this._footballPlayerStats;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/data-chart/radial-pie-chart/src/app.component.ts b/samples/charts/data-chart/radial-pie-chart/src/app.component.ts
index 214a1aeaf..077457f00 100644
--- a/samples/charts/data-chart/radial-pie-chart/src/app.component.ts
+++ b/samples/charts/data-chart/radial-pie-chart/src/app.component.ts
@@ -8,27 +8,24 @@ import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryAngleAxisComponen
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxDataChartComponent
-    @ViewChild("angleAxis", { static: true } )
-    private angleAxis: IgxCategoryAngleAxisComponent
-    @ViewChild("radiusAxis", { static: true } )
-    private radiusAxis: IgxNumericRadiusAxisComponent
-    @ViewChild("radialPieSeries1", { static: true } )
-    private radialPieSeries1: IgxRadialPieSeriesComponent
-    @ViewChild("radialPieSeries2", { static: true } )
-    private radialPieSeries2: IgxRadialPieSeriesComponent
-    @ViewChild("dataToolTipLayer", { static: true } )
-    private dataToolTipLayer: IgxDataToolTipLayerComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("legend", { static: true } )
+	private legend: IgxLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxDataChartComponent
+	@ViewChild("angleAxis", { static: true } )
+	private angleAxis: IgxCategoryAngleAxisComponent
+	@ViewChild("radiusAxis", { static: true } )
+	private radiusAxis: IgxNumericRadiusAxisComponent
+	@ViewChild("radialPieSeries1", { static: true } )
+	private radialPieSeries1: IgxRadialPieSeriesComponent
+	@ViewChild("radialPieSeries2", { static: true } )
+	private radialPieSeries2: IgxRadialPieSeriesComponent
+	@ViewChild("dataToolTipLayer", { static: true } )
+	private dataToolTipLayer: IgxDataToolTipLayerComponent
     private _footballPlayerStats: FootballPlayerStats = null;
     public get footballPlayerStats(): FootballPlayerStats {
         if (this._footballPlayerStats == null)
@@ -38,5 +35,13 @@ export class AppComponent {
         return this._footballPlayerStats;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/data-chart/range-area-chart/src/app.component.ts b/samples/charts/data-chart/range-area-chart/src/app.component.ts
index b8e4d2ed8..d15f056a7 100644
--- a/samples/charts/data-chart/range-area-chart/src/app.component.ts
+++ b/samples/charts/data-chart/range-area-chart/src/app.component.ts
@@ -8,27 +8,24 @@ import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryXAxisComponent, I
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxDataChartComponent
-    @ViewChild("xAxis", { static: true } )
-    private xAxis: IgxCategoryXAxisComponent
-    @ViewChild("yAxis", { static: true } )
-    private yAxis: IgxNumericYAxisComponent
-    @ViewChild("rangeAreaSeries1", { static: true } )
-    private rangeAreaSeries1: IgxRangeAreaSeriesComponent
-    @ViewChild("rangeAreaSeries2", { static: true } )
-    private rangeAreaSeries2: IgxRangeAreaSeriesComponent
-    @ViewChild("dataToolTipLayer", { static: true } )
-    private dataToolTipLayer: IgxDataToolTipLayerComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("legend", { static: true } )
+	private legend: IgxLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxDataChartComponent
+	@ViewChild("xAxis", { static: true } )
+	private xAxis: IgxCategoryXAxisComponent
+	@ViewChild("yAxis", { static: true } )
+	private yAxis: IgxNumericYAxisComponent
+	@ViewChild("rangeAreaSeries1", { static: true } )
+	private rangeAreaSeries1: IgxRangeAreaSeriesComponent
+	@ViewChild("rangeAreaSeries2", { static: true } )
+	private rangeAreaSeries2: IgxRangeAreaSeriesComponent
+	@ViewChild("dataToolTipLayer", { static: true } )
+	private dataToolTipLayer: IgxDataToolTipLayerComponent
     private _temperatureRangeData: TemperatureRangeData = null;
     public get temperatureRangeData(): TemperatureRangeData {
         if (this._temperatureRangeData == null)
@@ -38,5 +35,13 @@ export class AppComponent {
         return this._temperatureRangeData;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/data-chart/range-column-chart/src/app.component.ts b/samples/charts/data-chart/range-column-chart/src/app.component.ts
index 5054bcbbd..d2fada297 100644
--- a/samples/charts/data-chart/range-column-chart/src/app.component.ts
+++ b/samples/charts/data-chart/range-column-chart/src/app.component.ts
@@ -8,27 +8,24 @@ import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryXAxisComponent, I
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxDataChartComponent
-    @ViewChild("xAxis", { static: true } )
-    private xAxis: IgxCategoryXAxisComponent
-    @ViewChild("yAxis", { static: true } )
-    private yAxis: IgxNumericYAxisComponent
-    @ViewChild("rangeColumnSeries1", { static: true } )
-    private rangeColumnSeries1: IgxRangeColumnSeriesComponent
-    @ViewChild("rangeColumnSeries2", { static: true } )
-    private rangeColumnSeries2: IgxRangeColumnSeriesComponent
-    @ViewChild("dataToolTipLayer", { static: true } )
-    private dataToolTipLayer: IgxDataToolTipLayerComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("legend", { static: true } )
+	private legend: IgxLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxDataChartComponent
+	@ViewChild("xAxis", { static: true } )
+	private xAxis: IgxCategoryXAxisComponent
+	@ViewChild("yAxis", { static: true } )
+	private yAxis: IgxNumericYAxisComponent
+	@ViewChild("rangeColumnSeries1", { static: true } )
+	private rangeColumnSeries1: IgxRangeColumnSeriesComponent
+	@ViewChild("rangeColumnSeries2", { static: true } )
+	private rangeColumnSeries2: IgxRangeColumnSeriesComponent
+	@ViewChild("dataToolTipLayer", { static: true } )
+	private dataToolTipLayer: IgxDataToolTipLayerComponent
     private _temperatureRangeData: TemperatureRangeData = null;
     public get temperatureRangeData(): TemperatureRangeData {
         if (this._temperatureRangeData == null)
@@ -38,5 +35,13 @@ export class AppComponent {
         return this._temperatureRangeData;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/data-chart/scatter-line-chart/src/app.component.ts b/samples/charts/data-chart/scatter-line-chart/src/app.component.ts
index 625a2a234..37d653fd6 100644
--- a/samples/charts/data-chart/scatter-line-chart/src/app.component.ts
+++ b/samples/charts/data-chart/scatter-line-chart/src/app.component.ts
@@ -9,27 +9,24 @@ import { IgxLegendComponent, IgxDataChartComponent, IgxNumericXAxisComponent, Ig
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
-
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxDataChartComponent
-    @ViewChild("xAxis", { static: true } )
-    private xAxis: IgxNumericXAxisComponent
-    @ViewChild("yAxis", { static: true } )
-    private yAxis: IgxNumericYAxisComponent
-    @ViewChild("scatterLineSeries1", { static: true } )
-    private scatterLineSeries1: IgxScatterLineSeriesComponent
-    @ViewChild("scatterLineSeries2", { static: true } )
-    private scatterLineSeries2: IgxScatterLineSeriesComponent
-    @ViewChild("dataToolTipLayer", { static: true } )
-    private dataToolTipLayer: IgxDataToolTipLayerComponent
 
+export class AppComponent implements AfterViewInit
+{
+
+	@ViewChild("legend", { static: true } )
+	private legend: IgxLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxDataChartComponent
+	@ViewChild("xAxis", { static: true } )
+	private xAxis: IgxNumericXAxisComponent
+	@ViewChild("yAxis", { static: true } )
+	private yAxis: IgxNumericYAxisComponent
+	@ViewChild("scatterLineSeries1", { static: true } )
+	private scatterLineSeries1: IgxScatterLineSeriesComponent
+	@ViewChild("scatterLineSeries2", { static: true } )
+	private scatterLineSeries2: IgxScatterLineSeriesComponent
+	@ViewChild("dataToolTipLayer", { static: true } )
+	private dataToolTipLayer: IgxDataToolTipLayerComponent
     private _healthDataForGermany: HealthDataForGermany = null;
     public get healthDataForGermany(): HealthDataForGermany {
         if (this._healthDataForGermany == null)
@@ -48,5 +45,13 @@ export class AppComponent {
         return this._healthDataForFrance;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/data-chart/scatter-point-chart/src/app.component.ts b/samples/charts/data-chart/scatter-point-chart/src/app.component.ts
index 8fc50a7c9..769f5bf3c 100644
--- a/samples/charts/data-chart/scatter-point-chart/src/app.component.ts
+++ b/samples/charts/data-chart/scatter-point-chart/src/app.component.ts
@@ -9,25 +9,22 @@ import { IgxLegendComponent, IgxDataChartComponent, IgxNumericXAxisComponent, Ig
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
-
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxDataChartComponent
-    @ViewChild("xAxis", { static: true } )
-    private xAxis: IgxNumericXAxisComponent
-    @ViewChild("yAxis", { static: true } )
-    private yAxis: IgxNumericYAxisComponent
-    @ViewChild("scatterSeries1", { static: true } )
-    private scatterSeries1: IgxScatterSeriesComponent
-    @ViewChild("scatterSeries2", { static: true } )
-    private scatterSeries2: IgxScatterSeriesComponent
 
+export class AppComponent implements AfterViewInit
+{
+
+	@ViewChild("legend", { static: true } )
+	private legend: IgxLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxDataChartComponent
+	@ViewChild("xAxis", { static: true } )
+	private xAxis: IgxNumericXAxisComponent
+	@ViewChild("yAxis", { static: true } )
+	private yAxis: IgxNumericYAxisComponent
+	@ViewChild("scatterSeries1", { static: true } )
+	private scatterSeries1: IgxScatterSeriesComponent
+	@ViewChild("scatterSeries2", { static: true } )
+	private scatterSeries2: IgxScatterSeriesComponent
     private _countryDemographicEurope: CountryDemographicEurope = null;
     public get countryDemographicEurope(): CountryDemographicEurope {
         if (this._countryDemographicEurope == null)
@@ -46,5 +43,13 @@ export class AppComponent {
         return this._countryDemographicAfrican;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/data-chart/scatter-spline-chart/src/app.component.ts b/samples/charts/data-chart/scatter-spline-chart/src/app.component.ts
index 98dd3f6f7..6598143e8 100644
--- a/samples/charts/data-chart/scatter-spline-chart/src/app.component.ts
+++ b/samples/charts/data-chart/scatter-spline-chart/src/app.component.ts
@@ -9,27 +9,24 @@ import { IgxLegendComponent, IgxDataChartComponent, IgxNumericXAxisComponent, Ig
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
-
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxDataChartComponent
-    @ViewChild("xAxis", { static: true } )
-    private xAxis: IgxNumericXAxisComponent
-    @ViewChild("yAxis", { static: true } )
-    private yAxis: IgxNumericYAxisComponent
-    @ViewChild("scatterSplineSeries1", { static: true } )
-    private scatterSplineSeries1: IgxScatterSplineSeriesComponent
-    @ViewChild("scatterSplineSeries2", { static: true } )
-    private scatterSplineSeries2: IgxScatterSplineSeriesComponent
-    @ViewChild("dataToolTipLayer", { static: true } )
-    private dataToolTipLayer: IgxDataToolTipLayerComponent
 
+export class AppComponent implements AfterViewInit
+{
+
+	@ViewChild("legend", { static: true } )
+	private legend: IgxLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxDataChartComponent
+	@ViewChild("xAxis", { static: true } )
+	private xAxis: IgxNumericXAxisComponent
+	@ViewChild("yAxis", { static: true } )
+	private yAxis: IgxNumericYAxisComponent
+	@ViewChild("scatterSplineSeries1", { static: true } )
+	private scatterSplineSeries1: IgxScatterSplineSeriesComponent
+	@ViewChild("scatterSplineSeries2", { static: true } )
+	private scatterSplineSeries2: IgxScatterSplineSeriesComponent
+	@ViewChild("dataToolTipLayer", { static: true } )
+	private dataToolTipLayer: IgxDataToolTipLayerComponent
     private _healthDataForGermany: HealthDataForGermany = null;
     public get healthDataForGermany(): HealthDataForGermany {
         if (this._healthDataForGermany == null)
@@ -48,5 +45,13 @@ export class AppComponent {
         return this._healthDataForFrance;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/data-chart/stacked-100-area-chart/src/app.component.ts b/samples/charts/data-chart/stacked-100-area-chart/src/app.component.ts
index 316ad432f..5f308e1bf 100644
--- a/samples/charts/data-chart/stacked-100-area-chart/src/app.component.ts
+++ b/samples/charts/data-chart/stacked-100-area-chart/src/app.component.ts
@@ -8,35 +8,32 @@ import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryXAxisComponent, I
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxDataChartComponent
-    @ViewChild("xAxis", { static: true } )
-    private xAxis: IgxCategoryXAxisComponent
-    @ViewChild("yAxis", { static: true } )
-    private yAxis: IgxNumericYAxisComponent
-    @ViewChild("stacked100AreaSeries", { static: true } )
-    private stacked100AreaSeries: IgxStacked100AreaSeriesComponent
-    @ViewChild("s1", { static: true } )
-    private s1: IgxStackedFragmentSeriesComponent
-    @ViewChild("s2", { static: true } )
-    private s2: IgxStackedFragmentSeriesComponent
-    @ViewChild("s3", { static: true } )
-    private s3: IgxStackedFragmentSeriesComponent
-    @ViewChild("s4", { static: true } )
-    private s4: IgxStackedFragmentSeriesComponent
-    @ViewChild("s5", { static: true } )
-    private s5: IgxStackedFragmentSeriesComponent
-    @ViewChild("dataToolTipLayer", { static: true } )
-    private dataToolTipLayer: IgxDataToolTipLayerComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("legend", { static: true } )
+	private legend: IgxLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxDataChartComponent
+	@ViewChild("xAxis", { static: true } )
+	private xAxis: IgxCategoryXAxisComponent
+	@ViewChild("yAxis", { static: true } )
+	private yAxis: IgxNumericYAxisComponent
+	@ViewChild("stacked100AreaSeries", { static: true } )
+	private stacked100AreaSeries: IgxStacked100AreaSeriesComponent
+	@ViewChild("s1", { static: true } )
+	private s1: IgxStackedFragmentSeriesComponent
+	@ViewChild("s2", { static: true } )
+	private s2: IgxStackedFragmentSeriesComponent
+	@ViewChild("s3", { static: true } )
+	private s3: IgxStackedFragmentSeriesComponent
+	@ViewChild("s4", { static: true } )
+	private s4: IgxStackedFragmentSeriesComponent
+	@ViewChild("s5", { static: true } )
+	private s5: IgxStackedFragmentSeriesComponent
+	@ViewChild("dataToolTipLayer", { static: true } )
+	private dataToolTipLayer: IgxDataToolTipLayerComponent
     private _continentsBirthRate: ContinentsBirthRate = null;
     public get continentsBirthRate(): ContinentsBirthRate {
         if (this._continentsBirthRate == null)
@@ -46,5 +43,13 @@ export class AppComponent {
         return this._continentsBirthRate;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/data-chart/stacked-100-bar-chart/src/app.component.ts b/samples/charts/data-chart/stacked-100-bar-chart/src/app.component.ts
index f308726d8..0a2f7e75d 100644
--- a/samples/charts/data-chart/stacked-100-bar-chart/src/app.component.ts
+++ b/samples/charts/data-chart/stacked-100-bar-chart/src/app.component.ts
@@ -8,33 +8,30 @@ import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryYAxisComponent, I
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxDataChartComponent
-    @ViewChild("yAxis", { static: true } )
-    private yAxis: IgxCategoryYAxisComponent
-    @ViewChild("xAxis", { static: true } )
-    private xAxis: IgxNumericXAxisComponent
-    @ViewChild("stacked100BarSeries", { static: true } )
-    private stacked100BarSeries: IgxStacked100BarSeriesComponent
-    @ViewChild("s1", { static: true } )
-    private s1: IgxStackedFragmentSeriesComponent
-    @ViewChild("s2", { static: true } )
-    private s2: IgxStackedFragmentSeriesComponent
-    @ViewChild("s3", { static: true } )
-    private s3: IgxStackedFragmentSeriesComponent
-    @ViewChild("s4", { static: true } )
-    private s4: IgxStackedFragmentSeriesComponent
-    @ViewChild("dataToolTipLayer", { static: true } )
-    private dataToolTipLayer: IgxDataToolTipLayerComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("legend", { static: true } )
+	private legend: IgxLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxDataChartComponent
+	@ViewChild("yAxis", { static: true } )
+	private yAxis: IgxCategoryYAxisComponent
+	@ViewChild("xAxis", { static: true } )
+	private xAxis: IgxNumericXAxisComponent
+	@ViewChild("stacked100BarSeries", { static: true } )
+	private stacked100BarSeries: IgxStacked100BarSeriesComponent
+	@ViewChild("s1", { static: true } )
+	private s1: IgxStackedFragmentSeriesComponent
+	@ViewChild("s2", { static: true } )
+	private s2: IgxStackedFragmentSeriesComponent
+	@ViewChild("s3", { static: true } )
+	private s3: IgxStackedFragmentSeriesComponent
+	@ViewChild("s4", { static: true } )
+	private s4: IgxStackedFragmentSeriesComponent
+	@ViewChild("dataToolTipLayer", { static: true } )
+	private dataToolTipLayer: IgxDataToolTipLayerComponent
     private _energyRenewableConsumption: EnergyRenewableConsumption = null;
     public get energyRenewableConsumption(): EnergyRenewableConsumption {
         if (this._energyRenewableConsumption == null)
@@ -44,5 +41,13 @@ export class AppComponent {
         return this._energyRenewableConsumption;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/data-chart/stacked-100-column-chart/src/app.component.ts b/samples/charts/data-chart/stacked-100-column-chart/src/app.component.ts
index 682c54027..b4e5c86a8 100644
--- a/samples/charts/data-chart/stacked-100-column-chart/src/app.component.ts
+++ b/samples/charts/data-chart/stacked-100-column-chart/src/app.component.ts
@@ -8,31 +8,28 @@ import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryXAxisComponent, I
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxDataChartComponent
-    @ViewChild("xAxis", { static: true } )
-    private xAxis: IgxCategoryXAxisComponent
-    @ViewChild("yAxis", { static: true } )
-    private yAxis: IgxNumericYAxisComponent
-    @ViewChild("stacked100ColumnSeries", { static: true } )
-    private stacked100ColumnSeries: IgxStacked100ColumnSeriesComponent
-    @ViewChild("s1", { static: true } )
-    private s1: IgxStackedFragmentSeriesComponent
-    @ViewChild("s2", { static: true } )
-    private s2: IgxStackedFragmentSeriesComponent
-    @ViewChild("s3", { static: true } )
-    private s3: IgxStackedFragmentSeriesComponent
-    @ViewChild("dataToolTipLayer", { static: true } )
-    private dataToolTipLayer: IgxDataToolTipLayerComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("legend", { static: true } )
+	private legend: IgxLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxDataChartComponent
+	@ViewChild("xAxis", { static: true } )
+	private xAxis: IgxCategoryXAxisComponent
+	@ViewChild("yAxis", { static: true } )
+	private yAxis: IgxNumericYAxisComponent
+	@ViewChild("stacked100ColumnSeries", { static: true } )
+	private stacked100ColumnSeries: IgxStacked100ColumnSeriesComponent
+	@ViewChild("s1", { static: true } )
+	private s1: IgxStackedFragmentSeriesComponent
+	@ViewChild("s2", { static: true } )
+	private s2: IgxStackedFragmentSeriesComponent
+	@ViewChild("s3", { static: true } )
+	private s3: IgxStackedFragmentSeriesComponent
+	@ViewChild("dataToolTipLayer", { static: true } )
+	private dataToolTipLayer: IgxDataToolTipLayerComponent
     private _onlineTrafficByDevice: OnlineTrafficByDevice = null;
     public get onlineTrafficByDevice(): OnlineTrafficByDevice {
         if (this._onlineTrafficByDevice == null)
@@ -42,5 +39,13 @@ export class AppComponent {
         return this._onlineTrafficByDevice;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/data-chart/stacked-100-line-chart/src/app.component.ts b/samples/charts/data-chart/stacked-100-line-chart/src/app.component.ts
index 3d0017c14..7f5cc0c7e 100644
--- a/samples/charts/data-chart/stacked-100-line-chart/src/app.component.ts
+++ b/samples/charts/data-chart/stacked-100-line-chart/src/app.component.ts
@@ -8,35 +8,32 @@ import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryXAxisComponent, I
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxDataChartComponent
-    @ViewChild("xAxis", { static: true } )
-    private xAxis: IgxCategoryXAxisComponent
-    @ViewChild("yAxis", { static: true } )
-    private yAxis: IgxNumericYAxisComponent
-    @ViewChild("stacked100LineSeries", { static: true } )
-    private stacked100LineSeries: IgxStacked100LineSeriesComponent
-    @ViewChild("s1", { static: true } )
-    private s1: IgxStackedFragmentSeriesComponent
-    @ViewChild("s2", { static: true } )
-    private s2: IgxStackedFragmentSeriesComponent
-    @ViewChild("s3", { static: true } )
-    private s3: IgxStackedFragmentSeriesComponent
-    @ViewChild("s4", { static: true } )
-    private s4: IgxStackedFragmentSeriesComponent
-    @ViewChild("s5", { static: true } )
-    private s5: IgxStackedFragmentSeriesComponent
-    @ViewChild("dataToolTipLayer", { static: true } )
-    private dataToolTipLayer: IgxDataToolTipLayerComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("legend", { static: true } )
+	private legend: IgxLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxDataChartComponent
+	@ViewChild("xAxis", { static: true } )
+	private xAxis: IgxCategoryXAxisComponent
+	@ViewChild("yAxis", { static: true } )
+	private yAxis: IgxNumericYAxisComponent
+	@ViewChild("stacked100LineSeries", { static: true } )
+	private stacked100LineSeries: IgxStacked100LineSeriesComponent
+	@ViewChild("s1", { static: true } )
+	private s1: IgxStackedFragmentSeriesComponent
+	@ViewChild("s2", { static: true } )
+	private s2: IgxStackedFragmentSeriesComponent
+	@ViewChild("s3", { static: true } )
+	private s3: IgxStackedFragmentSeriesComponent
+	@ViewChild("s4", { static: true } )
+	private s4: IgxStackedFragmentSeriesComponent
+	@ViewChild("s5", { static: true } )
+	private s5: IgxStackedFragmentSeriesComponent
+	@ViewChild("dataToolTipLayer", { static: true } )
+	private dataToolTipLayer: IgxDataToolTipLayerComponent
     private _continentsBirthRate: ContinentsBirthRate = null;
     public get continentsBirthRate(): ContinentsBirthRate {
         if (this._continentsBirthRate == null)
@@ -46,5 +43,13 @@ export class AppComponent {
         return this._continentsBirthRate;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/data-chart/stacked-100-spline-area-chart/src/app.component.ts b/samples/charts/data-chart/stacked-100-spline-area-chart/src/app.component.ts
index 244966e96..fc41c6d30 100644
--- a/samples/charts/data-chart/stacked-100-spline-area-chart/src/app.component.ts
+++ b/samples/charts/data-chart/stacked-100-spline-area-chart/src/app.component.ts
@@ -8,35 +8,32 @@ import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryXAxisComponent, I
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxDataChartComponent
-    @ViewChild("xAxis", { static: true } )
-    private xAxis: IgxCategoryXAxisComponent
-    @ViewChild("yAxis", { static: true } )
-    private yAxis: IgxNumericYAxisComponent
-    @ViewChild("stacked100SplineAreaSeries", { static: true } )
-    private stacked100SplineAreaSeries: IgxStacked100SplineAreaSeriesComponent
-    @ViewChild("s1", { static: true } )
-    private s1: IgxStackedFragmentSeriesComponent
-    @ViewChild("s2", { static: true } )
-    private s2: IgxStackedFragmentSeriesComponent
-    @ViewChild("s3", { static: true } )
-    private s3: IgxStackedFragmentSeriesComponent
-    @ViewChild("s4", { static: true } )
-    private s4: IgxStackedFragmentSeriesComponent
-    @ViewChild("s5", { static: true } )
-    private s5: IgxStackedFragmentSeriesComponent
-    @ViewChild("dataToolTipLayer", { static: true } )
-    private dataToolTipLayer: IgxDataToolTipLayerComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("legend", { static: true } )
+	private legend: IgxLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxDataChartComponent
+	@ViewChild("xAxis", { static: true } )
+	private xAxis: IgxCategoryXAxisComponent
+	@ViewChild("yAxis", { static: true } )
+	private yAxis: IgxNumericYAxisComponent
+	@ViewChild("stacked100SplineAreaSeries", { static: true } )
+	private stacked100SplineAreaSeries: IgxStacked100SplineAreaSeriesComponent
+	@ViewChild("s1", { static: true } )
+	private s1: IgxStackedFragmentSeriesComponent
+	@ViewChild("s2", { static: true } )
+	private s2: IgxStackedFragmentSeriesComponent
+	@ViewChild("s3", { static: true } )
+	private s3: IgxStackedFragmentSeriesComponent
+	@ViewChild("s4", { static: true } )
+	private s4: IgxStackedFragmentSeriesComponent
+	@ViewChild("s5", { static: true } )
+	private s5: IgxStackedFragmentSeriesComponent
+	@ViewChild("dataToolTipLayer", { static: true } )
+	private dataToolTipLayer: IgxDataToolTipLayerComponent
     private _continentsBirthRate: ContinentsBirthRate = null;
     public get continentsBirthRate(): ContinentsBirthRate {
         if (this._continentsBirthRate == null)
@@ -46,5 +43,13 @@ export class AppComponent {
         return this._continentsBirthRate;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/data-chart/stacked-100-spline-chart/src/app.component.ts b/samples/charts/data-chart/stacked-100-spline-chart/src/app.component.ts
index 2589d7d2c..5bf7866f7 100644
--- a/samples/charts/data-chart/stacked-100-spline-chart/src/app.component.ts
+++ b/samples/charts/data-chart/stacked-100-spline-chart/src/app.component.ts
@@ -8,35 +8,32 @@ import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryXAxisComponent, I
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxDataChartComponent
-    @ViewChild("xAxis", { static: true } )
-    private xAxis: IgxCategoryXAxisComponent
-    @ViewChild("yAxis", { static: true } )
-    private yAxis: IgxNumericYAxisComponent
-    @ViewChild("stacked100SplineSeries", { static: true } )
-    private stacked100SplineSeries: IgxStacked100SplineSeriesComponent
-    @ViewChild("s1", { static: true } )
-    private s1: IgxStackedFragmentSeriesComponent
-    @ViewChild("s2", { static: true } )
-    private s2: IgxStackedFragmentSeriesComponent
-    @ViewChild("s3", { static: true } )
-    private s3: IgxStackedFragmentSeriesComponent
-    @ViewChild("s4", { static: true } )
-    private s4: IgxStackedFragmentSeriesComponent
-    @ViewChild("s5", { static: true } )
-    private s5: IgxStackedFragmentSeriesComponent
-    @ViewChild("dataToolTipLayer", { static: true } )
-    private dataToolTipLayer: IgxDataToolTipLayerComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("legend", { static: true } )
+	private legend: IgxLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxDataChartComponent
+	@ViewChild("xAxis", { static: true } )
+	private xAxis: IgxCategoryXAxisComponent
+	@ViewChild("yAxis", { static: true } )
+	private yAxis: IgxNumericYAxisComponent
+	@ViewChild("stacked100SplineSeries", { static: true } )
+	private stacked100SplineSeries: IgxStacked100SplineSeriesComponent
+	@ViewChild("s1", { static: true } )
+	private s1: IgxStackedFragmentSeriesComponent
+	@ViewChild("s2", { static: true } )
+	private s2: IgxStackedFragmentSeriesComponent
+	@ViewChild("s3", { static: true } )
+	private s3: IgxStackedFragmentSeriesComponent
+	@ViewChild("s4", { static: true } )
+	private s4: IgxStackedFragmentSeriesComponent
+	@ViewChild("s5", { static: true } )
+	private s5: IgxStackedFragmentSeriesComponent
+	@ViewChild("dataToolTipLayer", { static: true } )
+	private dataToolTipLayer: IgxDataToolTipLayerComponent
     private _continentsBirthRate: ContinentsBirthRate = null;
     public get continentsBirthRate(): ContinentsBirthRate {
         if (this._continentsBirthRate == null)
@@ -46,5 +43,13 @@ export class AppComponent {
         return this._continentsBirthRate;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/data-chart/stacked-area-chart/src/app.component.ts b/samples/charts/data-chart/stacked-area-chart/src/app.component.ts
index fcdbec8c6..a3fb6e0ba 100644
--- a/samples/charts/data-chart/stacked-area-chart/src/app.component.ts
+++ b/samples/charts/data-chart/stacked-area-chart/src/app.component.ts
@@ -8,35 +8,32 @@ import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryXAxisComponent, I
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxDataChartComponent
-    @ViewChild("xAxis", { static: true } )
-    private xAxis: IgxCategoryXAxisComponent
-    @ViewChild("yAxis", { static: true } )
-    private yAxis: IgxNumericYAxisComponent
-    @ViewChild("stackedAreaSeries", { static: true } )
-    private stackedAreaSeries: IgxStackedAreaSeriesComponent
-    @ViewChild("s1", { static: true } )
-    private s1: IgxStackedFragmentSeriesComponent
-    @ViewChild("s2", { static: true } )
-    private s2: IgxStackedFragmentSeriesComponent
-    @ViewChild("s3", { static: true } )
-    private s3: IgxStackedFragmentSeriesComponent
-    @ViewChild("s4", { static: true } )
-    private s4: IgxStackedFragmentSeriesComponent
-    @ViewChild("s5", { static: true } )
-    private s5: IgxStackedFragmentSeriesComponent
-    @ViewChild("dataToolTipLayer", { static: true } )
-    private dataToolTipLayer: IgxDataToolTipLayerComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("legend", { static: true } )
+	private legend: IgxLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxDataChartComponent
+	@ViewChild("xAxis", { static: true } )
+	private xAxis: IgxCategoryXAxisComponent
+	@ViewChild("yAxis", { static: true } )
+	private yAxis: IgxNumericYAxisComponent
+	@ViewChild("stackedAreaSeries", { static: true } )
+	private stackedAreaSeries: IgxStackedAreaSeriesComponent
+	@ViewChild("s1", { static: true } )
+	private s1: IgxStackedFragmentSeriesComponent
+	@ViewChild("s2", { static: true } )
+	private s2: IgxStackedFragmentSeriesComponent
+	@ViewChild("s3", { static: true } )
+	private s3: IgxStackedFragmentSeriesComponent
+	@ViewChild("s4", { static: true } )
+	private s4: IgxStackedFragmentSeriesComponent
+	@ViewChild("s5", { static: true } )
+	private s5: IgxStackedFragmentSeriesComponent
+	@ViewChild("dataToolTipLayer", { static: true } )
+	private dataToolTipLayer: IgxDataToolTipLayerComponent
     private _continentsBirthRate: ContinentsBirthRate = null;
     public get continentsBirthRate(): ContinentsBirthRate {
         if (this._continentsBirthRate == null)
@@ -46,5 +43,13 @@ export class AppComponent {
         return this._continentsBirthRate;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/data-chart/stacked-bar-chart/src/app.component.ts b/samples/charts/data-chart/stacked-bar-chart/src/app.component.ts
index f11027d5d..81efffc19 100644
--- a/samples/charts/data-chart/stacked-bar-chart/src/app.component.ts
+++ b/samples/charts/data-chart/stacked-bar-chart/src/app.component.ts
@@ -8,33 +8,30 @@ import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryYAxisComponent, I
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxDataChartComponent
-    @ViewChild("yAxis", { static: true } )
-    private yAxis: IgxCategoryYAxisComponent
-    @ViewChild("xAxis", { static: true } )
-    private xAxis: IgxNumericXAxisComponent
-    @ViewChild("stackedBarSeries", { static: true } )
-    private stackedBarSeries: IgxStackedBarSeriesComponent
-    @ViewChild("s1", { static: true } )
-    private s1: IgxStackedFragmentSeriesComponent
-    @ViewChild("s2", { static: true } )
-    private s2: IgxStackedFragmentSeriesComponent
-    @ViewChild("s3", { static: true } )
-    private s3: IgxStackedFragmentSeriesComponent
-    @ViewChild("s4", { static: true } )
-    private s4: IgxStackedFragmentSeriesComponent
-    @ViewChild("dataToolTipLayer", { static: true } )
-    private dataToolTipLayer: IgxDataToolTipLayerComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("legend", { static: true } )
+	private legend: IgxLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxDataChartComponent
+	@ViewChild("yAxis", { static: true } )
+	private yAxis: IgxCategoryYAxisComponent
+	@ViewChild("xAxis", { static: true } )
+	private xAxis: IgxNumericXAxisComponent
+	@ViewChild("stackedBarSeries", { static: true } )
+	private stackedBarSeries: IgxStackedBarSeriesComponent
+	@ViewChild("s1", { static: true } )
+	private s1: IgxStackedFragmentSeriesComponent
+	@ViewChild("s2", { static: true } )
+	private s2: IgxStackedFragmentSeriesComponent
+	@ViewChild("s3", { static: true } )
+	private s3: IgxStackedFragmentSeriesComponent
+	@ViewChild("s4", { static: true } )
+	private s4: IgxStackedFragmentSeriesComponent
+	@ViewChild("dataToolTipLayer", { static: true } )
+	private dataToolTipLayer: IgxDataToolTipLayerComponent
     private _energyRenewableConsumption: EnergyRenewableConsumption = null;
     public get energyRenewableConsumption(): EnergyRenewableConsumption {
         if (this._energyRenewableConsumption == null)
@@ -44,5 +41,13 @@ export class AppComponent {
         return this._energyRenewableConsumption;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/data-chart/stacked-column-chart/src/app.component.ts b/samples/charts/data-chart/stacked-column-chart/src/app.component.ts
index 4cdb1547e..6e6694553 100644
--- a/samples/charts/data-chart/stacked-column-chart/src/app.component.ts
+++ b/samples/charts/data-chart/stacked-column-chart/src/app.component.ts
@@ -8,35 +8,32 @@ import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryXAxisComponent, I
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxDataChartComponent
-    @ViewChild("xAxis", { static: true } )
-    private xAxis: IgxCategoryXAxisComponent
-    @ViewChild("yAxis", { static: true } )
-    private yAxis: IgxNumericYAxisComponent
-    @ViewChild("stackedColumnSeries", { static: true } )
-    private stackedColumnSeries: IgxStackedColumnSeriesComponent
-    @ViewChild("s1", { static: true } )
-    private s1: IgxStackedFragmentSeriesComponent
-    @ViewChild("s2", { static: true } )
-    private s2: IgxStackedFragmentSeriesComponent
-    @ViewChild("s3", { static: true } )
-    private s3: IgxStackedFragmentSeriesComponent
-    @ViewChild("s4", { static: true } )
-    private s4: IgxStackedFragmentSeriesComponent
-    @ViewChild("s5", { static: true } )
-    private s5: IgxStackedFragmentSeriesComponent
-    @ViewChild("dataToolTipLayer", { static: true } )
-    private dataToolTipLayer: IgxDataToolTipLayerComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("legend", { static: true } )
+	private legend: IgxLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxDataChartComponent
+	@ViewChild("xAxis", { static: true } )
+	private xAxis: IgxCategoryXAxisComponent
+	@ViewChild("yAxis", { static: true } )
+	private yAxis: IgxNumericYAxisComponent
+	@ViewChild("stackedColumnSeries", { static: true } )
+	private stackedColumnSeries: IgxStackedColumnSeriesComponent
+	@ViewChild("s1", { static: true } )
+	private s1: IgxStackedFragmentSeriesComponent
+	@ViewChild("s2", { static: true } )
+	private s2: IgxStackedFragmentSeriesComponent
+	@ViewChild("s3", { static: true } )
+	private s3: IgxStackedFragmentSeriesComponent
+	@ViewChild("s4", { static: true } )
+	private s4: IgxStackedFragmentSeriesComponent
+	@ViewChild("s5", { static: true } )
+	private s5: IgxStackedFragmentSeriesComponent
+	@ViewChild("dataToolTipLayer", { static: true } )
+	private dataToolTipLayer: IgxDataToolTipLayerComponent
     private _continentsBirthRate: ContinentsBirthRate = null;
     public get continentsBirthRate(): ContinentsBirthRate {
         if (this._continentsBirthRate == null)
@@ -46,5 +43,13 @@ export class AppComponent {
         return this._continentsBirthRate;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/data-chart/stacked-line-chart/src/app.component.ts b/samples/charts/data-chart/stacked-line-chart/src/app.component.ts
index bb9ed1e3a..bde10a552 100644
--- a/samples/charts/data-chart/stacked-line-chart/src/app.component.ts
+++ b/samples/charts/data-chart/stacked-line-chart/src/app.component.ts
@@ -8,35 +8,32 @@ import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryXAxisComponent, I
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxDataChartComponent
-    @ViewChild("xAxis", { static: true } )
-    private xAxis: IgxCategoryXAxisComponent
-    @ViewChild("yAxis", { static: true } )
-    private yAxis: IgxNumericYAxisComponent
-    @ViewChild("stackedLineSeries", { static: true } )
-    private stackedLineSeries: IgxStackedLineSeriesComponent
-    @ViewChild("s1", { static: true } )
-    private s1: IgxStackedFragmentSeriesComponent
-    @ViewChild("s2", { static: true } )
-    private s2: IgxStackedFragmentSeriesComponent
-    @ViewChild("s3", { static: true } )
-    private s3: IgxStackedFragmentSeriesComponent
-    @ViewChild("s4", { static: true } )
-    private s4: IgxStackedFragmentSeriesComponent
-    @ViewChild("s5", { static: true } )
-    private s5: IgxStackedFragmentSeriesComponent
-    @ViewChild("dataToolTipLayer", { static: true } )
-    private dataToolTipLayer: IgxDataToolTipLayerComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("legend", { static: true } )
+	private legend: IgxLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxDataChartComponent
+	@ViewChild("xAxis", { static: true } )
+	private xAxis: IgxCategoryXAxisComponent
+	@ViewChild("yAxis", { static: true } )
+	private yAxis: IgxNumericYAxisComponent
+	@ViewChild("stackedLineSeries", { static: true } )
+	private stackedLineSeries: IgxStackedLineSeriesComponent
+	@ViewChild("s1", { static: true } )
+	private s1: IgxStackedFragmentSeriesComponent
+	@ViewChild("s2", { static: true } )
+	private s2: IgxStackedFragmentSeriesComponent
+	@ViewChild("s3", { static: true } )
+	private s3: IgxStackedFragmentSeriesComponent
+	@ViewChild("s4", { static: true } )
+	private s4: IgxStackedFragmentSeriesComponent
+	@ViewChild("s5", { static: true } )
+	private s5: IgxStackedFragmentSeriesComponent
+	@ViewChild("dataToolTipLayer", { static: true } )
+	private dataToolTipLayer: IgxDataToolTipLayerComponent
     private _continentsBirthRate: ContinentsBirthRate = null;
     public get continentsBirthRate(): ContinentsBirthRate {
         if (this._continentsBirthRate == null)
@@ -46,5 +43,13 @@ export class AppComponent {
         return this._continentsBirthRate;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/data-chart/stacked-spline-area-chart/src/app.component.ts b/samples/charts/data-chart/stacked-spline-area-chart/src/app.component.ts
index 8377c2290..198cc13c8 100644
--- a/samples/charts/data-chart/stacked-spline-area-chart/src/app.component.ts
+++ b/samples/charts/data-chart/stacked-spline-area-chart/src/app.component.ts
@@ -8,35 +8,32 @@ import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryXAxisComponent, I
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxDataChartComponent
-    @ViewChild("xAxis", { static: true } )
-    private xAxis: IgxCategoryXAxisComponent
-    @ViewChild("yAxis", { static: true } )
-    private yAxis: IgxNumericYAxisComponent
-    @ViewChild("stackedSplineAreaSeries", { static: true } )
-    private stackedSplineAreaSeries: IgxStackedSplineAreaSeriesComponent
-    @ViewChild("s1", { static: true } )
-    private s1: IgxStackedFragmentSeriesComponent
-    @ViewChild("s2", { static: true } )
-    private s2: IgxStackedFragmentSeriesComponent
-    @ViewChild("s3", { static: true } )
-    private s3: IgxStackedFragmentSeriesComponent
-    @ViewChild("s4", { static: true } )
-    private s4: IgxStackedFragmentSeriesComponent
-    @ViewChild("s5", { static: true } )
-    private s5: IgxStackedFragmentSeriesComponent
-    @ViewChild("dataToolTipLayer", { static: true } )
-    private dataToolTipLayer: IgxDataToolTipLayerComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("legend", { static: true } )
+	private legend: IgxLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxDataChartComponent
+	@ViewChild("xAxis", { static: true } )
+	private xAxis: IgxCategoryXAxisComponent
+	@ViewChild("yAxis", { static: true } )
+	private yAxis: IgxNumericYAxisComponent
+	@ViewChild("stackedSplineAreaSeries", { static: true } )
+	private stackedSplineAreaSeries: IgxStackedSplineAreaSeriesComponent
+	@ViewChild("s1", { static: true } )
+	private s1: IgxStackedFragmentSeriesComponent
+	@ViewChild("s2", { static: true } )
+	private s2: IgxStackedFragmentSeriesComponent
+	@ViewChild("s3", { static: true } )
+	private s3: IgxStackedFragmentSeriesComponent
+	@ViewChild("s4", { static: true } )
+	private s4: IgxStackedFragmentSeriesComponent
+	@ViewChild("s5", { static: true } )
+	private s5: IgxStackedFragmentSeriesComponent
+	@ViewChild("dataToolTipLayer", { static: true } )
+	private dataToolTipLayer: IgxDataToolTipLayerComponent
     private _continentsBirthRate: ContinentsBirthRate = null;
     public get continentsBirthRate(): ContinentsBirthRate {
         if (this._continentsBirthRate == null)
@@ -46,5 +43,13 @@ export class AppComponent {
         return this._continentsBirthRate;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/data-chart/stacked-spline-chart/src/app.component.ts b/samples/charts/data-chart/stacked-spline-chart/src/app.component.ts
index 623d1e625..d37dd2475 100644
--- a/samples/charts/data-chart/stacked-spline-chart/src/app.component.ts
+++ b/samples/charts/data-chart/stacked-spline-chart/src/app.component.ts
@@ -8,35 +8,32 @@ import { IgxLegendComponent, IgxDataChartComponent, IgxCategoryXAxisComponent, I
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxDataChartComponent
-    @ViewChild("xAxis", { static: true } )
-    private xAxis: IgxCategoryXAxisComponent
-    @ViewChild("yAxis", { static: true } )
-    private yAxis: IgxNumericYAxisComponent
-    @ViewChild("stackedSplineSeries", { static: true } )
-    private stackedSplineSeries: IgxStackedSplineSeriesComponent
-    @ViewChild("s1", { static: true } )
-    private s1: IgxStackedFragmentSeriesComponent
-    @ViewChild("s2", { static: true } )
-    private s2: IgxStackedFragmentSeriesComponent
-    @ViewChild("s3", { static: true } )
-    private s3: IgxStackedFragmentSeriesComponent
-    @ViewChild("s4", { static: true } )
-    private s4: IgxStackedFragmentSeriesComponent
-    @ViewChild("s5", { static: true } )
-    private s5: IgxStackedFragmentSeriesComponent
-    @ViewChild("dataToolTipLayer", { static: true } )
-    private dataToolTipLayer: IgxDataToolTipLayerComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("legend", { static: true } )
+	private legend: IgxLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxDataChartComponent
+	@ViewChild("xAxis", { static: true } )
+	private xAxis: IgxCategoryXAxisComponent
+	@ViewChild("yAxis", { static: true } )
+	private yAxis: IgxNumericYAxisComponent
+	@ViewChild("stackedSplineSeries", { static: true } )
+	private stackedSplineSeries: IgxStackedSplineSeriesComponent
+	@ViewChild("s1", { static: true } )
+	private s1: IgxStackedFragmentSeriesComponent
+	@ViewChild("s2", { static: true } )
+	private s2: IgxStackedFragmentSeriesComponent
+	@ViewChild("s3", { static: true } )
+	private s3: IgxStackedFragmentSeriesComponent
+	@ViewChild("s4", { static: true } )
+	private s4: IgxStackedFragmentSeriesComponent
+	@ViewChild("s5", { static: true } )
+	private s5: IgxStackedFragmentSeriesComponent
+	@ViewChild("dataToolTipLayer", { static: true } )
+	private dataToolTipLayer: IgxDataToolTipLayerComponent
     private _continentsBirthRate: ContinentsBirthRate = null;
     public get continentsBirthRate(): ContinentsBirthRate {
         if (this._continentsBirthRate == null)
@@ -46,5 +43,13 @@ export class AppComponent {
         return this._continentsBirthRate;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/data-chart/transition-event/src/app.component.ts b/samples/charts/data-chart/transition-event/src/app.component.ts
index e1398e952..ea3de101f 100644
--- a/samples/charts/data-chart/transition-event/src/app.component.ts
+++ b/samples/charts/data-chart/transition-event/src/app.component.ts
@@ -16,27 +16,24 @@ defineAllComponents();
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("propertyEditorPanel1", { static: true } )
-    private propertyEditorPanel1: IgxPropertyEditorPanelComponent
-    @ViewChild("propertyEditorPropertyDescription1", { static: true } )
-    private propertyEditorPropertyDescription1: IgxPropertyEditorPropertyDescriptionComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxDataChartComponent
-    @ViewChild("xAxis", { static: true } )
-    private xAxis: IgxCategoryXAxisComponent
-    @ViewChild("yAxis", { static: true } )
-    private yAxis: IgxNumericYAxisComponent
-    @ViewChild("waterfallSeries1", { static: true } )
-    private waterfallSeries1: IgxWaterfallSeriesComponent
-    @ViewChild("waterfallSeries2", { static: true } )
-    private waterfallSeries2: IgxWaterfallSeriesComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("propertyEditorPanel1", { static: true } )
+	private propertyEditorPanel1: IgxPropertyEditorPanelComponent
+	@ViewChild("propertyEditorPropertyDescription1", { static: true } )
+	private propertyEditorPropertyDescription1: IgxPropertyEditorPropertyDescriptionComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxDataChartComponent
+	@ViewChild("xAxis", { static: true } )
+	private xAxis: IgxCategoryXAxisComponent
+	@ViewChild("yAxis", { static: true } )
+	private yAxis: IgxNumericYAxisComponent
+	@ViewChild("waterfallSeries1", { static: true } )
+	private waterfallSeries1: IgxWaterfallSeriesComponent
+	@ViewChild("waterfallSeries2", { static: true } )
+	private waterfallSeries2: IgxWaterfallSeriesComponent
     private _companyIncomeData: CompanyIncomeData = null;
     public get companyIncomeData(): CompanyIncomeData {
         if (this._companyIncomeData == null)
@@ -58,12 +55,20 @@ export class AppComponent {
         return this._componentRenderer;
     }
 
-    public editorButtonReplayTransitionIn({ sender, args }: { sender: any, args: IgxPropertyEditorPropertyDescriptionButtonClickEventArgs }): void {
-        var series = this.chart.actualSeries;
-        for (var i = 0; i < series.length; i++) {
-            series[i].replayTransitionIn();
-        }
-    }
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
+	public editorButtonReplayTransitionIn({ sender, args }: { sender: any, args: IgxPropertyEditorPropertyDescriptionButtonClickEventArgs }): void {
+	    var series = this.chart.actualSeries;
+	    for (var i = 0; i < series.length; i++) {
+	        series[i].replayTransitionIn();
+	    }
+	}
 
 }
 
diff --git a/samples/charts/data-chart/waterfall-chart/src/app.component.ts b/samples/charts/data-chart/waterfall-chart/src/app.component.ts
index 8c8bd4a1f..8522570c5 100644
--- a/samples/charts/data-chart/waterfall-chart/src/app.component.ts
+++ b/samples/charts/data-chart/waterfall-chart/src/app.component.ts
@@ -8,23 +8,20 @@ import { IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisCompon
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("chart", { static: true } )
-    private chart: IgxDataChartComponent
-    @ViewChild("xAxis", { static: true } )
-    private xAxis: IgxCategoryXAxisComponent
-    @ViewChild("yAxis", { static: true } )
-    private yAxis: IgxNumericYAxisComponent
-    @ViewChild("waterfallSeries1", { static: true } )
-    private waterfallSeries1: IgxWaterfallSeriesComponent
-    @ViewChild("waterfallSeries2", { static: true } )
-    private waterfallSeries2: IgxWaterfallSeriesComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("chart", { static: true } )
+	private chart: IgxDataChartComponent
+	@ViewChild("xAxis", { static: true } )
+	private xAxis: IgxCategoryXAxisComponent
+	@ViewChild("yAxis", { static: true } )
+	private yAxis: IgxNumericYAxisComponent
+	@ViewChild("waterfallSeries1", { static: true } )
+	private waterfallSeries1: IgxWaterfallSeriesComponent
+	@ViewChild("waterfallSeries2", { static: true } )
+	private waterfallSeries2: IgxWaterfallSeriesComponent
     private _companyIncomeData: CompanyIncomeData = null;
     public get companyIncomeData(): CompanyIncomeData {
         if (this._companyIncomeData == null)
@@ -34,5 +31,13 @@ export class AppComponent {
         return this._companyIncomeData;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/doughnut-chart/legend/src/app.component.ts b/samples/charts/doughnut-chart/legend/src/app.component.ts
index 0d739d6c5..d7720aa4b 100644
--- a/samples/charts/doughnut-chart/legend/src/app.component.ts
+++ b/samples/charts/doughnut-chart/legend/src/app.component.ts
@@ -8,19 +8,16 @@ import { IgxItemLegendComponent, IgxDoughnutChartComponent, IgxRingSeriesCompone
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxItemLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxDoughnutChartComponent
-    @ViewChild("series", { static: true } )
-    private series: IgxRingSeriesComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("legend", { static: true } )
+	private legend: IgxItemLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxDoughnutChartComponent
+	@ViewChild("series", { static: true } )
+	private series: IgxRingSeriesComponent
     private _energyGlobalDemand: EnergyGlobalDemand = null;
     public get energyGlobalDemand(): EnergyGlobalDemand {
         if (this._energyGlobalDemand == null)
@@ -30,5 +27,13 @@ export class AppComponent {
         return this._energyGlobalDemand;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/doughnut-chart/overview/src/app.component.ts b/samples/charts/doughnut-chart/overview/src/app.component.ts
index 83bca80fd..1ea53ff1f 100644
--- a/samples/charts/doughnut-chart/overview/src/app.component.ts
+++ b/samples/charts/doughnut-chart/overview/src/app.component.ts
@@ -8,17 +8,14 @@ import { IgxDoughnutChartComponent, IgxRingSeriesComponent } from 'igniteui-angu
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("chart", { static: true } )
-    private chart: IgxDoughnutChartComponent
-    @ViewChild("series", { static: true } )
-    private series: IgxRingSeriesComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("chart", { static: true } )
+	private chart: IgxDoughnutChartComponent
+	@ViewChild("series", { static: true } )
+	private series: IgxRingSeriesComponent
     private _companyMarketShares: CompanyMarketShares = null;
     public get companyMarketShares(): CompanyMarketShares {
         if (this._companyMarketShares == null)
@@ -28,5 +25,13 @@ export class AppComponent {
         return this._companyMarketShares;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/doughnut-chart/rings/src/app.component.ts b/samples/charts/doughnut-chart/rings/src/app.component.ts
index 02737bbce..cd0d244e0 100644
--- a/samples/charts/doughnut-chart/rings/src/app.component.ts
+++ b/samples/charts/doughnut-chart/rings/src/app.component.ts
@@ -9,19 +9,16 @@ import { IgxDoughnutChartComponent, IgxRingSeriesComponent } from 'igniteui-angu
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("chart", { static: true } )
-    private chart: IgxDoughnutChartComponent
-    @ViewChild("series1", { static: true } )
-    private series1: IgxRingSeriesComponent
-    @ViewChild("series2", { static: true } )
-    private series2: IgxRingSeriesComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("chart", { static: true } )
+	private chart: IgxDoughnutChartComponent
+	@ViewChild("series1", { static: true } )
+	private series1: IgxRingSeriesComponent
+	@ViewChild("series2", { static: true } )
+	private series2: IgxRingSeriesComponent
     private _calendarSeasons: CalendarSeasons = null;
     public get calendarSeasons(): CalendarSeasons {
         if (this._calendarSeasons == null)
@@ -40,5 +37,13 @@ export class AppComponent {
         return this._calendarMonths;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/financial-chart/data-legend-formatting-currency/src/app.component.ts b/samples/charts/financial-chart/data-legend-formatting-currency/src/app.component.ts
index 7ea741dc1..b97b8e7df 100644
--- a/samples/charts/financial-chart/data-legend-formatting-currency/src/app.component.ts
+++ b/samples/charts/financial-chart/data-legend-formatting-currency/src/app.component.ts
@@ -8,17 +8,14 @@ import { IgxDataLegendComponent, IgxFinancialChartComponent } from 'igniteui-ang
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxDataLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxFinancialChartComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("legend", { static: true } )
+	private legend: IgxDataLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxFinancialChartComponent
     private _multipleStocks: MultipleStocks = null;
     private _multipleStocksFetching: boolean = false;
     public get multipleStocks(): MultipleStocks {
@@ -30,5 +27,13 @@ export class AppComponent {
         return this._multipleStocks;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/financial-chart/data-legend-styling-props/src/app.component.ts b/samples/charts/financial-chart/data-legend-styling-props/src/app.component.ts
index 2c54ead9e..43a3aeb72 100644
--- a/samples/charts/financial-chart/data-legend-styling-props/src/app.component.ts
+++ b/samples/charts/financial-chart/data-legend-styling-props/src/app.component.ts
@@ -8,17 +8,14 @@ import { IgxDataLegendComponent, IgxFinancialChartComponent } from 'igniteui-ang
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxDataLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxFinancialChartComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("legend", { static: true } )
+	private legend: IgxDataLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxFinancialChartComponent
     private _stockGoogle: StockGoogle = null;
     public get stockGoogle(): StockGoogle {
         if (this._stockGoogle == null)
@@ -28,5 +25,13 @@ export class AppComponent {
         return this._stockGoogle;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/financial-chart/data-legend/src/app.component.ts b/samples/charts/financial-chart/data-legend/src/app.component.ts
index 7ea741dc1..b97b8e7df 100644
--- a/samples/charts/financial-chart/data-legend/src/app.component.ts
+++ b/samples/charts/financial-chart/data-legend/src/app.component.ts
@@ -8,17 +8,14 @@ import { IgxDataLegendComponent, IgxFinancialChartComponent } from 'igniteui-ang
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxDataLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxFinancialChartComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("legend", { static: true } )
+	private legend: IgxDataLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxFinancialChartComponent
     private _multipleStocks: MultipleStocks = null;
     private _multipleStocksFetching: boolean = false;
     public get multipleStocks(): MultipleStocks {
@@ -30,5 +27,13 @@ export class AppComponent {
         return this._multipleStocks;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/financial-chart/data-tooltip-formatting-currency/src/app.component.ts b/samples/charts/financial-chart/data-tooltip-formatting-currency/src/app.component.ts
index e7d55683f..8b78b3fad 100644
--- a/samples/charts/financial-chart/data-tooltip-formatting-currency/src/app.component.ts
+++ b/samples/charts/financial-chart/data-tooltip-formatting-currency/src/app.component.ts
@@ -8,15 +8,12 @@ import { IgxFinancialChartComponent } from 'igniteui-angular-charts';
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("chart", { static: true } )
-    private chart: IgxFinancialChartComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("chart", { static: true } )
+	private chart: IgxFinancialChartComponent
     private _multipleStocks: MultipleStocks = null;
     private _multipleStocksFetching: boolean = false;
     public get multipleStocks(): MultipleStocks {
@@ -28,5 +25,13 @@ export class AppComponent {
         return this._multipleStocks;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/financial-chart/data-tooltip-styling-props/src/app.component.ts b/samples/charts/financial-chart/data-tooltip-styling-props/src/app.component.ts
index 0738ab15b..8b4e015ed 100644
--- a/samples/charts/financial-chart/data-tooltip-styling-props/src/app.component.ts
+++ b/samples/charts/financial-chart/data-tooltip-styling-props/src/app.component.ts
@@ -8,15 +8,12 @@ import { IgxFinancialChartComponent } from 'igniteui-angular-charts';
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("chart", { static: true } )
-    private chart: IgxFinancialChartComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("chart", { static: true } )
+	private chart: IgxFinancialChartComponent
     private _stockGoogle: StockGoogle = null;
     public get stockGoogle(): StockGoogle {
         if (this._stockGoogle == null)
@@ -26,5 +23,13 @@ export class AppComponent {
         return this._stockGoogle;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/financial-chart/data-tooltip/src/app.component.ts b/samples/charts/financial-chart/data-tooltip/src/app.component.ts
index e7d55683f..8b78b3fad 100644
--- a/samples/charts/financial-chart/data-tooltip/src/app.component.ts
+++ b/samples/charts/financial-chart/data-tooltip/src/app.component.ts
@@ -8,15 +8,12 @@ import { IgxFinancialChartComponent } from 'igniteui-angular-charts';
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("chart", { static: true } )
-    private chart: IgxFinancialChartComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("chart", { static: true } )
+	private chart: IgxFinancialChartComponent
     private _multipleStocks: MultipleStocks = null;
     private _multipleStocksFetching: boolean = false;
     public get multipleStocks(): MultipleStocks {
@@ -28,5 +25,13 @@ export class AppComponent {
         return this._multipleStocks;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/financial-chart/format-specifiers/src/app.component.ts b/samples/charts/financial-chart/format-specifiers/src/app.component.ts
index 679762bf0..13a978c8f 100644
--- a/samples/charts/financial-chart/format-specifiers/src/app.component.ts
+++ b/samples/charts/financial-chart/format-specifiers/src/app.component.ts
@@ -9,47 +9,44 @@ import { IgxNumberFormatSpecifier, IgxDateTimeFormatSpecifier } from 'igniteui-a
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
+export class AppComponent implements AfterViewInit
+{
 
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxDataLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxFinancialChartComponent
-    private _numberFormatSpecifier1: IgxNumberFormatSpecifier[] | null = null;
-    public get numberFormatSpecifier1(): IgxNumberFormatSpecifier[] {
-        if (this._numberFormatSpecifier1 == null)
-        {
-            let numberFormatSpecifier1: IgxNumberFormatSpecifier[] = [];
-            var numberFormatSpecifier2 = new IgxNumberFormatSpecifier();
-            numberFormatSpecifier2.currency = "EUR";
-            numberFormatSpecifier2.style = "currency";
-            numberFormatSpecifier2.locale = "en-GB";
-            numberFormatSpecifier2.minimumFractionDigits = 0;
+	@ViewChild("legend", { static: true } )
+	private legend: IgxDataLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxFinancialChartComponent
+	private _numberFormatSpecifier1: IgxNumberFormatSpecifier[] | null = null;
+	public get numberFormatSpecifier1(): IgxNumberFormatSpecifier[] {
+	    if (this._numberFormatSpecifier1 == null)
+	    {
+	        let numberFormatSpecifier1: IgxNumberFormatSpecifier[] = [];
+	        var numberFormatSpecifier2 = new IgxNumberFormatSpecifier();
+	        numberFormatSpecifier2.currency = "EUR";
+	        numberFormatSpecifier2.style = "currency";
+	        numberFormatSpecifier2.locale = "en-GB";
+	        numberFormatSpecifier2.minimumFractionDigits = 0;
 
-            numberFormatSpecifier1.push(numberFormatSpecifier2)
-            this._numberFormatSpecifier1 = numberFormatSpecifier1;
-        }
-        return this._numberFormatSpecifier1;
-    }
-    private _dateTimeFormatSpecifier1: IgxDateTimeFormatSpecifier[] | null = null;
-    public get dateTimeFormatSpecifier1(): IgxDateTimeFormatSpecifier[] {
-        if (this._dateTimeFormatSpecifier1 == null)
-        {
-            let dateTimeFormatSpecifier1: IgxDateTimeFormatSpecifier[] = [];
-            var dateTimeFormatSpecifier2 = new IgxDateTimeFormatSpecifier();
-            dateTimeFormatSpecifier2.locale = "en-GB";
-            dateTimeFormatSpecifier2.dateStyle = "long";
-
-            dateTimeFormatSpecifier1.push(dateTimeFormatSpecifier2)
-            this._dateTimeFormatSpecifier1 = dateTimeFormatSpecifier1;
-        }
-        return this._dateTimeFormatSpecifier1;
-    }
+	        numberFormatSpecifier1.push(numberFormatSpecifier2)
+	        this._numberFormatSpecifier1 = numberFormatSpecifier1;
+	    }
+	    return this._numberFormatSpecifier1;
+	}
+	private _dateTimeFormatSpecifier1: IgxDateTimeFormatSpecifier[] | null = null;
+	public get dateTimeFormatSpecifier1(): IgxDateTimeFormatSpecifier[] {
+	    if (this._dateTimeFormatSpecifier1 == null)
+	    {
+	        let dateTimeFormatSpecifier1: IgxDateTimeFormatSpecifier[] = [];
+	        var dateTimeFormatSpecifier2 = new IgxDateTimeFormatSpecifier();
+	        dateTimeFormatSpecifier2.locale = "en-GB";
+	        dateTimeFormatSpecifier2.dateStyle = "long";
 
+	        dateTimeFormatSpecifier1.push(dateTimeFormatSpecifier2)
+	        this._dateTimeFormatSpecifier1 = dateTimeFormatSpecifier1;
+	    }
+	    return this._dateTimeFormatSpecifier1;
+	}
     private _multipleStocks: MultipleStocks = null;
     private _multipleStocksFetching: boolean = false;
     public get multipleStocks(): MultipleStocks {
@@ -61,5 +58,13 @@ export class AppComponent {
         return this._multipleStocks;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/financial-chart/scrollbars/src/app.component.ts b/samples/charts/financial-chart/scrollbars/src/app.component.ts
index e7d55683f..8b78b3fad 100644
--- a/samples/charts/financial-chart/scrollbars/src/app.component.ts
+++ b/samples/charts/financial-chart/scrollbars/src/app.component.ts
@@ -8,15 +8,12 @@ import { IgxFinancialChartComponent } from 'igniteui-angular-charts';
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("chart", { static: true } )
-    private chart: IgxFinancialChartComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("chart", { static: true } )
+	private chart: IgxFinancialChartComponent
     private _multipleStocks: MultipleStocks = null;
     private _multipleStocksFetching: boolean = false;
     public get multipleStocks(): MultipleStocks {
@@ -28,5 +25,13 @@ export class AppComponent {
         return this._multipleStocks;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/pie-chart/legend/src/app.component.ts b/samples/charts/pie-chart/legend/src/app.component.ts
index 39108ff6b..25b540f07 100644
--- a/samples/charts/pie-chart/legend/src/app.component.ts
+++ b/samples/charts/pie-chart/legend/src/app.component.ts
@@ -8,17 +8,14 @@ import { IgxItemLegendComponent, IgxPieChartComponent } from 'igniteui-angular-c
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxItemLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxPieChartComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("legend", { static: true } )
+	private legend: IgxItemLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxPieChartComponent
     private _energyGlobalDemand: EnergyGlobalDemand = null;
     public get energyGlobalDemand(): EnergyGlobalDemand {
         if (this._energyGlobalDemand == null)
@@ -28,5 +25,13 @@ export class AppComponent {
         return this._energyGlobalDemand;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/pie-chart/others/src/app.component.ts b/samples/charts/pie-chart/others/src/app.component.ts
index 39108ff6b..25b540f07 100644
--- a/samples/charts/pie-chart/others/src/app.component.ts
+++ b/samples/charts/pie-chart/others/src/app.component.ts
@@ -8,17 +8,14 @@ import { IgxItemLegendComponent, IgxPieChartComponent } from 'igniteui-angular-c
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxItemLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxPieChartComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("legend", { static: true } )
+	private legend: IgxItemLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxPieChartComponent
     private _energyGlobalDemand: EnergyGlobalDemand = null;
     public get energyGlobalDemand(): EnergyGlobalDemand {
         if (this._energyGlobalDemand == null)
@@ -28,5 +25,13 @@ export class AppComponent {
         return this._energyGlobalDemand;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/pie-chart/overview/src/app.component.ts b/samples/charts/pie-chart/overview/src/app.component.ts
index 39108ff6b..25b540f07 100644
--- a/samples/charts/pie-chart/overview/src/app.component.ts
+++ b/samples/charts/pie-chart/overview/src/app.component.ts
@@ -8,17 +8,14 @@ import { IgxItemLegendComponent, IgxPieChartComponent } from 'igniteui-angular-c
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxItemLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxPieChartComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("legend", { static: true } )
+	private legend: IgxItemLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxPieChartComponent
     private _energyGlobalDemand: EnergyGlobalDemand = null;
     public get energyGlobalDemand(): EnergyGlobalDemand {
         if (this._energyGlobalDemand == null)
@@ -28,5 +25,13 @@ export class AppComponent {
         return this._energyGlobalDemand;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/pie-chart/styling/src/app.component.ts b/samples/charts/pie-chart/styling/src/app.component.ts
index 39108ff6b..25b540f07 100644
--- a/samples/charts/pie-chart/styling/src/app.component.ts
+++ b/samples/charts/pie-chart/styling/src/app.component.ts
@@ -8,17 +8,14 @@ import { IgxItemLegendComponent, IgxPieChartComponent } from 'igniteui-angular-c
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxItemLegendComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxPieChartComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("legend", { static: true } )
+	private legend: IgxItemLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxPieChartComponent
     private _energyGlobalDemand: EnergyGlobalDemand = null;
     public get energyGlobalDemand(): EnergyGlobalDemand {
         if (this._energyGlobalDemand == null)
@@ -28,5 +25,13 @@ export class AppComponent {
         return this._energyGlobalDemand;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/sparkline/display-area/src/app.component.ts b/samples/charts/sparkline/display-area/src/app.component.ts
index 37b16638d..f7abaf08a 100644
--- a/samples/charts/sparkline/display-area/src/app.component.ts
+++ b/samples/charts/sparkline/display-area/src/app.component.ts
@@ -8,15 +8,12 @@ import { IgxSparklineComponent } from 'igniteui-angular-charts';
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("chart", { static: true } )
-    private chart: IgxSparklineComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("chart", { static: true } )
+	private chart: IgxSparklineComponent
     private _sparklineMixedData: SparklineMixedData = null;
     public get sparklineMixedData(): SparklineMixedData {
         if (this._sparklineMixedData == null)
@@ -26,5 +23,13 @@ export class AppComponent {
         return this._sparklineMixedData;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/sparkline/display-column/src/app.component.ts b/samples/charts/sparkline/display-column/src/app.component.ts
index 37b16638d..f7abaf08a 100644
--- a/samples/charts/sparkline/display-column/src/app.component.ts
+++ b/samples/charts/sparkline/display-column/src/app.component.ts
@@ -8,15 +8,12 @@ import { IgxSparklineComponent } from 'igniteui-angular-charts';
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("chart", { static: true } )
-    private chart: IgxSparklineComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("chart", { static: true } )
+	private chart: IgxSparklineComponent
     private _sparklineMixedData: SparklineMixedData = null;
     public get sparklineMixedData(): SparklineMixedData {
         if (this._sparklineMixedData == null)
@@ -26,5 +23,13 @@ export class AppComponent {
         return this._sparklineMixedData;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/sparkline/display-lines/src/app.component.ts b/samples/charts/sparkline/display-lines/src/app.component.ts
index 39e22a946..ebe19a3ce 100644
--- a/samples/charts/sparkline/display-lines/src/app.component.ts
+++ b/samples/charts/sparkline/display-lines/src/app.component.ts
@@ -9,15 +9,12 @@ import { IgxSparklineComponent } from 'igniteui-angular-charts';
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("chart", { static: true } )
-    private chart: IgxSparklineComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("chart", { static: true } )
+	private chart: IgxSparklineComponent
     private _sparklineMixedData: SparklineMixedData = null;
     public get sparklineMixedData(): SparklineMixedData {
         if (this._sparklineMixedData == null)
@@ -38,5 +35,13 @@ export class AppComponent {
         return this._componentRenderer;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/sparkline/display-winloss/src/app.component.ts b/samples/charts/sparkline/display-winloss/src/app.component.ts
index 37b16638d..f7abaf08a 100644
--- a/samples/charts/sparkline/display-winloss/src/app.component.ts
+++ b/samples/charts/sparkline/display-winloss/src/app.component.ts
@@ -8,15 +8,12 @@ import { IgxSparklineComponent } from 'igniteui-angular-charts';
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("chart", { static: true } )
-    private chart: IgxSparklineComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("chart", { static: true } )
+	private chart: IgxSparklineComponent
     private _sparklineMixedData: SparklineMixedData = null;
     public get sparklineMixedData(): SparklineMixedData {
         if (this._sparklineMixedData == null)
@@ -26,5 +23,13 @@ export class AppComponent {
         return this._sparklineMixedData;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/sparkline/markers/src/app.component.ts b/samples/charts/sparkline/markers/src/app.component.ts
index 2c2f22c74..e81174723 100644
--- a/samples/charts/sparkline/markers/src/app.component.ts
+++ b/samples/charts/sparkline/markers/src/app.component.ts
@@ -14,29 +14,26 @@ defineAllComponents();
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("propertyEditorPanel1", { static: true } )
-    private propertyEditorPanel1: IgxPropertyEditorPanelComponent
-    @ViewChild("firstMarkerVisibilityEditor", { static: true } )
-    private firstMarkerVisibilityEditor: IgxPropertyEditorPropertyDescriptionComponent
-    @ViewChild("highMarkerVisibilityEditor", { static: true } )
-    private highMarkerVisibilityEditor: IgxPropertyEditorPropertyDescriptionComponent
-    @ViewChild("lowMarkerVisibilityEditor", { static: true } )
-    private lowMarkerVisibilityEditor: IgxPropertyEditorPropertyDescriptionComponent
-    @ViewChild("negativeMarkerVisibilityEditor", { static: true } )
-    private negativeMarkerVisibilityEditor: IgxPropertyEditorPropertyDescriptionComponent
-    @ViewChild("lastMarkerVisibilityEditor", { static: true } )
-    private lastMarkerVisibilityEditor: IgxPropertyEditorPropertyDescriptionComponent
-    @ViewChild("markerVisibilityEditor", { static: true } )
-    private markerVisibilityEditor: IgxPropertyEditorPropertyDescriptionComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxSparklineComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("propertyEditorPanel1", { static: true } )
+	private propertyEditorPanel1: IgxPropertyEditorPanelComponent
+	@ViewChild("firstMarkerVisibilityEditor", { static: true } )
+	private firstMarkerVisibilityEditor: IgxPropertyEditorPropertyDescriptionComponent
+	@ViewChild("highMarkerVisibilityEditor", { static: true } )
+	private highMarkerVisibilityEditor: IgxPropertyEditorPropertyDescriptionComponent
+	@ViewChild("lowMarkerVisibilityEditor", { static: true } )
+	private lowMarkerVisibilityEditor: IgxPropertyEditorPropertyDescriptionComponent
+	@ViewChild("negativeMarkerVisibilityEditor", { static: true } )
+	private negativeMarkerVisibilityEditor: IgxPropertyEditorPropertyDescriptionComponent
+	@ViewChild("lastMarkerVisibilityEditor", { static: true } )
+	private lastMarkerVisibilityEditor: IgxPropertyEditorPropertyDescriptionComponent
+	@ViewChild("markerVisibilityEditor", { static: true } )
+	private markerVisibilityEditor: IgxPropertyEditorPropertyDescriptionComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxSparklineComponent
     private _sparklineProfitData: SparklineProfitData = null;
     public get sparklineProfitData(): SparklineProfitData {
         if (this._sparklineProfitData == null)
@@ -57,5 +54,13 @@ export class AppComponent {
         return this._componentRenderer;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/sparkline/normal-range/src/app.component.ts b/samples/charts/sparkline/normal-range/src/app.component.ts
index a8725aea5..d4c79364b 100644
--- a/samples/charts/sparkline/normal-range/src/app.component.ts
+++ b/samples/charts/sparkline/normal-range/src/app.component.ts
@@ -14,23 +14,20 @@ defineAllComponents();
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
-
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("propertyEditorPanel1", { static: true } )
-    private propertyEditorPanel1: IgxPropertyEditorPanelComponent
-    @ViewChild("normalRangeVisibilityEditor", { static: true } )
-    private normalRangeVisibilityEditor: IgxPropertyEditorPropertyDescriptionComponent
-    @ViewChild("normalRangeMinimumEditor", { static: true } )
-    private normalRangeMinimumEditor: IgxPropertyEditorPropertyDescriptionComponent
-    @ViewChild("normalRangeMaximumEditor", { static: true } )
-    private normalRangeMaximumEditor: IgxPropertyEditorPropertyDescriptionComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxSparklineComponent
 
+export class AppComponent implements AfterViewInit
+{
+
+	@ViewChild("propertyEditorPanel1", { static: true } )
+	private propertyEditorPanel1: IgxPropertyEditorPanelComponent
+	@ViewChild("normalRangeVisibilityEditor", { static: true } )
+	private normalRangeVisibilityEditor: IgxPropertyEditorPropertyDescriptionComponent
+	@ViewChild("normalRangeMinimumEditor", { static: true } )
+	private normalRangeMinimumEditor: IgxPropertyEditorPropertyDescriptionComponent
+	@ViewChild("normalRangeMaximumEditor", { static: true } )
+	private normalRangeMaximumEditor: IgxPropertyEditorPropertyDescriptionComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxSparklineComponent
     private _sparklineMixedData: SparklineMixedData = null;
     public get sparklineMixedData(): SparklineMixedData {
         if (this._sparklineMixedData == null)
@@ -51,5 +48,13 @@ export class AppComponent {
         return this._componentRenderer;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/sparkline/trendlines/src/app.component.ts b/samples/charts/sparkline/trendlines/src/app.component.ts
index f622d6aa9..6a5dbb7ab 100644
--- a/samples/charts/sparkline/trendlines/src/app.component.ts
+++ b/samples/charts/sparkline/trendlines/src/app.component.ts
@@ -14,19 +14,16 @@ defineAllComponents();
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("propertyEditorPanel1", { static: true } )
-    private propertyEditorPanel1: IgxPropertyEditorPanelComponent
-    @ViewChild("trendLineTypeEditor", { static: true } )
-    private trendLineTypeEditor: IgxPropertyEditorPropertyDescriptionComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxSparklineComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("propertyEditorPanel1", { static: true } )
+	private propertyEditorPanel1: IgxPropertyEditorPanelComponent
+	@ViewChild("trendLineTypeEditor", { static: true } )
+	private trendLineTypeEditor: IgxPropertyEditorPropertyDescriptionComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxSparklineComponent
     private _sparklineMixedData: SparklineMixedData = null;
     public get sparklineMixedData(): SparklineMixedData {
         if (this._sparklineMixedData == null)
@@ -47,5 +44,13 @@ export class AppComponent {
         return this._componentRenderer;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/sparkline/unknown-values/src/app.component.ts b/samples/charts/sparkline/unknown-values/src/app.component.ts
index 56610a09f..a7107a21c 100644
--- a/samples/charts/sparkline/unknown-values/src/app.component.ts
+++ b/samples/charts/sparkline/unknown-values/src/app.component.ts
@@ -14,19 +14,16 @@ defineAllComponents();
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("propertyEditorPanel1", { static: true } )
-    private propertyEditorPanel1: IgxPropertyEditorPanelComponent
-    @ViewChild("unknownValuePlottingEditor", { static: true } )
-    private unknownValuePlottingEditor: IgxPropertyEditorPropertyDescriptionComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxSparklineComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("propertyEditorPanel1", { static: true } )
+	private propertyEditorPanel1: IgxPropertyEditorPanelComponent
+	@ViewChild("unknownValuePlottingEditor", { static: true } )
+	private unknownValuePlottingEditor: IgxPropertyEditorPropertyDescriptionComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxSparklineComponent
     private _sparklineUnknownData: SparklineUnknownData = null;
     public get sparklineUnknownData(): SparklineUnknownData {
         if (this._sparklineUnknownData == null)
@@ -47,5 +44,13 @@ export class AppComponent {
         return this._componentRenderer;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/toolbar/actions-built-in-category-chart/src/app.component.ts b/samples/charts/toolbar/actions-built-in-category-chart/src/app.component.ts
index 0ae23da34..6ba51d852 100644
--- a/samples/charts/toolbar/actions-built-in-category-chart/src/app.component.ts
+++ b/samples/charts/toolbar/actions-built-in-category-chart/src/app.component.ts
@@ -9,19 +9,16 @@ import { IgxToolbarComponent } from 'igniteui-angular-layouts';
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("legend", { static: true } )
-    private legend: IgxLegendComponent
-    @ViewChild("toolbar", { static: true } )
-    private toolbar: IgxToolbarComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxCategoryChartComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("legend", { static: true } )
+	private legend: IgxLegendComponent
+	@ViewChild("toolbar", { static: true } )
+	private toolbar: IgxToolbarComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxCategoryChartComponent
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
     public get countryRenewableElectricity(): CountryRenewableElectricity {
         if (this._countryRenewableElectricity == null)
@@ -31,5 +28,13 @@ export class AppComponent {
         return this._countryRenewableElectricity;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/toolbar/actions-built-in-data-chart/src/app.component.ts b/samples/charts/toolbar/actions-built-in-data-chart/src/app.component.ts
index 4b4b5fac3..144fe4969 100644
--- a/samples/charts/toolbar/actions-built-in-data-chart/src/app.component.ts
+++ b/samples/charts/toolbar/actions-built-in-data-chart/src/app.component.ts
@@ -9,29 +9,26 @@ import { IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisCompon
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("toolbar", { static: true } )
-    private toolbar: IgxToolbarComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxDataChartComponent
-    @ViewChild("xAxis", { static: true } )
-    private xAxis: IgxCategoryXAxisComponent
-    @ViewChild("yAxis", { static: true } )
-    private yAxis: IgxNumericYAxisComponent
-    @ViewChild("lineSeries1", { static: true } )
-    private lineSeries1: IgxLineSeriesComponent
-    @ViewChild("lineSeries2", { static: true } )
-    private lineSeries2: IgxLineSeriesComponent
-    @ViewChild("lineSeries3", { static: true } )
-    private lineSeries3: IgxLineSeriesComponent
-    @ViewChild("tooltipLayer", { static: true } )
-    private tooltipLayer: IgxDataToolTipLayerComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("toolbar", { static: true } )
+	private toolbar: IgxToolbarComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxDataChartComponent
+	@ViewChild("xAxis", { static: true } )
+	private xAxis: IgxCategoryXAxisComponent
+	@ViewChild("yAxis", { static: true } )
+	private yAxis: IgxNumericYAxisComponent
+	@ViewChild("lineSeries1", { static: true } )
+	private lineSeries1: IgxLineSeriesComponent
+	@ViewChild("lineSeries2", { static: true } )
+	private lineSeries2: IgxLineSeriesComponent
+	@ViewChild("lineSeries3", { static: true } )
+	private lineSeries3: IgxLineSeriesComponent
+	@ViewChild("tooltipLayer", { static: true } )
+	private tooltipLayer: IgxDataToolTipLayerComponent
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
     public get countryRenewableElectricity(): CountryRenewableElectricity {
         if (this._countryRenewableElectricity == null)
@@ -41,5 +38,13 @@ export class AppComponent {
         return this._countryRenewableElectricity;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/toolbar/custom-tool/.stackblitzrc b/samples/charts/toolbar/custom-tool/.stackblitzrc
new file mode 100644
index 000000000..65efbb4fd
--- /dev/null
+++ b/samples/charts/toolbar/custom-tool/.stackblitzrc
@@ -0,0 +1 @@
+{"installDependencies":true,"startCommand":"turbo start","env":{"ENABLE_CJS_IMPORTS":true}}
\ No newline at end of file
diff --git a/samples/charts/toolbar/custom-tool/angular.json b/samples/charts/toolbar/custom-tool/angular.json
new file mode 100644
index 000000000..11ffb8c9c
--- /dev/null
+++ b/samples/charts/toolbar/custom-tool/angular.json
@@ -0,0 +1,106 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "demo": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/demo",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": [
+              "zone.js",
+              "hammerjs"
+            ],
+            "tsConfig": "src/config/tsconfig.app.json",
+            "assets": [
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "buildTarget": "demo:build"
+          },
+          "configurations": {
+            "production": {
+              "buildTarget": "demo:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "buildTarget": "demo:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/config/tsconfig.spec.json",
+            "karmaConfig": "src/config/karma.conf.js",
+            "styles": [
+              "styles.css"
+            ],
+            "scripts": [],
+            "assets": [
+              "src/assets"
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "src/config/tsconfig.app.json",
+              "src/config/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    }
+  },
+  "schematics": {
+    "@schematics/angular:component": {
+      "prefix": "app",
+      "style": "scss"
+    },
+    "@schematics/angular:directive": {
+      "prefix": "app"
+    }
+  }
+}
diff --git a/samples/charts/toolbar/custom-tool/package.json b/samples/charts/toolbar/custom-tool/package.json
new file mode 100644
index 000000000..eefcefe2c
--- /dev/null
+++ b/samples/charts/toolbar/custom-tool/package.json
@@ -0,0 +1,45 @@
+{
+  "scripts": {
+    "ng": "ng",
+    "update": "ng update",
+    "start": "node --max_old_space_size=12192 node_modules/@angular/cli/bin/ng serve -o",
+    "build": "node --max_old_space_size=12192 node_modules/@angular/cli/bin/ng build --configuration production",
+    "lint": "ng lint"
+  },
+  "dependencies": {
+    "@angular/animations": "17.0.0",
+    "@angular/common": "17.0.0",
+    "@angular/compiler": "17.0.0",
+    "@angular/core": "17.0.0",
+    "@angular/forms": "17.0.0",
+    "@angular/platform-browser": "17.0.0",
+    "@angular/platform-browser-dynamic": "17.0.0",
+    "@types/hammerjs": "2.0.39",
+    "classlist.js": "1.1.20150312",
+    "core-js": "3.21.0",
+    "hammerjs": "2.0.8",
+    "igniteui-angular-core": "17.0.0",
+    "igniteui-angular-inputs": "17.0.0",
+    "igniteui-angular-layouts": "17.0.0",
+    "intl": "1.2.5",
+    "jszip": "3.8.0",
+    "rxjs": "6.6.7",
+    "tslib": "2.3.1",
+    "web-animations-js": "2.3.2",
+    "zone.js": "~0.14.1"
+  },
+  "devDependencies": {
+    "@angular/cli": "17.0.0",
+    "@angular/compiler-cli": "17.0.0",
+    "@angular/language-service": "17.0.0",
+    "@angular-devkit/build-angular": "17.0.0",
+    "@types/node": "14.14.28",
+    "codelyzer": "6.0.2",
+    "jasmine-core": "3.7.1",
+    "jasmine-spec-reporter": "~4.2.1",
+    "sass.js": "0.11.1",
+    "tslint": "~6.1.3",
+    "ts-node": "9.1.1",
+    "typescript": "5.2.2"
+  }
+}
diff --git a/samples/charts/toolbar/custom-tool/sandbox.config.json b/samples/charts/toolbar/custom-tool/sandbox.config.json
new file mode 100644
index 000000000..07f53508e
--- /dev/null
+++ b/samples/charts/toolbar/custom-tool/sandbox.config.json
@@ -0,0 +1,5 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser"
+}
\ No newline at end of file
diff --git a/samples/charts/toolbar/custom-tool/src/app.component.html b/samples/charts/toolbar/custom-tool/src/app.component.html
new file mode 100644
index 000000000..53be05748
--- /dev/null
+++ b/samples/charts/toolbar/custom-tool/src/app.component.html
@@ -0,0 +1,14 @@
+<div class="container vertical sample">
+  <div class="container fill">
+      <igx-toolbar
+      name="Toolbar"
+      #toolbar
+      orientation="Horizontal">
+          <igx-tool-action-label
+          title="Custom Icon"
+          iconName="CustomIcon"
+          iconCollectionName="CustomCollection">
+          </igx-tool-action-label>
+      </igx-toolbar>
+  </div>
+</div>
diff --git a/samples/charts/toolbar/custom-tool/src/app.component.scss b/samples/charts/toolbar/custom-tool/src/app.component.scss
new file mode 100644
index 000000000..cbff781da
--- /dev/null
+++ b/samples/charts/toolbar/custom-tool/src/app.component.scss
@@ -0,0 +1,3 @@
+/* styles are loaded the Shared CSS file located at:
+https://static.infragistics.com/xplatform/css/samples/
+*/
diff --git a/samples/charts/toolbar/custom-tool/src/app.component.ts b/samples/charts/toolbar/custom-tool/src/app.component.ts
new file mode 100644
index 000000000..8490ad7a4
--- /dev/null
+++ b/samples/charts/toolbar/custom-tool/src/app.component.ts
@@ -0,0 +1,34 @@
+import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
+import { IgxToolbarComponent, IgxToolActionLabelComponent, IgxToolActionComponent, IgxToolCommandEventArgs } from 'igniteui-angular-layouts';
+
+@Component({
+    selector: "app-root",
+    styleUrls: ["./app.component.scss"],
+    templateUrl: "./app.component.html",
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+
+export class AppComponent implements AfterViewInit
+{
+
+	@ViewChild("toolbar", { static: true } )
+	private toolbar: IgxToolbarComponent
+
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+		this.toolbarCustomIconOnViewInit();
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
+	public toolbarCustomIconOnViewInit(): void {
+
+	    const icon = '<svg width="28px" height="28px" stroke="none" viewBox="0 0 3.5 3.5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--gis" preserveAspectRatio="xMidYMid meet"><path d="M0.436 0.178a0.073 0.073 0 0 0 -0.062 0.036L0.01 0.846a0.073 0.073 0 0 0 0.063 0.109h0.729a0.073 0.073 0 0 0 0.063 -0.109L0.501 0.214a0.073 0.073 0 0 0 -0.064 -0.036zm0.001 0.219 0.238 0.413H0.199zM1.4 0.507v0.245h0.525v-0.245zm0.77 0v0.245h1.33v-0.245zM0.073 1.388A0.073 0.073 0 0 0 0 1.461v0.583a0.073 0.073 0 0 0 0.073 0.073h0.729A0.073 0.073 0 0 0 0.875 2.045V1.461a0.073 0.073 0 0 0 -0.073 -0.073zm0.073 0.146h0.583v0.438H0.146zM1.4 1.674v0.245h0.945v-0.245zm1.19 0v0.245h0.91v-0.245zM0.438 2.447c-0.241 0 -0.438 0.197 -0.438 0.438 0 0.241 0.197 0.438 0.438 0.438s0.438 -0.197 0.438 -0.438c0 -0.241 -0.197 -0.438 -0.438 -0.438zm0 0.146a0.291 0.291 0 0 1 0.292 0.292 0.291 0.291 0 0 1 -0.292 0.292 0.291 0.291 0 0 1 -0.292 -0.292A0.291 0.291 0 0 1 0.438 2.593zM1.4 2.842v0.245h0.525v-0.245zm0.77 0v0.245h1.33v-0.245z" fill="#000000" fill-rule="evenodd"/></svg>';
+	    this.toolbar.registerIconFromText("CustomCollection", "CustomIcon", icon);
+
+	}
+
+}
+
diff --git a/samples/charts/toolbar/custom-tool/src/app.module.ts b/samples/charts/toolbar/custom-tool/src/app.module.ts
new file mode 100644
index 000000000..cb4c87d23
--- /dev/null
+++ b/samples/charts/toolbar/custom-tool/src/app.module.ts
@@ -0,0 +1,25 @@
+import { NgModule } from "@angular/core";
+import { FormsModule } from "@angular/forms";
+import { CommonModule } from "@angular/common";
+import { BrowserModule } from "@angular/platform-browser";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import { AppComponent } from "./app.component";
+
+import { IgxToolbarModule } from 'igniteui-angular-layouts';
+
+@NgModule({
+  bootstrap: [AppComponent],
+  declarations: [
+    AppComponent
+],
+  imports: [
+    BrowserModule,
+    BrowserAnimationsModule,
+    CommonModule,
+    FormsModule,
+    IgxToolbarModule
+],
+  providers: [],
+  schemas: []
+})
+export class AppModule {}
diff --git a/samples/charts/toolbar/custom-tool/src/config/tsconfig-es5.app.json b/samples/charts/toolbar/custom-tool/src/config/tsconfig-es5.app.json
new file mode 100644
index 000000000..7e8983eb4
--- /dev/null
+++ b/samples/charts/toolbar/custom-tool/src/config/tsconfig-es5.app.json
@@ -0,0 +1,6 @@
+{
+    "extends": "./tsconfig.app.json",
+    "compilerOptions": {
+        "target": "ES2022"
+    }
+   }
diff --git a/samples/charts/toolbar/custom-tool/src/config/tsconfig.app.json b/samples/charts/toolbar/custom-tool/src/config/tsconfig.app.json
new file mode 100644
index 000000000..f722e3fe4
--- /dev/null
+++ b/samples/charts/toolbar/custom-tool/src/config/tsconfig.app.json
@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/app",
+    "baseUrl": "./",
+    "types": []
+  },
+  "files": [
+    "../main.ts",
+    "../polyfills.ts"
+  ]
+}
diff --git a/samples/charts/toolbar/custom-tool/src/config/tsconfig.base.json b/samples/charts/toolbar/custom-tool/src/config/tsconfig.base.json
new file mode 100644
index 000000000..5574be5e5
--- /dev/null
+++ b/samples/charts/toolbar/custom-tool/src/config/tsconfig.base.json
@@ -0,0 +1,24 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "importHelpers": true,
+    "module": "ES2022",
+    "outDir": "../../dist/out-tsc",
+    "sourceMap": false,
+    "declaration": false,
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "downlevelIteration": true, // required for excel library
+    "target": "ES2022",
+    "typeRoots": [
+      "../../node_modules/@types"
+    ],
+    "lib": [
+      "ES2022",
+      "dom"
+    ],
+    "useDefineForClassFields": false
+  }
+}
diff --git a/samples/charts/toolbar/custom-tool/src/config/tsconfig.spec.json b/samples/charts/toolbar/custom-tool/src/config/tsconfig.spec.json
new file mode 100644
index 000000000..6eb8c055c
--- /dev/null
+++ b/samples/charts/toolbar/custom-tool/src/config/tsconfig.spec.json
@@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "baseUrl": "./",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "../test.ts",
+    "../polyfills.ts"
+  ],
+  "include": [
+    "../**/*.spec.ts",
+    "../**/*.d.ts"
+  ]
+}
diff --git a/samples/charts/toolbar/custom-tool/src/config/tsconfig.worker.json b/samples/charts/toolbar/custom-tool/src/config/tsconfig.worker.json
new file mode 100644
index 000000000..4867b1275
--- /dev/null
+++ b/samples/charts/toolbar/custom-tool/src/config/tsconfig.worker.json
@@ -0,0 +1,14 @@
+{
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/worker",
+    "lib": [
+      "ES2022",
+      "DOM"
+    ],
+    "types": []
+  },
+  "include": [
+    "../**/*Worker.ts"
+  ]
+}
diff --git a/samples/charts/toolbar/custom-tool/src/environments/environment.prod.ts b/samples/charts/toolbar/custom-tool/src/environments/environment.prod.ts
new file mode 100644
index 000000000..3612073bc
--- /dev/null
+++ b/samples/charts/toolbar/custom-tool/src/environments/environment.prod.ts
@@ -0,0 +1,3 @@
+export const environment = {
+  production: true
+};
diff --git a/samples/charts/toolbar/custom-tool/src/environments/environment.ts b/samples/charts/toolbar/custom-tool/src/environments/environment.ts
new file mode 100644
index 000000000..7b4f817ad
--- /dev/null
+++ b/samples/charts/toolbar/custom-tool/src/environments/environment.ts
@@ -0,0 +1,16 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+export const environment = {
+  production: false
+};
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */
+// import 'zone.js/dist/zone-error';  // Included with Angular CLI.
diff --git a/samples/charts/toolbar/custom-tool/src/index.html b/samples/charts/toolbar/custom-tool/src/index.html
new file mode 100644
index 000000000..7650dfb64
--- /dev/null
+++ b/samples/charts/toolbar/custom-tool/src/index.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>IgniteUI for Angular | Example | infragistics</title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link href="https://static.infragistics.com/xplatform/images/browsers/angular.ico" rel="icon" type="image/x-icon" >
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
+  <link href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" rel="stylesheet">
+  <link href="https://static.infragistics.com/xplatform/css/themes/light/bootstrap.css" rel="stylesheet">
+  <link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
+</head>
+
+<body class="igx-typography">
+  <app-root></app-root>
+</body>
+
+</html>
diff --git a/samples/charts/toolbar/custom-tool/src/main.ts b/samples/charts/toolbar/custom-tool/src/main.ts
new file mode 100644
index 000000000..ec9adcd4a
--- /dev/null
+++ b/samples/charts/toolbar/custom-tool/src/main.ts
@@ -0,0 +1,15 @@
+// tslint:disable:no-string-literal
+import "./polyfills";
+import { enableProdMode } from "@angular/core";
+import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
+import { AppModule } from "./app.module";
+
+platformBrowserDynamic().bootstrapModule(AppModule).then(ref => {
+  // ensure Angular destroys itself on hot reloads.
+  if (window["ngRef"]) {
+    window["ngRef"].destroy();
+  }
+  window["ngRef"] = ref;
+
+  // otherwise, log the boot error
+}).catch(err => console.error(err));
diff --git a/samples/charts/toolbar/custom-tool/src/polyfills.ts b/samples/charts/toolbar/custom-tool/src/polyfills.ts
new file mode 100644
index 000000000..d583cff9c
--- /dev/null
+++ b/samples/charts/toolbar/custom-tool/src/polyfills.ts
@@ -0,0 +1,65 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+* BROWSER POLYFILLS
+*/
+
+// import "core-js/es7/object";
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+//import "classlist.js";  // run `npm install --save classlist.js`.
+
+/** IE10 and IE11 requires the following for the Reflect API. */
+// import "core-js/es6/reflect";
+
+/* Evergreen browsers require these. */
+// used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
+// import "core-js/es7/reflect";
+
+/*
+ * Required to support Web Animations `@angular/platform-browser/animations`.
+ * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
+ */
+//import "web-animations-js";  // run `npm install --save web-animations-js`.
+
+/***************************************************************************************************
+ * Zone JS is required by Angular itself.
+ */
+import "hammerjs/hammer";
+import "zone.js";  // included with Angular CLI.
+
+/***************************************************************************************************
+ * @angular/animations polyfill
+ */
+// if (!Element.prototype.matches) {
+//     Element.prototype.matches = (Element.prototype as any).msMatchesSelector;
+// }
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
+
+/**
+ * Date, currency, decimal and percent pipes.
+ * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
+ */
+// import "intl";  // Run `npm install --save intl`.
+// import "intl/locale-data/jsonp/de";
+/**
+ * Need to import at least one locale-data with intl.
+ */
+// import "intl/locale-data/jsonp/en";
diff --git a/samples/charts/toolbar/custom-tool/src/styles.scss b/samples/charts/toolbar/custom-tool/src/styles.scss
new file mode 100644
index 000000000..9b431e92d
--- /dev/null
+++ b/samples/charts/toolbar/custom-tool/src/styles.scss
@@ -0,0 +1,9 @@
+/* autoprefixer grid: on */
+html,
+body {
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    margin: 0;
+    box-sizing: border-box;
+}
diff --git a/samples/charts/toolbar/custom-tool/src/typings.d.ts b/samples/charts/toolbar/custom-tool/src/typings.d.ts
new file mode 100644
index 000000000..ef5c7bd62
--- /dev/null
+++ b/samples/charts/toolbar/custom-tool/src/typings.d.ts
@@ -0,0 +1,5 @@
+/* SystemJS module definition */
+declare var module: NodeModule;
+interface NodeModule {
+  id: string;
+}
diff --git a/samples/charts/toolbar/custom-tool/tsconfig.json b/samples/charts/toolbar/custom-tool/tsconfig.json
new file mode 100644
index 000000000..1aaac63d3
--- /dev/null
+++ b/samples/charts/toolbar/custom-tool/tsconfig.json
@@ -0,0 +1,21 @@
+/*
+  This is a "Solution Style" tsconfig.json file, and is used by editors and TypeScript’s language server to improve development experience.
+  It is not intended to be used to perform a compilation.
+
+  To learn more about this file see: https://angular.io/config/solution-tsconfig.
+*/
+{
+  "useDefineForClassFields": false,
+  "files": [],
+  "references": [
+    {
+      "path": "./src/config/tsconfig.app.json"
+    },
+    {
+      "path": "./src/config/tsconfig.worker.json"
+    },
+    {
+      "path": "./src/config/tsconfig.spec.json"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/samples/charts/toolbar/custom-tool/tslint.json b/samples/charts/toolbar/custom-tool/tslint.json
new file mode 100644
index 000000000..777c777d9
--- /dev/null
+++ b/samples/charts/toolbar/custom-tool/tslint.json
@@ -0,0 +1,31 @@
+{
+  "extends": "tslint:latest",
+  "rules": {
+    "deprecation": {
+      "severity": "warning"
+    },
+    "arrow-parens": false,
+    "indent": [true, "spaces"],
+    "interface-name": [true, "always-prefix"],
+    "max-classes-per-file": false,
+    "no-bitwise": false,
+    "no-console": false,
+    "no-empty": false,
+    "no-duplicate-imports": false,
+    "no-implicit-dependencies": false,
+    "no-object-literal-type-assertion": false,
+    "no-submodule-imports": [false],
+    "no-string-literal": false,
+    "no-trailing-whitespace": false,
+    "no-var-keyword": false,
+    "object-literal-sort-keys": false,
+    "only-arrow-functions": false,
+    "prefer-conditional-expression": false,
+    "prefer-const": false,
+    "prefer-for-of": false,
+    "prefer-object-spread": false,
+    "space-within-parens": false,
+    "trailing-comma": [true, {"multiline": "never", "singleline": "never"}],
+    "variable-name": [true, "allow-leading-underscore"]
+  }
+}
diff --git a/samples/charts/toolbar/layout-actions-for-data-chart/src/app.component.ts b/samples/charts/toolbar/layout-actions-for-data-chart/src/app.component.ts
index 7239ae830..c79d4e96e 100644
--- a/samples/charts/toolbar/layout-actions-for-data-chart/src/app.component.ts
+++ b/samples/charts/toolbar/layout-actions-for-data-chart/src/app.component.ts
@@ -11,35 +11,32 @@ import { IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxLineSeriesCompo
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("toolbar", { static: true } )
-    private toolbar: IgxToolbarComponent
-    @ViewChild("enableTooltipsLabel", { static: true } )
-    private enableTooltipsLabel: IgxToolActionCheckboxComponent
-    @ViewChild("zoomResetHidden", { static: true } )
-    private zoomResetHidden: IgxToolActionLabelComponent
-    @ViewChild("zoomResetLabel", { static: true } )
-    private zoomResetLabel: IgxToolActionLabelComponent
-    @ViewChild("analyzeMenu", { static: true } )
-    private analyzeMenu: IgxToolActionIconMenuComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxDataChartComponent
-    @ViewChild("xAxis", { static: true } )
-    private xAxis: IgxCategoryXAxisComponent
-    @ViewChild("yAxis", { static: true } )
-    private yAxis: IgxNumericYAxisComponent
-    @ViewChild("lineSeries1", { static: true } )
-    private lineSeries1: IgxLineSeriesComponent
-    @ViewChild("lineSeries2", { static: true } )
-    private lineSeries2: IgxLineSeriesComponent
-    @ViewChild("lineSeries3", { static: true } )
-    private lineSeries3: IgxLineSeriesComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("toolbar", { static: true } )
+	private toolbar: IgxToolbarComponent
+	@ViewChild("enableTooltipsLabel", { static: true } )
+	private enableTooltipsLabel: IgxToolActionCheckboxComponent
+	@ViewChild("zoomResetHidden", { static: true } )
+	private zoomResetHidden: IgxToolActionLabelComponent
+	@ViewChild("zoomResetLabel", { static: true } )
+	private zoomResetLabel: IgxToolActionLabelComponent
+	@ViewChild("analyzeMenu", { static: true } )
+	private analyzeMenu: IgxToolActionIconMenuComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxDataChartComponent
+	@ViewChild("xAxis", { static: true } )
+	private xAxis: IgxCategoryXAxisComponent
+	@ViewChild("yAxis", { static: true } )
+	private yAxis: IgxNumericYAxisComponent
+	@ViewChild("lineSeries1", { static: true } )
+	private lineSeries1: IgxLineSeriesComponent
+	@ViewChild("lineSeries2", { static: true } )
+	private lineSeries2: IgxLineSeriesComponent
+	@ViewChild("lineSeries3", { static: true } )
+	private lineSeries3: IgxLineSeriesComponent
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
     public get countryRenewableElectricity(): CountryRenewableElectricity {
         if (this._countryRenewableElectricity == null)
@@ -49,35 +46,42 @@ export class AppComponent {
         return this._countryRenewableElectricity;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
 
-    public toolbarToggleTooltip({ sender, args }: { sender: any, args: IgxToolCommandEventArgs }): void {
-        var target = this.chart;
-        switch (args.command.commandId)
-    	{
-    		case "EnableTooltips":
-    			var enable = args.command.argumentsList[0].value as boolean;
-    			if (enable)
-    			{
-    				target.series.add(new IgxDataToolTipLayerComponent());
-    			}
-    			else
-    			{
-    				var toRemove = null;
-    				for (var i = 0; i < target.actualSeries.length; i++) {
-                        let s = target.actualSeries[i] as IgxSeriesComponent;
-    					if (s instanceof IgxDataToolTipLayerComponent)
-    					{
-    						toRemove = s;
-    					}
-    				}
-    				if (toRemove != null)
-    				{
-    					target.series.remove(toRemove);
-    				}
-    			}
-    			break;
-    	}
-    }
+	public ngAfterViewInit(): void
+	{
+	}
+
+	public toolbarToggleTooltip({ sender, args }: { sender: any, args: IgxToolCommandEventArgs }): void {
+	    var target = this.chart;
+	    switch (args.command.commandId)
+		{
+			case "EnableTooltips":
+				var enable = args.command.argumentsList[0].value as boolean;
+				if (enable)
+				{
+					target.series.add(new IgxDataToolTipLayerComponent());
+				}
+				else
+				{
+					var toRemove = null;
+					for (var i = 0; i < target.actualSeries.length; i++) {
+	                    let s = target.actualSeries[i] as IgxSeriesComponent;
+						if (s instanceof IgxDataToolTipLayerComponent)
+						{
+							toRemove = s;
+						}
+					}
+					if (toRemove != null)
+					{
+						target.series.remove(toRemove);
+					}
+				}
+				break;
+		}
+	}
 
 }
 
diff --git a/samples/charts/toolbar/layout-in-vertical-orientation/src/app.component.ts b/samples/charts/toolbar/layout-in-vertical-orientation/src/app.component.ts
index da9a2c634..605eb3faa 100644
--- a/samples/charts/toolbar/layout-in-vertical-orientation/src/app.component.ts
+++ b/samples/charts/toolbar/layout-in-vertical-orientation/src/app.component.ts
@@ -9,23 +9,20 @@ import { IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisCompon
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("toolbar", { static: true } )
-    private toolbar: IgxToolbarComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxDataChartComponent
-    @ViewChild("xAxis", { static: true } )
-    private xAxis: IgxCategoryXAxisComponent
-    @ViewChild("yAxis", { static: true } )
-    private yAxis: IgxNumericYAxisComponent
-    @ViewChild("lineSeries1", { static: true } )
-    private lineSeries1: IgxLineSeriesComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("toolbar", { static: true } )
+	private toolbar: IgxToolbarComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxDataChartComponent
+	@ViewChild("xAxis", { static: true } )
+	private xAxis: IgxCategoryXAxisComponent
+	@ViewChild("yAxis", { static: true } )
+	private yAxis: IgxNumericYAxisComponent
+	@ViewChild("lineSeries1", { static: true } )
+	private lineSeries1: IgxLineSeriesComponent
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
     public get countryRenewableElectricity(): CountryRenewableElectricity {
         if (this._countryRenewableElectricity == null)
@@ -35,5 +32,13 @@ export class AppComponent {
         return this._countryRenewableElectricity;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/toolbar/theming/src/app.component.ts b/samples/charts/toolbar/theming/src/app.component.ts
index 7e835c2f8..17703a1fc 100644
--- a/samples/charts/toolbar/theming/src/app.component.ts
+++ b/samples/charts/toolbar/theming/src/app.component.ts
@@ -14,25 +14,22 @@ defineAllComponents();
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("propertyEditorPanel1", { static: true } )
-    private propertyEditorPanel1: IgxPropertyEditorPanelComponent
-    @ViewChild("toolbar", { static: true } )
-    private toolbar: IgxToolbarComponent
-    @ViewChild("chart", { static: true } )
-    private chart: IgxDataChartComponent
-    @ViewChild("xAxis", { static: true } )
-    private xAxis: IgxCategoryXAxisComponent
-    @ViewChild("yAxis", { static: true } )
-    private yAxis: IgxNumericYAxisComponent
-    @ViewChild("lineSeries1", { static: true } )
-    private lineSeries1: IgxLineSeriesComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("propertyEditorPanel1", { static: true } )
+	private propertyEditorPanel1: IgxPropertyEditorPanelComponent
+	@ViewChild("toolbar", { static: true } )
+	private toolbar: IgxToolbarComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxDataChartComponent
+	@ViewChild("xAxis", { static: true } )
+	private xAxis: IgxCategoryXAxisComponent
+	@ViewChild("yAxis", { static: true } )
+	private yAxis: IgxNumericYAxisComponent
+	@ViewChild("lineSeries1", { static: true } )
+	private lineSeries1: IgxLineSeriesComponent
     private _countryRenewableElectricity: CountryRenewableElectricity = null;
     public get countryRenewableElectricity(): CountryRenewableElectricity {
         if (this._countryRenewableElectricity == null)
@@ -60,5 +57,13 @@ export class AppComponent {
         return this._componentRenderer;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/tree-map/layout/src/app.component.ts b/samples/charts/tree-map/layout/src/app.component.ts
index 80161979c..936e198bc 100644
--- a/samples/charts/tree-map/layout/src/app.component.ts
+++ b/samples/charts/tree-map/layout/src/app.component.ts
@@ -14,25 +14,22 @@ defineAllComponents();
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
-
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("propertyEditorPanel1", { static: true } )
-    private propertyEditorPanel1: IgxPropertyEditorPanelComponent
-    @ViewChild("layoutTypeEditor", { static: true } )
-    private layoutTypeEditor: IgxPropertyEditorPropertyDescriptionComponent
-    @ViewChild("layoutOrientationEditor", { static: true } )
-    private layoutOrientationEditor: IgxPropertyEditorPropertyDescriptionComponent
-    @ViewChild("headerDisplayModeEditor", { static: true } )
-    private headerDisplayModeEditor: IgxPropertyEditorPropertyDescriptionComponent
-    @ViewChild("labelVerticalAlignmentEditor", { static: true } )
-    private labelVerticalAlignmentEditor: IgxPropertyEditorPropertyDescriptionComponent
-    @ViewChild("treemap", { static: true } )
-    private treemap: IgxTreemapComponent
 
+export class AppComponent implements AfterViewInit
+{
+
+	@ViewChild("propertyEditorPanel1", { static: true } )
+	private propertyEditorPanel1: IgxPropertyEditorPanelComponent
+	@ViewChild("layoutTypeEditor", { static: true } )
+	private layoutTypeEditor: IgxPropertyEditorPropertyDescriptionComponent
+	@ViewChild("layoutOrientationEditor", { static: true } )
+	private layoutOrientationEditor: IgxPropertyEditorPropertyDescriptionComponent
+	@ViewChild("headerDisplayModeEditor", { static: true } )
+	private headerDisplayModeEditor: IgxPropertyEditorPropertyDescriptionComponent
+	@ViewChild("labelVerticalAlignmentEditor", { static: true } )
+	private labelVerticalAlignmentEditor: IgxPropertyEditorPropertyDescriptionComponent
+	@ViewChild("treemap", { static: true } )
+	private treemap: IgxTreemapComponent
     private _countyHierarchicalData: CountyHierarchicalData = null;
     public get countyHierarchicalData(): CountyHierarchicalData {
         if (this._countyHierarchicalData == null)
@@ -53,5 +50,13 @@ export class AppComponent {
         return this._componentRenderer;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/tree-map/overview/src/app.component.ts b/samples/charts/tree-map/overview/src/app.component.ts
index 0b00d41ef..7b22b0470 100644
--- a/samples/charts/tree-map/overview/src/app.component.ts
+++ b/samples/charts/tree-map/overview/src/app.component.ts
@@ -8,15 +8,12 @@ import { IgxTreemapComponent } from 'igniteui-angular-charts';
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("treemap", { static: true } )
-    private treemap: IgxTreemapComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("treemap", { static: true } )
+	private treemap: IgxTreemapComponent
     private _countyHierarchicalData: CountyHierarchicalData = null;
     public get countyHierarchicalData(): CountyHierarchicalData {
         if (this._countyHierarchicalData == null)
@@ -26,5 +23,13 @@ export class AppComponent {
         return this._countyHierarchicalData;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }
 
diff --git a/samples/charts/tree-map/styling/src/app.component.ts b/samples/charts/tree-map/styling/src/app.component.ts
index 9aa9e6eac..b81157f89 100644
--- a/samples/charts/tree-map/styling/src/app.component.ts
+++ b/samples/charts/tree-map/styling/src/app.component.ts
@@ -8,31 +8,28 @@ import { IgxTreemapComponent, IgxTreemapNodeStyleMappingComponent } from 'ignite
     templateUrl: "./app.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
 
-    public constructor(private _detector: ChangeDetectorRef) {
-
-    }
-
-    @ViewChild("treemap", { static: true } )
-    private treemap: IgxTreemapComponent
-    @ViewChild("styling1", { static: true } )
-    private styling1: IgxTreemapNodeStyleMappingComponent
-    @ViewChild("styling2", { static: true } )
-    private styling2: IgxTreemapNodeStyleMappingComponent
-    @ViewChild("styling3", { static: true } )
-    private styling3: IgxTreemapNodeStyleMappingComponent
-    @ViewChild("styling4", { static: true } )
-    private styling4: IgxTreemapNodeStyleMappingComponent
-    @ViewChild("styling5", { static: true } )
-    private styling5: IgxTreemapNodeStyleMappingComponent
-    @ViewChild("styling6", { static: true } )
-    private styling6: IgxTreemapNodeStyleMappingComponent
-    @ViewChild("styling7", { static: true } )
-    private styling7: IgxTreemapNodeStyleMappingComponent
-    @ViewChild("styling8", { static: true } )
-    private styling8: IgxTreemapNodeStyleMappingComponent
+export class AppComponent implements AfterViewInit
+{
 
+	@ViewChild("treemap", { static: true } )
+	private treemap: IgxTreemapComponent
+	@ViewChild("styling1", { static: true } )
+	private styling1: IgxTreemapNodeStyleMappingComponent
+	@ViewChild("styling2", { static: true } )
+	private styling2: IgxTreemapNodeStyleMappingComponent
+	@ViewChild("styling3", { static: true } )
+	private styling3: IgxTreemapNodeStyleMappingComponent
+	@ViewChild("styling4", { static: true } )
+	private styling4: IgxTreemapNodeStyleMappingComponent
+	@ViewChild("styling5", { static: true } )
+	private styling5: IgxTreemapNodeStyleMappingComponent
+	@ViewChild("styling6", { static: true } )
+	private styling6: IgxTreemapNodeStyleMappingComponent
+	@ViewChild("styling7", { static: true } )
+	private styling7: IgxTreemapNodeStyleMappingComponent
+	@ViewChild("styling8", { static: true } )
+	private styling8: IgxTreemapNodeStyleMappingComponent
     private _countyHierarchicalData: CountyHierarchicalData = null;
     public get countyHierarchicalData(): CountyHierarchicalData {
         if (this._countyHierarchicalData == null)
@@ -42,5 +39,13 @@ export class AppComponent {
         return this._countyHierarchicalData;
     }
 
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
 }