How to get the instance of the Kendogrid in angular2 component
<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>