Trying to implement Kendo UI angular 2 Grid Selector Error
<p>I am trying to create a demo application using Kendo, which I was able to do using Kendo UI. Now I got a requirement to try the same using Angular 2 Kendo UI. However I was stuck by following error.</p>

<p>My component code goes like this. Same as in sample code from the Kendo UI.</p>

<pre><code>import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
        &lt;kendo-grid [data]="gridData"&gt;
            &lt;kendo-grid-column field="ProductID" title="Product ID" width="120"&gt;
            &lt;/kendo-grid-column&gt;
            &lt;kendo-grid-column field="ProductName" title="Product Name"&gt;
            &lt;/kendo-grid-column&gt;
            &lt;kendo-grid-column field="UnitPrice" title="Unit Price" width="230"&gt;
            &lt;/kendo-grid-column&gt;
            &lt;kendo-grid-column field="Discontinued" width="120"&gt;
                &lt;template kendoCellTemplate let-dataItem&gt;
                    &lt;input type="checkbox" [checked]="dataItem.Discontinued" disabled/&gt;
                &lt;/template&gt;
            &lt;/kendo-grid-column&gt;
        &lt;/kendo-grid&gt;
    `
})
export class GridComponent {

    private gridData: any[] = [{
        "ProductID": 1,
        "ProductName": "Chai",
        "UnitPrice": 18.0000,
        "Discontinued": true
    }, {
        "ProductID": 2,
        "ProductName": "Chang",
        "UnitPrice": 19.0000,
        "Discontinued": false
    }, {
        "ProductID": 3,
        "ProductName": "Aniseed Syrup",
        "UnitPrice": 10.0000,
        "Discontinued": false
    }, {
        "ProductID": 4,
        "ProductName": "Chef Anton's Cajun Seasoning",
        "UnitPrice": 22.0000,
        "Discontinued": false
    }, {
        "ProductID": 5,
        "ProductName": "Chef Anton's Gumbo Mix",
        "UnitPrice": 21.3500,
        "Discontinued": false
    }, {
        "ProductID": 6,
        "ProductName": "Grandma's Boysenberry Spread",
        "UnitPrice": 25.0000,
        "Discontinued": false
    }];
}
</code></pre>

<p>I have a common module class with following details</p>

<pre><code>import { NgModule } from '@angular/core';
import { CommonModule }  from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { BookDetailComponent } from './distribution-detail/distribution-detail.component';
import { GridComponent } from './detail-grid/detail-grid.component';
import { GridModule } from '@progress/kendo-angular-grid';


@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        SharedModule,
        HttpModule,
        GridModule
    ],
    declarations: [
        BookDetailComponent,
        GridComponent
    ],
    providers: [
        DistributionService
    ]
})

export class DistributionModule { }
</code></pre>

<p>And the Grid Module selector is used in BookDetailComponent HTML code,</p>

<pre><code>&lt;my-app&gt;Loading&lt;/my-app&gt;
</code></pre>

<p>However I get the error </p>

<p>core.umd.js:2837 EXCEPTION: Uncaught (in promise): Error: Template parse errors:
'grid-demo' is not a known element:
1. If 'my-app' is an Angular component, then verify that it is part of this module.</p>