title: Trying to implement Kendo UI angular 2 Grid Selector Error
body: <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>