title: How to get the instance of the Kendogrid in angular2 component
body: <p>How to get the instance of the Kendogrid</p>
  
  <p>I tried to create a sample application for loading kendogrid wrapped in a angular2 component. When I try to run the application I am getting the exception in the chrome browser like below.</p>
  
  <pre><code>zone.js@0.6.12?main=browser:323 Error: SyntaxError: Unexpected identifier
      at Object.eval (http://localhost:57768/appScripts/boot.js:3:17)
      at eval (http://localhost:57768/appScripts/boot.js:17:4)
      at eval (http://localhost:57768/appScripts/boot.js:18:3)
  Evaluating http://localhost:57768/angular2/platform/browser
  Evaluating http://localhost:57768/appScripts/boot.js
  Error loading http://localhost:57768/appScripts/boot.js
  </code></pre>
  
  <p>Looks like I am facing the problem of not getting the instance of the kendo grid element not getting injected into the grid component given below</p>
  
  <p>The following code I have in the Index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;Angular 2 with ASP.NET 5&lt;/title&gt;
      &lt;link href="libs/css/bootstrap.css" rel="stylesheet" /&gt;
  
      &lt;!-- 1. Load libraries --&gt;
      &lt;!-- Polyfill(s) for older browsers --&gt;
      &lt;script src="https://npmcdn.com/es6-shim@0.35.0/es6-shim.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://npmcdn.com/zone.js@0.6.12?main=browser"&gt;&lt;/script&gt;
      &lt;script src="https://npmcdn.com/reflect-metadata@0.1.3"&gt;&lt;/script&gt;
      &lt;script src="https://npmcdn.com/systemjs@0.19.27/dist/system.src.js"&gt;&lt;/script&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"&gt;&lt;/script&gt;
      &lt;link href="http://cdn.kendostatic.com/2015.3.1111/styles/kendo.common.min.css" rel="stylesheet" type="text/css" /&gt;
      &lt;link href="http://cdn.kendostatic.com/2015.3.1111/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" /&gt;
      &lt;link href="http://cdn.kendostatic.com/2015.3.1111/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" /&gt;
      &lt;link href="http://cdn.kendostatic.com/2015.3.1111/styles/kendo.default.min.css" rel="stylesheet" type="text/css" /&gt;
      &lt;link href="http://cdn.kendostatic.com/2015.3.1111/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" /&gt;
  
      &lt;script src="http://cdn.kendostatic.com/2015.3.1111/js/jszip.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://cdn.kendostatic.com/2015.3.1111/js/kendo.all.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://cdn.kendostatic.com/2015.3.1111/js/kendo.aspnetmvc.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- 2. Configure SystemJS --&gt;
      &lt;script&gt;
          System.config({
              transpiler: 'typescript',
              typescriptOptions: { emitDecoratorMetadata: true },
              packages: {
                  appScripts: {
                      defaultExtension: 'js'
                  }
              }
          });
      &lt;/script&gt;
      &lt;script&gt;
  
          System.import('appScripts/boot')
                .then(null, console.error.bind(console));
      &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h2&gt;Demo of Angular 2 using ASP.NET 5 with Visual Studio 2015&lt;/h2&gt;
      &lt;!--&lt;my-app&gt;Loading...&lt;/my-app&gt;--&gt;
      &lt;kendo-grid&gt;Loading Kendo&lt;/kendo-grid&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Code in my boot.ts</p>
  
  <pre><code>///&lt;reference path="../node_modules/angular2/typings/browser.d.ts"/&gt;
  import {bootstrap} from 'angular2/platform/browser'
  import { HTTP_PROVIDERS, Http, Headers, Response, JSONP_PROVIDERS, Jsonp } from 'angular2/http';
  import {Kendogrid} from './Kendogrid';
  
  bootstrap(Kendogrid, [HTTP_PROVIDERS])
      .catch(err =&gt; console.error(err));
  </code></pre>
  
  <p>The Following code I have for the Grid which I am referring in the Kendogrid component</p>
  
  <pre><code>import { Component, Input, Host, ElementRef, AfterViewInit, ViewChild } from 'angular2/core';
  
  declare var $: any;
  
  @Component({
      selector: 'k-grid',
      template: '&lt;div&gt;&lt;/div&gt;'
  })
  export class Grid implements AfterViewInit {
  
      constructor( @Host() private elm: ElementRef) {
          console.log("in constructor of Grid");
      }
  
      @Input() options: any;
  
      ngAfterViewInit() {
          console.log("in ngAfterViewInit of Grid");
          $(this.elm.nativeElement).children().first().kendoGrid(this.options);
      }
  }
  </code></pre>
  
  <p>The following code I am having to create the kendo-angular2 component</p>
  
  <pre><code>import {Component } from 'angular2/core';
  import { Grid } from './grid';
  import { Location } from 'angular2/router';
  
  declare var kendo: any;
  
  @Component({
      selector: 'kendo-grid',
      templateUrl: 'kendogrid.html',
      directives: [Grid]
  })
  export class Kendogrid {
  
      info = "Willkommen";
      options: any;
  
      constructor() {
          console.log("in constructor of Kendogrid");
          this.setUpGridOptions();
      }
  
      private setUpGridOptions() {
          var dataSource = new kendo.data.DataSource({
              transport: {
                  read: "http://restcountries.eu/rest/v1/region/oceania"
              },
              error: function (e) {
                  // handle data operation error
                  alert("Status: " + e.status + "; Error message: " + e.errorThrown);
              },
              pageSize: 5,
              serverPaging: true,
              serverFiltering: true,
              serverSorting: true,
              batch: false,
              schema: {
                  model: {
                      name: "name",
                      fields: {
                          name: { editable: false, nullable: true },
                          capital: {},
                          region: {},
                          subregion: {}
                      }
                  }
              }
  
          });
  
          this.options = {
              dataSource: dataSource,
              columns: [
                  { field: "name", title: "name", width: "40px" },
                  { field: "capital", title: "capital", width: "200px" },
                  { field: "region", title: "region", width: "120px" },
                  { field: "subregion", title: "subregion", width: "120px" },
              ],
              pageable: true,
              groupable: true,
              sortable: true,
              selectable: true
          }
      }
  
  }
  </code></pre>