Update to RC6

README.md

@@ -9,19 +9,31 @@ The sources for this package are in (https://github.com/vimalavinisha/angular2-g
       npm install angular2-google-chart
     bower install
       bower install google-chart
-###1.In index.html page include following script 
+###1. In index.html page include following script:
       <script src="https://www.gstatic.com/charts/loader.js"></script>
       <script>  
       !important: You want to give this variable(var googleLoaded = false;). This is used to run multiple chart in your jade.
         var googleLoaded = false;
         </script>
-###2.component file use like below
+###2. In app.module, import the included Angular2GoogleChartModule:
+      import { NgModule }       from '@angular/core';
+      import { BrowserModule  } from '@angular/platform-browser';
+      import { Angular2GoogleChartModule } from 'angular2-google-chart/angular2-google-chart';
+
+      import { AppComponent }   from './app.component';
+
+      @NgModule({
+          declarations: [AppComponent],
+          imports:      [BrowserModule, Angular2GoogleChartModule],
+          bootstrap:    [AppComponent]
+      })
+      export class AppModule {}
+
+###3. In your component file use like so:
       import {Component} from '@angular/core';
-      import {GoogleChart} from './directives/angular2-google-chart.directive';
-
+
        @Component({
            selector : 'my-app',
-           directives: [GoogleChart],
            template:  `
            <div id="line_chart",[chartData]="line_ChartData", [chartOptions] = "line_ChartOptions",chartType="LineChart",GoogleChart/>
            <div id="bubble_chart",[chartData]="bubble_ChartData", [chartOptions] = "bubble_ChartOptions",chartType="BubbleChart",GoogleChart/>
@@ -145,5 +157,5 @@ The sources for this package are in (https://github.com/vimalavinisha/angular2-g
              height: 500
            };
        }
-###3 Example Charts
+###4. Example Charts:
       <img src="../app/assets/images/google-charts-output.png">

angular2-google-chart.ts

@@ -0,0 +1,9 @@
+import { NgModule }       from '@angular/core';
+import { BrowserModule  } from '@angular/platform-browser';
+import { GoogleChart }    from './directives/angular2-google-chart.directive';
+
+@NgModule({
+    declarations: [GoogleChart],
+    exports:      [GoogleChart]
+})
+export class Angular2GoogleChartModule {}

example/app.component.ts

@@ -1,12 +1,11 @@
-/* 
+/*
  * @author Vimala A
  */
 
 import {Component} from '@angular/core';
-import {GoogleChart} from '../directives/angular2-google-chart.directive';
+
 @Component({
     selector : 'my-app',
-    directives: [GoogleChart],
     template:  `
     <h2>  Gaugh Chart</h2>
     <div id="gauge_chart" [chartData]="gauge_ChartData" [chartOptions]= "gauge_ChartOptions" chartType="Gauge" GoogleChart></div>
@@ -19,13 +18,13 @@ import {GoogleChart} from '../directives/angular2-google-chart.directive';
     <h2>  Scatter Chart</h2>
     <div id="scatter_chart" [chartData]="scatter_ChartData"  [chartOptions] = "scatter_ChartOptions" chartType="ScatterChart" GoogleChart></div>
     <h2>  CandlestickChart</h2>
-    <div id="candle_chart" [chartData]="candle_ChartData" [chartOptions] = "candle_ChartOptions" chartType="CandlestickChart" GoogleChart></div>    
+    <div id="candle_chart" [chartData]="candle_ChartData" [chartOptions] = "candle_ChartOptions" chartType="CandlestickChart" GoogleChart></div>
     <h2>  Pie Chart</h2>
-    <div id="pie_chart" [chartData]="pie_ChartData" [chartOptions] = "pie_ChartOptions" chartType="PieChart" GoogleChart></div> 
+    <div id="pie_chart" [chartData]="pie_ChartData" [chartOptions] = "pie_ChartOptions" chartType="PieChart" GoogleChart></div>
     <h2>  Bar Chart</h2>
     <div id="bar_chart" [chartData]="bar_ChartData" [chartOptions] = "bar_ChartOptions" chartType="BarChart" GoogleChart></div>
-	
-	`    
+
+	`
 })
 export class AppComponent {
    public line_ChartData = [

example/app.module.ts

@@ -1,10 +1,12 @@
 import { NgModule }       from '@angular/core';
 import { BrowserModule  } from '@angular/platform-browser';
+import { Angular2GoogleChartModule } from '../angular2-google-chart';
+
 import { AppComponent }   from './app.component';
 
 @NgModule({
     declarations: [AppComponent],
-    imports:      [BrowserModule],
-    bootstrap:    [AppComponent],
+    imports:      [BrowserModule, Angular2GoogleChartModule],
+    bootstrap:    [AppComponent]
 })
 export class AppModule {}

package.json

@@ -1,18 +1,18 @@
 {
   "name": "angular2-google-chart",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "google chart directive for angular2",
   "main": "index.js",
   "dependencies": {
-    "@angular/common": "^2.0.0-rc.5",
-    "@angular/compiler": "^2.0.0-rc.5",
-    "@angular/core": "^2.0.0-rc.5",
-    "@angular/platform-browser": "^2.0.0-rc.5",
-    "@angular/platform-browser-dynamic": "^2.0.0-rc.5",
-    "@angular/upgrade": "^2.0.0-rc.5",
+    "@angular/common": "^2.0.0-rc.6",
+    "@angular/compiler": "^2.0.0-rc.6",
+    "@angular/core": "^2.0.0-rc.6",
+    "@angular/platform-browser": "^2.0.0-rc.6",
+    "@angular/platform-browser-dynamic": "^2.0.0-rc.6",
+    "@angular/upgrade": "^2.0.0-rc.6",
     "core-js": "^2.4.0",
     "reflect-metadata": "^0.1.3",
-    "rxjs": "5.0.0-beta.6",
+    "rxjs": "5.0.0-beta.11",
     "systemjs": "0.19.27",
     "zone.js": "^0.6.17"
   },

systemjs.config.js

@@ -9,13 +9,13 @@
 //    'httpresource':               'node_modules/httpresource',
     '@angular':                   'node_modules/@angular',
     'rxjs':                       'node_modules/rxjs',
-    'directives' : 'directives/'
+    'angular2-google-chart':      './'
   };
   // packages tells the System loader how to load when no filename and/or no extension
   var packages = {
     'app':                        { main: 'main.js',  defaultExtension: 'js' },
     'rxjs':                       { defaultExtension: 'js' },
-    'directives':{ defaultExtension: 'js' } 
+    'angular2-google-chart':      { defaultExtension: 'js' } 
   };
   var ngPackageNames = [
     'common',