diff --git a/packages/ext-angular-kitchensink/src/examples/Charts/Financial/OHLC/OHLC.ts b/packages/ext-angular-kitchensink/src/examples/Charts/Financial/OHLC/OHLC.ts
index b7e69b87..9d10bcac 100644
--- a/packages/ext-angular-kitchensink/src/examples/Charts/Financial/OHLC/OHLC.ts
+++ b/packages/ext-angular-kitchensink/src/examples/Charts/Financial/OHLC/OHLC.ts
@@ -1,7 +1,6 @@
-import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
-import {createData} from './createData';
-
 declare var Ext: any;
+import { Component } from '@angular/core';
+import {createData} from './createData';
 
 Ext.require([
     'Ext.chart.axis.Numeric',
@@ -14,129 +13,120 @@ Ext.require([
   templateUrl: './OHLC.html',
   styles: [``]
 })
-export class OHLCComponent implements OnInit {
+export class OHLCComponent {
 
   constructor() {
-
     this.refresh();
    }
 
-  ngOnInit() {
+   isPhone = Ext.os.is.Phone;
+   store = Ext.create('Ext.data.Store', {
+    fields: ['time', 'open', 'high', 'low', 'close']
+  });
+
+  theme:string= 'default';
+  zoom:boolean= false;
+
+  panzoom:any;
+  crosshair:any;
+
+  chart:any;
+
+  chartNavReady = function(event) {
+      console.log("chartNavReady");
+      this.chart = event.ext;
+      this.panzoom = this.chart.getInteraction('panzoom');
+      this.crosshair = this.chart.getInteraction('crosshair');
   }
 
-   isPhone = Ext.os.is.Phone;
 
+  refresh = () => {
+      this.store.loadData(createData(1000));
+  }
 
-   store = Ext.create('Ext.data.Store', {
-    fields: ['time', 'open', 'high', 'low', 'close']
-});
-
-theme:string= 'default';
-zoom:boolean= false;
-
-panzoom:any;
-crosshair:any;
-
-chart:any;
-
-chartNavReady = function(event) {
-    console.log("chartNavReady");
-    this.chart = event.ext;
-    this.panzoom = this.chart.getInteraction('panzoom');
-    this.crosshair = this.chart.getInteraction('crosshair');
-}
-
-
-refresh = () => {
-    this.store.loadData(createData(1000));
-}
-
-changeTheme = theme => this.theme = theme;
-
-toggleZoomOnPan = (zoomOnPan) => {
-    this.toggleCrosshair(false);
-    this.panzoom.setZoomOnPan(zoomOnPan);
-    this.zoom = zoomOnPan;
-}
-
-toggleCrosshair = (crosshair) => {
-    this.panzoom.setEnabled(!crosshair);
-    this.crosshair.setEnabled(crosshair);
-    if(crosshair){
-        this.crosshair = crosshair;
-    }
-}
-
-
-cartesianAxes = [{
-    type: 'numeric',
-    fields: ['open', 'high', 'low', 'close'],
-    position: 'left',
-    maximum: 1000,
-    minimum: 0
-}, {
-    type: 'time',
-    fields: ['time'],
-    position: 'bottom',
-    visibleRange: [0, 0.3],
-    style: {
-        axisLine: false
-    }
-}];
-
-cartesianSeries = {
-    type: 'candlestick',
-    xField: 'time',
-    openField: 'open',
-    highField: 'high',
-    lowField: 'low',
-    closeField: 'close',
-    style: {
-        ohlcType: 'ohlc',
-        barWidth: 10,
-        opacity: 0.9,
-        dropStyle: {
-            fill: 'rgb(237,123,43)',
-            stroke: 'rgb(237,123,43)'
-        },
-        raiseStyle: {
-            fill: 'rgb(55,153,19)',
-            stroke: 'rgb(55,153,19)'
-        }
-    },
-    aggregator: {
-        strategy: 'time'
-    }
-};
-
-
-cartesianInteractions = [{
-    type: 'panzoom',
-    axes: {
-        left: {
-            allowPan: false,
-            allowZoom: false
-        },
-        bottom: {
-            allowPan: true,
-            allowZoom: true
-        }
-    }
-}, {
-    type: 'crosshair',
-    axes: {
-        label: {
-            fillStyle: 'white'
-        },
-        rect: {
-            fillStyle: '#344459',
-            opacity: 0.7,
-            radius: 5
-        }
-    }
-}];
+  changeTheme = theme => this.theme = theme;
+
+  toggleZoomOnPan = (zoomOnPan) => {
+      this.toggleCrosshair(false);
+      this.panzoom.setZoomOnPan(zoomOnPan);
+      this.zoom = zoomOnPan;
+  }
 
+  toggleCrosshair = (crosshair) => {
+      this.panzoom.setEnabled(!crosshair);
+      this.crosshair.setEnabled(crosshair);
+      if(crosshair){
+          this.crosshair = crosshair;
+      }
+  }
 
 
+  cartesianAxes = [{
+      type: 'numeric',
+      fields: ['open', 'high', 'low', 'close'],
+      position: 'left',
+      maximum: 1000,
+      minimum: 0
+  }, {
+      type: 'time',
+      fields: ['time'],
+      position: 'bottom',
+      visibleRange: [0, 0.3],
+      style: {
+          axisLine: false
+      }
+  }];
+
+  cartesianSeries = {
+      type: 'candlestick',
+      xField: 'time',
+      openField: 'open',
+      highField: 'high',
+      lowField: 'low',
+      closeField: 'close',
+      style: {
+          ohlcType: 'ohlc',
+          barWidth: 10,
+          opacity: 0.9,
+          dropStyle: {
+              fill: 'rgb(237,123,43)',
+              stroke: 'rgb(237,123,43)'
+          },
+          raiseStyle: {
+              fill: 'rgb(55,153,19)',
+              stroke: 'rgb(55,153,19)'
+          }
+      },
+      aggregator: {
+          strategy: 'time'
+      }
+  };
+
+
+  cartesianInteractions = [{
+      type: 'panzoom',
+      axes: {
+          left: {
+              allowPan: false,
+              allowZoom: false
+          },
+          bottom: {
+              allowPan: true,
+              allowZoom: true
+          }
+      }
+  }, {
+      type: 'crosshair',
+      axes: {
+          label: {
+              fillStyle: 'white'
+          },
+          rect: {
+              fillStyle: '#344459',
+              opacity: 0.7,
+              radius: 5
+          }
+      }
+  }];
 
 }
\ No newline at end of file
diff --git a/packages/ext-angular-kitchensink/src/examples/Grid/AddonsDecorations/RowBody/RowBody.ts b/packages/ext-angular-kitchensink/src/examples/Grid/AddonsDecorations/RowBody/RowBody.ts
index b4bf9c0a..bb6d8996 100644
--- a/packages/ext-angular-kitchensink/src/examples/Grid/AddonsDecorations/RowBody/RowBody.ts
+++ b/packages/ext-angular-kitchensink/src/examples/Grid/AddonsDecorations/RowBody/RowBody.ts
@@ -1,15 +1,13 @@
-import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
-import {model} from '../../CompanyModel';
-
 declare var Ext: any;
-
+import { Component } from '@angular/core';
+import {model} from '../../CompanyModel';
 
 @Component({
   selector: 'rowbody-component',
   templateUrl: './RowBody.html',
   styles: [``]
 })
-export class RowBodyComponent implements OnInit {
+export class RowBodyComponent {
 
   store = Ext.create('Ext.data.Store', {
     model,
@@ -50,12 +48,4 @@ export class RowBodyComponent implements OnInit {
     return formattedValue;
   }
 
-  constructor() { }
-
-
-
-  ngOnInit() {
-  }
-
-
 }
\ No newline at end of file
diff --git a/packages/ext-angular-kitchensink/src/examples/Grid/AddonsDecorations/SummaryRow/SummaryRow.ts b/packages/ext-angular-kitchensink/src/examples/Grid/AddonsDecorations/SummaryRow/SummaryRow.ts
index a180c803..f7751328 100644
--- a/packages/ext-angular-kitchensink/src/examples/Grid/AddonsDecorations/SummaryRow/SummaryRow.ts
+++ b/packages/ext-angular-kitchensink/src/examples/Grid/AddonsDecorations/SummaryRow/SummaryRow.ts
@@ -1,7 +1,6 @@
-import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
-import {model} from '../../CompanyModel';
-
 declare var Ext: any;
+import { Component } from '@angular/core';
+import {model} from '../../CompanyModel';
 
 Ext.require([
   'Ext.grid.plugin.SummaryRow',
@@ -14,7 +13,7 @@ Ext.require([
   templateUrl: './SummaryRow.html',
   styles: [``]
 })
-export class SummaryRowComponent implements OnInit {
+export class SummaryRowComponent {
 
   store = Ext.create('Ext.data.Store', {
     model,
@@ -39,13 +38,5 @@ export class SummaryRowComponent implements OnInit {
   } ;
 
 summarizeCompanies = (grid, context) => context.records.length + ' Companies';
-  
-  constructor() { }
-
-
-
-  ngOnInit() {
-  }
-
 
 }
\ No newline at end of file
diff --git a/packages/ext-angular-kitchensink/src/examples/Grid/AddonsDecorations/ViewOptions/ViewOptions.ts b/packages/ext-angular-kitchensink/src/examples/Grid/AddonsDecorations/ViewOptions/ViewOptions.ts
index 6cb19593..b93bdea6 100644
--- a/packages/ext-angular-kitchensink/src/examples/Grid/AddonsDecorations/ViewOptions/ViewOptions.ts
+++ b/packages/ext-angular-kitchensink/src/examples/Grid/AddonsDecorations/ViewOptions/ViewOptions.ts
@@ -1,7 +1,6 @@
-import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
-import {model} from '../../CompanyModel';
-
 declare var Ext: any;
+import { Component } from '@angular/core';
+import {model} from '../../CompanyModel';
 
 Ext.require(['Ext.grid.plugin.ViewOptions']);
 
@@ -10,7 +9,7 @@ Ext.require(['Ext.grid.plugin.ViewOptions']);
   templateUrl: './ViewOptions.html',
   styles: [``]
 })
-export class ViewOptionsComponent implements OnInit {
+export class ViewOptionsComponent {
 
   toolbarHtml = `
   <div style="fontSize:'14px';fontWeight: 'normal';">Long press on a column header to customize this grid.</div>
@@ -25,8 +24,6 @@ export class ViewOptionsComponent implements OnInit {
     } 
   });
 
-  constructor() { }
-
   renderSign = (format, value) => {
     var formattedValue = Ext.util.Format.number(value, format);
     var color = "";
@@ -39,8 +36,4 @@ export class ViewOptionsComponent implements OnInit {
     return formattedValue;
   } ;
 
-  ngOnInit() {
-  }
-
-
 }
\ No newline at end of file
diff --git a/packages/ext-angular-kitchensink/src/examples/Grid/AdvancedFeatures/BigData/BigData.ts b/packages/ext-angular-kitchensink/src/examples/Grid/AdvancedFeatures/BigData/BigData.ts
index 7cf3babb..afc1cf99 100644
--- a/packages/ext-angular-kitchensink/src/examples/Grid/AdvancedFeatures/BigData/BigData.ts
+++ b/packages/ext-angular-kitchensink/src/examples/Grid/AdvancedFeatures/BigData/BigData.ts
@@ -1,10 +1,8 @@
-import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
-
+declare var Ext: any;
+import { Component } from '@angular/core';
 import {model} from './GridModel'
 import {BigDataService} from './BigData.service';
 
-declare var Ext: any;
-
 Ext.require([
     'Ext.grid.plugin.*',
     'Ext.tip.ToolTip',
@@ -12,13 +10,12 @@ Ext.require([
     'Ext.exporter.*'
 ]);
 
-
 @Component({
   selector: 'bigdata-component',
   templateUrl: './BigData.html',
   styles: [``]
 })
-export class BigDataComponent implements OnInit {
+export class BigDataComponent {
 
   constructor(bigDataService : BigDataService) { }
 
@@ -37,10 +34,6 @@ export class BigDataComponent implements OnInit {
   });
 
 
-
-  ngOnInit() {
-  }
-
   grid:any;
 
   gridReady = (event) => {
diff --git a/packages/ext-angular-kitchensink/src/examples/Grid/AdvancedFeatures/ComponentsInCells/ActionCells.ts b/packages/ext-angular-kitchensink/src/examples/Grid/AdvancedFeatures/ComponentsInCells/ActionCells.ts
index 3b84c8ec..ca9377fb 100644
--- a/packages/ext-angular-kitchensink/src/examples/Grid/AdvancedFeatures/ComponentsInCells/ActionCells.ts
+++ b/packages/ext-angular-kitchensink/src/examples/Grid/AdvancedFeatures/ComponentsInCells/ActionCells.ts
@@ -1,20 +1,13 @@
-import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
-
 declare var Ext: any;
+import { Component } from '@angular/core';
+
+
 
 @Component({
   selector: 'action-cell',
   templateUrl: './ActionCells.html',
   styles: [``]
 })
-export class ActionCellsComponent implements OnInit {
-
-  constructor() { }
-
-
-
-  ngOnInit() {
-  }
-
+export class ActionCellsComponent {
 
 }
\ No newline at end of file
diff --git a/packages/ext-angular-kitchensink/src/examples/Grid/AdvancedFeatures/ReconfigureGrid/ReconfigureGrid.ts b/packages/ext-angular-kitchensink/src/examples/Grid/AdvancedFeatures/ReconfigureGrid/ReconfigureGrid.ts
index 90a57d8e..5c560097 100644
--- a/packages/ext-angular-kitchensink/src/examples/Grid/AdvancedFeatures/ReconfigureGrid/ReconfigureGrid.ts
+++ b/packages/ext-angular-kitchensink/src/examples/Grid/AdvancedFeatures/ReconfigureGrid/ReconfigureGrid.ts
@@ -1,18 +1,13 @@
-import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
-import { model } from './GridModel'
-
-
-
 declare var Ext: any;
+import { Component } from '@angular/core';
+import { model } from './GridModel'
 
 @Component({
   selector: 'reconfiguregrid-component',
   templateUrl: './ReconfigureGrid.html',
   styles: [``]
 })
-export class ReconfigureGridComponent implements OnInit {
-
-  constructor() { }
+export class ReconfigureGridComponent {
 
   lastNames = ['Jones', 'Smith', 'Lee', 'Wilson', 'Black', 'Williams', 'Lewis', 'Johnson', 'Foot', 'Little', 'Vee', 'Train', 'Hot', 'Mutt'];
   firstNames = ['Fred', 'Julie', 'Bill', 'Ted', 'Jack', 'John', 'Mark', 'Mike', 'Chris', 'Bob', 'Travis', 'Kelly', 'Sara'];
@@ -166,11 +161,4 @@ export class ReconfigureGridComponent implements OnInit {
     return departments[Ext.Number.randomInt(0, len - 1)];
   }
 
-
-
-  ngOnInit() {
-    console.log("In reconfigured grid");
-  }
-
-
 }
\ No newline at end of file
diff --git a/packages/ext-angular-kitchensink/src/examples/Grid/AdvancedFeatures/StockTicker/StockTicker.ts b/packages/ext-angular-kitchensink/src/examples/Grid/AdvancedFeatures/StockTicker/StockTicker.ts
index b5eda84a..9ca96604 100644
--- a/packages/ext-angular-kitchensink/src/examples/Grid/AdvancedFeatures/StockTicker/StockTicker.ts
+++ b/packages/ext-angular-kitchensink/src/examples/Grid/AdvancedFeatures/StockTicker/StockTicker.ts
@@ -34,8 +34,6 @@ export class StockTickerComponent implements OnInit {
     }
   });
 
-  constructor() { }
-
   ngOnInit() {
     if (this.store.isLoaded() && this.store.getCount()) {
       this.onStoreLoad(this.store);
diff --git a/packages/ext-angular-kitchensink/src/examples/Grid/EditableGrid/EditableGrid.ts b/packages/ext-angular-kitchensink/src/examples/Grid/EditableGrid/EditableGrid.ts
index c488207b..7d3ee157 100644
--- a/packages/ext-angular-kitchensink/src/examples/Grid/EditableGrid/EditableGrid.ts
+++ b/packages/ext-angular-kitchensink/src/examples/Grid/EditableGrid/EditableGrid.ts
@@ -31,13 +31,10 @@ export class EditableGridComponent implements OnInit {
     }
   });
 
-
   isDesktop = Ext.os.is.Desktop ;
   pressType : string;
   pressEntity : string;
 
-
-
   constructor(gridService: GridService) {
     gridService.initCompanyData();
   }
@@ -55,8 +52,6 @@ export class EditableGridComponent implements OnInit {
     return formattedValue;
   }
 
-
-
   ngOnInit() {
     if(this.isDesktop) {
       this.pressType = "click";
@@ -68,5 +63,4 @@ export class EditableGridComponent implements OnInit {
     }
   }
 
-
 }
diff --git a/packages/ext-angular-kitchensink/src/examples/Grid/GroupedGrid/GroupedGrid.ts b/packages/ext-angular-kitchensink/src/examples/Grid/GroupedGrid/GroupedGrid.ts
index 453bb3bf..d5c2f48c 100644
--- a/packages/ext-angular-kitchensink/src/examples/Grid/GroupedGrid/GroupedGrid.ts
+++ b/packages/ext-angular-kitchensink/src/examples/Grid/GroupedGrid/GroupedGrid.ts
@@ -1,7 +1,6 @@
-import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
-import { GridService } from '../Grid.service'
-
 declare var Ext: any;
+import { Component } from '@angular/core';
+import { GridService } from '../Grid.service'
 
 Ext.require([
   'Ext.grid.cell.Number',
@@ -15,7 +14,7 @@ Ext.require([
   templateUrl: './GroupedGrid.html',
   styles: [``]
 })
-export class GroupedGridComponent implements OnInit {
+export class GroupedGridComponent {
 
   store = Ext.create('Ext.data.Store', {
     autoLoad: true,
@@ -36,9 +35,4 @@ onToggleGrouping = on => { this.grouped = on;}
    }
 
 
-
-  ngOnInit() {
-  }
-
-
 }
diff --git a/packages/ext-angular-kitchensink/src/examples/Layouts/CardLayout/CardLayout.ts b/packages/ext-angular-kitchensink/src/examples/Layouts/CardLayout/CardLayout.ts
index ae957c30..5e4392d3 100644
--- a/packages/ext-angular-kitchensink/src/examples/Layouts/CardLayout/CardLayout.ts
+++ b/packages/ext-angular-kitchensink/src/examples/Layouts/CardLayout/CardLayout.ts
@@ -1,16 +1,13 @@
-import {Component, OnInit} from '@angular/core'
-import colors from '../colors';
-
 declare var Ext: any;
+import { Component } from '@angular/core'
+import colors from '../colors';
 
 @Component({
   selector: 'cardlayout-component',
   templateUrl: "./CardLayout.html",
   styles: [``]
 })
-export class CardLayoutComponent implements OnInit  {
-
-  constructor() { }
+export class CardLayoutComponent {
 
   activeCard:number = 0; 
   animation:any = null;
@@ -45,6 +42,4 @@ export class CardLayoutComponent implements OnInit  {
     { text: 'Flip', animation: { type: 'flip', ...this.animationDefaults } }
   ];
 
-  ngOnInit() {}
-
 }
diff --git a/packages/ext-angular-kitchensink/src/examples/Layouts/CenterLayout/CenterLayout.ts b/packages/ext-angular-kitchensink/src/examples/Layouts/CenterLayout/CenterLayout.ts
index 80af0134..70b2165f 100644
--- a/packages/ext-angular-kitchensink/src/examples/Layouts/CenterLayout/CenterLayout.ts
+++ b/packages/ext-angular-kitchensink/src/examples/Layouts/CenterLayout/CenterLayout.ts
@@ -1,19 +1,14 @@
-import {Component, OnInit} from '@angular/core'
-import colors from '../colors';
-
 declare var Ext: any;
+import { Component } from '@angular/core'
+import colors from '../colors';
 
 @Component({
   selector: 'centerlayout-component',
   templateUrl: "./CenterLayout.html",
   styles: [``]
 })
-export class CenterLayoutComponent implements OnInit  {
-
-  constructor() { }
+export class CenterLayoutComponent {
 
   colors:object = colors; 
 
-  ngOnInit() {}
-
 }
diff --git a/packages/ext-angular-kitchensink/src/examples/Layouts/FitLayout/FitLayout.ts b/packages/ext-angular-kitchensink/src/examples/Layouts/FitLayout/FitLayout.ts
index 326f0b41..3f785e77 100644
--- a/packages/ext-angular-kitchensink/src/examples/Layouts/FitLayout/FitLayout.ts
+++ b/packages/ext-angular-kitchensink/src/examples/Layouts/FitLayout/FitLayout.ts
@@ -1,19 +1,15 @@
-import {Component, OnInit} from '@angular/core'
+declare var Ext: any;
+import { Component } from '@angular/core'
 import colors from '../colors';
 
-declare var Ext: any;
 
 @Component({
   selector: 'fitlayout-component',
   templateUrl: "./FitLayout.html",
   styles: [``]
 })
-export class FitLayoutComponent implements OnInit  {
-
-  constructor() { }
+export class FitLayoutComponent {
 
   colors:object = colors;
 
-  ngOnInit() {}
-
 }
diff --git a/packages/ext-angular-kitchensink/src/examples/Layouts/FormLayout/FormLayout.ts b/packages/ext-angular-kitchensink/src/examples/Layouts/FormLayout/FormLayout.ts
index 4276d7b1..f6cafd64 100644
--- a/packages/ext-angular-kitchensink/src/examples/Layouts/FormLayout/FormLayout.ts
+++ b/packages/ext-angular-kitchensink/src/examples/Layouts/FormLayout/FormLayout.ts
@@ -1,21 +1,15 @@
-import {Component, OnInit} from '@angular/core'
-import colors from '../colors';
-
 declare var Ext: any;
+import { Component } from '@angular/core'
+import colors from '../colors';
 
 @Component({
   selector: 'formlayout-component',
   templateUrl: "./FormLayout.html",
   styles: [``]
 })
-export class FormLayoutComponent implements OnInit  {
-
-  constructor() { }
+export class FormLayoutComponent {
 
   isPhone:boolean = Ext.os.is.Phone;
-
   colors:object = colors; 
 
-  ngOnInit() {}
-
 }
diff --git a/packages/ext-angular-kitchensink/src/examples/Layouts/ResizableLayout/ResizableLayout.ts b/packages/ext-angular-kitchensink/src/examples/Layouts/ResizableLayout/ResizableLayout.ts
index f6f99965..4db3d339 100644
--- a/packages/ext-angular-kitchensink/src/examples/Layouts/ResizableLayout/ResizableLayout.ts
+++ b/packages/ext-angular-kitchensink/src/examples/Layouts/ResizableLayout/ResizableLayout.ts
@@ -1,23 +1,16 @@
-import {Component, OnInit} from '@angular/core'
-import colors from '../colors';
-
 declare var Ext: any;
+import { Component } from '@angular/core'
+import colors from '../colors';
 
 @Component({
   selector: 'resizablelayout-component',
   templateUrl: "./ResizableLayout.html",
   styles: [``]
 })
-export class ResizableLayoutComponent implements OnInit  {
-
-  constructor() { }
+export class ResizableLayoutComponent {
 
   isPhone:boolean = Ext.os.is.Phone;
-
   colors:object = colors; 
-
-  ngOnInit() {}
-
   rightResizable = {split: true,  edges: 'west'};
 
 }
diff --git a/packages/ext-angular-kitchensink/src/examples/Layouts/hboxLayout/hboxLayout.ts b/packages/ext-angular-kitchensink/src/examples/Layouts/hboxLayout/hboxLayout.ts
index f6a1e4a1..18c371e0 100644
--- a/packages/ext-angular-kitchensink/src/examples/Layouts/hboxLayout/hboxLayout.ts
+++ b/packages/ext-angular-kitchensink/src/examples/Layouts/hboxLayout/hboxLayout.ts
@@ -1,21 +1,15 @@
-import {Component, OnInit} from '@angular/core'
-import colors from '../colors';
-
 declare var Ext: any;
+import { Component } from '@angular/core'
+import colors from '../colors';
 
 @Component({
   selector: 'hboxlayout-component',
   templateUrl: "./hboxLayout.html",
   styles: [``]
 })
-export class hboxLayoutComponent implements OnInit  {
-
-  constructor() { }
+export class hboxLayoutComponent {
 
   isPhone:boolean = Ext.os.is.Phone;
-
   colors:object = colors; 
 
-  ngOnInit() {}
-
 }
diff --git a/packages/ext-angular-kitchensink/src/examples/Layouts/vboxLayout/vboxLayout.ts b/packages/ext-angular-kitchensink/src/examples/Layouts/vboxLayout/vboxLayout.ts
index 818827a2..63814377 100644
--- a/packages/ext-angular-kitchensink/src/examples/Layouts/vboxLayout/vboxLayout.ts
+++ b/packages/ext-angular-kitchensink/src/examples/Layouts/vboxLayout/vboxLayout.ts
@@ -1,21 +1,15 @@
-import {Component, OnInit} from '@angular/core'
-import colors from '../colors';
-
 declare var Ext: any;
+import { Component } from '@angular/core'
+import colors from '../colors';
 
 @Component({
   selector: 'vboxlayout-component',
   templateUrl: "./vboxLayout.html",
   styles: [``]
 })
-export class vboxLayoutComponent implements OnInit  {
-
-  constructor() { }
+export class vboxLayoutComponent {
 
   isPhone:boolean = Ext.os.is.Phone;
-
   colors:object = colors; 
 
-  ngOnInit() {}
-
 }
diff --git a/packages/ext-angular-kitchensink/src/examples/Lists/BasicAccordionSwiper/BasicAccordionSwiper.ts b/packages/ext-angular-kitchensink/src/examples/Lists/BasicAccordionSwiper/BasicAccordionSwiper.ts
index 007d68bf..3317fdf0 100644
--- a/packages/ext-angular-kitchensink/src/examples/Lists/BasicAccordionSwiper/BasicAccordionSwiper.ts
+++ b/packages/ext-angular-kitchensink/src/examples/Lists/BasicAccordionSwiper/BasicAccordionSwiper.ts
@@ -1,6 +1,5 @@
-import {Component, OnInit} from '@angular/core'
-
 declare var Ext: any;
+import { Component } from '@angular/core'
 
 Ext.require([
     'Ext.dataview.listswiper.ListSwiper'
@@ -11,9 +10,7 @@ Ext.require([
   templateUrl: "./BasicAccordionSwiper.html",
   styles: [``]
 })
-export class BasicAccordionSwiperComponent implements OnInit  {
-
-  constructor() {}
+export class BasicAccordionSwiperComponent {
 
   store = Ext.create('Ext.data.Store', { 
     autoLoad: true,
@@ -48,6 +45,4 @@ export class BasicAccordionSwiperComponent implements OnInit  {
     Ext.toast(`Edit ${record.get('first_name')} ${record.get('last_name')}`)
   }
 
-  ngOnInit() {}
-
 }
diff --git a/packages/ext-angular-kitchensink/src/examples/Lists/BasicStepSwiper/BasicStepSwiper.ts b/packages/ext-angular-kitchensink/src/examples/Lists/BasicStepSwiper/BasicStepSwiper.ts
index 68354873..a1059e98 100644
--- a/packages/ext-angular-kitchensink/src/examples/Lists/BasicStepSwiper/BasicStepSwiper.ts
+++ b/packages/ext-angular-kitchensink/src/examples/Lists/BasicStepSwiper/BasicStepSwiper.ts
@@ -1,6 +1,5 @@
-import {Component, OnInit} from '@angular/core'
-
 declare var Ext: any;
+import { Component } from '@angular/core'
 
 Ext.require([
     'Ext.dataview.listswiper.ListSwiper',
@@ -13,9 +12,8 @@ Ext.require([
   styles: [``]
 })
 
-export class BasicStepSwiperComponent implements OnInit  {
+export class BasicStepSwiperComponent {
 
-  constructor() { }
   store = Ext.create('Ext.data.Store', { 
     autoLoad: true,
     proxy: {
@@ -46,6 +44,4 @@ export class BasicStepSwiperComponent implements OnInit  {
     Ext.toast(`Edit ${record.get('first_name')} ${record.get('last_name')}`)
   }
 
-  ngOnInit() {}
-
 }
diff --git a/packages/ext-angular-kitchensink/src/examples/Lists/Disclosure/Disclosure.ts b/packages/ext-angular-kitchensink/src/examples/Lists/Disclosure/Disclosure.ts
index 52c84fa9..c6a536d4 100644
--- a/packages/ext-angular-kitchensink/src/examples/Lists/Disclosure/Disclosure.ts
+++ b/packages/ext-angular-kitchensink/src/examples/Lists/Disclosure/Disclosure.ts
@@ -1,15 +1,13 @@
-import {Component, OnInit} from '@angular/core'
-
 declare var Ext: any;
+import { Component } from '@angular/core'
 
 @Component({
   selector: 'disclosurelist-component',
   templateUrl: "./Disclosure.html",
   styles: [``]
 })
-export class DisclosureListComponent implements OnInit  {
+export class DisclosureListComponent {
 
-  constructor() { }
   store = Ext.create('Ext.data.Store', { 
     autoLoad: true,
     proxy: {
@@ -24,7 +22,5 @@ export class DisclosureListComponent implements OnInit  {
   msgAlert = (param) => {
     Ext.Msg.alert('Tap', 'Disclose more info for ' + param.get('first_name'), Ext.emptyFn);
   };
-  
-  ngOnInit() {}
 
 }
diff --git a/packages/ext-angular-kitchensink/src/examples/Lists/Grouped/GroupedList.ts b/packages/ext-angular-kitchensink/src/examples/Lists/Grouped/GroupedList.ts
index a3035479..7440c569 100644
--- a/packages/ext-angular-kitchensink/src/examples/Lists/Grouped/GroupedList.ts
+++ b/packages/ext-angular-kitchensink/src/examples/Lists/Grouped/GroupedList.ts
@@ -1,15 +1,13 @@
-import {Component, OnInit} from '@angular/core'
-
 declare var Ext: any;
+import { Component } from '@angular/core'
 
 @Component({
   selector: 'groupedlist-component',
   templateUrl: "./GroupedList.html",
   styles: [``]
 })
-export class GroupedListComponent implements OnInit  {
+export class GroupedListComponent {
 
-  constructor() { }
   store = Ext.create('Ext.data.Store', { 
     autoLoad: true,
     proxy: {
@@ -32,6 +30,4 @@ export class GroupedListComponent implements OnInit  {
     Ext.toast(`You selected ${selected.get('first_name')} ${selected.get('last_name')}.`);
   }
 
-  ngOnInit() {}
-
 }
diff --git a/packages/ext-angular-kitchensink/src/examples/Lists/NestedList/NestedList.ts b/packages/ext-angular-kitchensink/src/examples/Lists/NestedList/NestedList.ts
index f0166a80..efda5662 100644
--- a/packages/ext-angular-kitchensink/src/examples/Lists/NestedList/NestedList.ts
+++ b/packages/ext-angular-kitchensink/src/examples/Lists/NestedList/NestedList.ts
@@ -1,15 +1,15 @@
-import {Component, OnInit} from '@angular/core'
-
 declare var Ext: any;
+import { Component } from '@angular/core'
+
+
 
 @Component({
   selector: 'nestedlist-component',
   templateUrl: "./NestedList.html",
   styles: [``]
 })
-export class NestedListComponent implements OnInit  {
+export class NestedListComponent {
 
-  constructor() { }
   store = Ext.create('Ext.data.TreeStore', { 
     autoLoad: true,
     root: {},
@@ -24,7 +24,4 @@ export class NestedListComponent implements OnInit  {
     Ext.toast(`You selected ${record.get('text')}`)
   }
 
-
-  ngOnInit() {}
-
 }
diff --git a/packages/ext-angular-kitchensink/src/examples/Lists/UndoableAccordionSwiper/UndoableAccordionSwiper.ts b/packages/ext-angular-kitchensink/src/examples/Lists/UndoableAccordionSwiper/UndoableAccordionSwiper.ts
index 7fb2a5de..101d83d8 100644
--- a/packages/ext-angular-kitchensink/src/examples/Lists/UndoableAccordionSwiper/UndoableAccordionSwiper.ts
+++ b/packages/ext-angular-kitchensink/src/examples/Lists/UndoableAccordionSwiper/UndoableAccordionSwiper.ts
@@ -1,6 +1,5 @@
-import {Component, OnInit} from '@angular/core'
-
 declare var Ext: any;
+import { Component } from '@angular/core'
 
 Ext.require([
     'Ext.dataview.listswiper.ListSwiper'
@@ -12,9 +11,7 @@ Ext.require([
   styles: [``]
 })
 
-export class UndoableAccordionSwiperComponent implements OnInit {
-  
-  constructor() {}
+export class UndoableAccordionSwiperComponent {
   
   store = Ext.create('Ext.data.Store', { 
     autoLoad: true,
@@ -57,6 +54,4 @@ export class UndoableAccordionSwiperComponent implements OnInit {
     Ext.toast(`Recover ${record.get('first_name')} ${record.get('last_name')}`)
   }
 
-  ngOnInit() {}
-
 }
diff --git a/packages/ext-angular-kitchensink/src/examples/Lists/UndoableStepSwiper/UndoableStepSwiper.ts b/packages/ext-angular-kitchensink/src/examples/Lists/UndoableStepSwiper/UndoableStepSwiper.ts
index 4388de99..ae13483e 100644
--- a/packages/ext-angular-kitchensink/src/examples/Lists/UndoableStepSwiper/UndoableStepSwiper.ts
+++ b/packages/ext-angular-kitchensink/src/examples/Lists/UndoableStepSwiper/UndoableStepSwiper.ts
@@ -1,6 +1,5 @@
-import {Component, OnInit} from '@angular/core'
-
 declare var Ext: any;
+import { Component } from '@angular/core'
 
 Ext.require([
     'Ext.dataview.listswiper.ListSwiper',
@@ -12,9 +11,8 @@ Ext.require([
   templateUrl: "./UndoableStepSwiper.html",
   styles: [``]
 })
-export class UndoableStepSwiperComponent implements OnInit  {
+export class UndoableStepSwiperComponent {
 
-  constructor() { }
   store = Ext.create('Ext.data.Store', { 
     autoLoad: true,
     proxy: {
@@ -58,8 +56,6 @@ export class UndoableStepSwiperComponent implements OnInit  {
 
   onUndoDeleteItem = (list, {record}) => {
     Ext.toast(`Recover ${record.get('first_name')} ${record.get('last_name')}`)
-  }    
-
-  ngOnInit() {}
+  }
 
 }
diff --git a/packages/ext-angular-kitchensink/src/examples/Panels/AdvancedDate/AdvancedDate.ts b/packages/ext-angular-kitchensink/src/examples/Panels/AdvancedDate/AdvancedDate.ts
index 54f512a7..96daa414 100644
--- a/packages/ext-angular-kitchensink/src/examples/Panels/AdvancedDate/AdvancedDate.ts
+++ b/packages/ext-angular-kitchensink/src/examples/Panels/AdvancedDate/AdvancedDate.ts
@@ -1,6 +1,5 @@
-import {Component, OnInit} from '@angular/core';
-
 declare var Ext: any;
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'advanced-date-panel-component',
@@ -8,9 +7,7 @@ declare var Ext: any;
   styles: [``]
 })
 
-export class AdvancedDatePanelComponent implements OnInit  {
-
-  constructor() { }
+export class AdvancedDatePanelComponent  {
 
   isPhone:boolean = Ext.os.is.Phone;
 
@@ -26,6 +23,4 @@ export class AdvancedDatePanelComponent implements OnInit  {
     new Date(new Date().getFullYear(), 2, 16)
   ];
 
-  ngOnInit() {}
-
 }
diff --git a/packages/ext-angular-kitchensink/src/examples/Panels/Basic/Basic.ts b/packages/ext-angular-kitchensink/src/examples/Panels/Basic/Basic.ts
index e50aa2c8..15ac1f1c 100644
--- a/packages/ext-angular-kitchensink/src/examples/Panels/Basic/Basic.ts
+++ b/packages/ext-angular-kitchensink/src/examples/Panels/Basic/Basic.ts
@@ -11,8 +11,6 @@ declare var Ext: any;
 
 export class BasicPanelComponent implements OnInit  {
 
-  constructor() { }
-
   isPhone:boolean = Ext.os.is.Phone;
   text:any;
 
diff --git a/packages/ext-angular-kitchensink/src/examples/Panels/BasicDate/BasicDate.ts b/packages/ext-angular-kitchensink/src/examples/Panels/BasicDate/BasicDate.ts
index 9ceb7438..6f8ca49e 100644
--- a/packages/ext-angular-kitchensink/src/examples/Panels/BasicDate/BasicDate.ts
+++ b/packages/ext-angular-kitchensink/src/examples/Panels/BasicDate/BasicDate.ts
@@ -1,6 +1,5 @@
-import {Component, OnInit} from '@angular/core';
-
 declare var Ext: any;
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'basic-date-panel-component',
@@ -8,12 +7,8 @@ declare var Ext: any;
   styles: [``]
 })
 
-export class BasicDatePanelComponent implements OnInit  {
-
-  constructor() { }
+export class BasicDatePanelComponent {
 
   isPhone:boolean = Ext.os.is.Phone;
 
-  ngOnInit() {}
-
 }
diff --git a/packages/ext-angular-kitchensink/src/examples/Panels/Collapsible/Collapsible.ts b/packages/ext-angular-kitchensink/src/examples/Panels/Collapsible/Collapsible.ts
index 1eb5d39a..032640c1 100644
--- a/packages/ext-angular-kitchensink/src/examples/Panels/Collapsible/Collapsible.ts
+++ b/packages/ext-angular-kitchensink/src/examples/Panels/Collapsible/Collapsible.ts
@@ -1,7 +1,6 @@
-import {Component, OnInit} from '@angular/core'
-import {mediumText} from '../../dummy';
-
 declare var Ext: any;
+import { Component } from '@angular/core'
+import {mediumText} from '../../dummy';
 
 @Component({
   selector: 'collapsible-panel-component',
@@ -9,13 +8,9 @@ declare var Ext: any;
   styles: [``]
 })
 
-export class CollapsiblePanelComponent implements OnInit  {
-
-  constructor() { }
+export class CollapsiblePanelComponent {
 
   isPhone:boolean = Ext.os.is.Phone;
   mediumText = mediumText;
 
-  ngOnInit() {}
-
 }
diff --git a/packages/ext-angular-kitchensink/src/examples/Panels/TimePanel/Time.ts b/packages/ext-angular-kitchensink/src/examples/Panels/TimePanel/Time.ts
index 9deb142b..eb4fc1af 100644
--- a/packages/ext-angular-kitchensink/src/examples/Panels/TimePanel/Time.ts
+++ b/packages/ext-angular-kitchensink/src/examples/Panels/TimePanel/Time.ts
@@ -1,6 +1,5 @@
-import {Component, OnInit} from '@angular/core'
-
 declare var Ext: any;
+import { Component } from '@angular/core'
 
 @Component({
   selector: 'time-panel-component',
@@ -8,12 +7,8 @@ declare var Ext: any;
   styles: [``]
 })
 
-export class TimePanelComponent implements OnInit  {
-
-  constructor() { }
+export class TimePanelComponent {
 
   isPhone:boolean = Ext.os.is.Phone;
 
-  ngOnInit() {}
-
 }
diff --git a/packages/ext-angular-kitchensink/src/examples/ProgressBar/ProgressBar.ts b/packages/ext-angular-kitchensink/src/examples/ProgressBar/ProgressBar.ts
index 3ea0034f..d5919c6a 100644
--- a/packages/ext-angular-kitchensink/src/examples/ProgressBar/ProgressBar.ts
+++ b/packages/ext-angular-kitchensink/src/examples/ProgressBar/ProgressBar.ts
@@ -1,6 +1,5 @@
-import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
-
 declare var Ext: any;
+import { Component, OnInit } from '@angular/core';
 
 @Component({
   selector: 'porgressbar-component',
@@ -14,8 +13,6 @@ export class ProgressBarComponent implements OnInit {
   progressText:string;
   updateLoop;
 
-  constructor() { }
-
   ngOnInit() {
     this.progressText = "1%";
     this.updateLoop = setInterval(() => { 
diff --git a/packages/ext-angular-kitchensink/src/examples/Ripple/Ripple.ts b/packages/ext-angular-kitchensink/src/examples/Ripple/Ripple.ts
index a0510203..0f25d123 100644
--- a/packages/ext-angular-kitchensink/src/examples/Ripple/Ripple.ts
+++ b/packages/ext-angular-kitchensink/src/examples/Ripple/Ripple.ts
@@ -1,6 +1,5 @@
-import {Component, OnInit, ViewEncapsulation} from '@angular/core'
-
 declare var Ext: any;
+import { Component, ViewEncapsulation } from '@angular/core'
 
 @Component({
   selector: 'ripple-component',
@@ -20,14 +19,10 @@ declare var Ext: any;
   `],
   encapsulation: ViewEncapsulation.None
 })
-export class RippleComponent implements OnInit  {
-
-  constructor() { }
+export class RippleComponent {
 
   clickHandler = (event) => {
     Ext.get(event.target).ripple(event, {})
   }
 
-  ngOnInit() {}
-
 }
diff --git a/packages/ext-angular-kitchensink/src/examples/Tabs/BottomTab/BottomTab.ts b/packages/ext-angular-kitchensink/src/examples/Tabs/BottomTab/BottomTab.ts
index 464fdc9d..b6630c73 100644
--- a/packages/ext-angular-kitchensink/src/examples/Tabs/BottomTab/BottomTab.ts
+++ b/packages/ext-angular-kitchensink/src/examples/Tabs/BottomTab/BottomTab.ts
@@ -1,16 +1,13 @@
-import {Component, OnInit} from '@angular/core'
-
 declare var Ext: any;
+import { Component } from '@angular/core'
+
+
 
 @Component({
   selector: 'bottomtab-component',
   templateUrl: "./BottomTab.html",
   styles: [``]
 })
-export class BottomTabComponent implements OnInit  {
-
-  constructor() { }
-
-  ngOnInit() {}
+export class BottomTabComponent {
 
 }
diff --git a/packages/ext-angular-kitchensink/src/examples/Tabs/DesktopTab/DesktopTab.ts b/packages/ext-angular-kitchensink/src/examples/Tabs/DesktopTab/DesktopTab.ts
index 5638b7ab..5a6ca5a1 100644
--- a/packages/ext-angular-kitchensink/src/examples/Tabs/DesktopTab/DesktopTab.ts
+++ b/packages/ext-angular-kitchensink/src/examples/Tabs/DesktopTab/DesktopTab.ts
@@ -1,16 +1,10 @@
-import {Component, OnInit} from '@angular/core'
-
 declare var Ext: any;
+import { Component } from '@angular/core'
 
 @Component({
   selector: 'desktoptab-component',
   templateUrl: "./DesktopTab.html",
   styles: [``]
 })
-export class DesktopTabComponent implements OnInit  {
-
-  constructor() { }
-
-  ngOnInit() {}
-
+export class DesktopTabComponent {
 }
diff --git a/packages/ext-angular-kitchensink/src/examples/Tabs/IconTab/IconTab.ts b/packages/ext-angular-kitchensink/src/examples/Tabs/IconTab/IconTab.ts
index 9a66b853..448208ec 100644
--- a/packages/ext-angular-kitchensink/src/examples/Tabs/IconTab/IconTab.ts
+++ b/packages/ext-angular-kitchensink/src/examples/Tabs/IconTab/IconTab.ts
@@ -1,6 +1,5 @@
-import {Component, OnInit, ViewEncapsulation} from '@angular/core'
-
 declare var Ext: any;
+import {Component, ViewEncapsulation} from '@angular/core'
 
 @Component({
   selector: 'icontab-component',
@@ -38,9 +37,7 @@ declare var Ext: any;
 
   `]
 })
-export class IconTabComponent implements OnInit  {
-
-  constructor() { }
+export class IconTabComponent {
 
   iconItems = [{
     xtype: 'container',
@@ -48,6 +45,4 @@ export class IconTabComponent implements OnInit  {
     html: '!!!!!!!!!!!!!!!!!!!!!'
   }]
 
-  ngOnInit() {}
-
 }
diff --git a/packages/ext-angular-kitchensink/src/examples/Tabs/TabBar/TabBar.ts b/packages/ext-angular-kitchensink/src/examples/Tabs/TabBar/TabBar.ts
index 387e480e..2be06638 100644
--- a/packages/ext-angular-kitchensink/src/examples/Tabs/TabBar/TabBar.ts
+++ b/packages/ext-angular-kitchensink/src/examples/Tabs/TabBar/TabBar.ts
@@ -1,15 +1,12 @@
-import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
-
 declare var Ext: any;
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'tabbar-component',
   templateUrl: './TabBar.html',
   styles: [``]
 })
-export class TabBarComponent implements OnInit {
-
-  constructor() { }
+export class TabBarComponent {
 
   activeTab:string = 'info';
 
@@ -17,8 +14,4 @@ export class TabBarComponent implements OnInit {
     this.activeTab = value.getItemId();
   }
 
-  ngOnInit() {
-  }
-
-
 }
\ No newline at end of file
diff --git a/packages/ext-angular-kitchensink/src/examples/ToolBar/ToolBar.ts b/packages/ext-angular-kitchensink/src/examples/ToolBar/ToolBar.ts
index 24e1ac7f..83f370b3 100644
--- a/packages/ext-angular-kitchensink/src/examples/ToolBar/ToolBar.ts
+++ b/packages/ext-angular-kitchensink/src/examples/ToolBar/ToolBar.ts
@@ -1,32 +1,22 @@
-import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
-
 declare var Ext: any;
+import { Component} from '@angular/core';
 
 @Component({
   selector: 'toolbar-component',
   templateUrl: './ToolBar.html',
   styles: [``]
 })
-export class ToolBarComponent implements OnInit {
+export class ToolBarComponent {
 
   message= 'Option 1 selected';
   optionButton= '';
   isPhone = Ext.os.is.Phone;
 
-  constructor() { }
-
   buttonHandler = function(event) {
     console.log("Got event :" + event);
     //debugger;
     this.message = "User clicked \"" + event.button.getText() + "\"";
     this.optionButton = event.button.getValue();
-
-  }
-
-
-
-  ngOnInit() {
   }
 
-
 }
\ No newline at end of file
diff --git a/packages/ext-angular-kitchensink/src/examples/Wizard/Wizard.ts b/packages/ext-angular-kitchensink/src/examples/Wizard/Wizard.ts
index c977b2d7..767e0522 100644
--- a/packages/ext-angular-kitchensink/src/examples/Wizard/Wizard.ts
+++ b/packages/ext-angular-kitchensink/src/examples/Wizard/Wizard.ts
@@ -1,6 +1,5 @@
-import { Component, OnInit, ViewEncapsulation} from '@angular/core';
-
 declare var Ext: any;
+import { Component, OnInit, ViewEncapsulation} from '@angular/core';
 
 @Component({
   selector: 'wizard-component',
@@ -18,9 +17,7 @@ declare var Ext: any;
 `]
 })
 
-export class WizardComponent implements OnInit {
-
-  constructor() { }
+export class WizardComponent {
 
   step:number = 0;
   tapMode = 'item';
@@ -52,6 +49,4 @@ export class WizardComponent implements OnInit {
 
   changeTapMode = (button, value) =>  this.tapMode = value;
 
-  ngOnInit() {}
-  
 }