title: Cannot get "Kendo UI for Angular 2" components to work
body: <p>I'm attempting to build a demo application that utilizes the "Kendo UI for Angular 2" controls, but I can only seem to get the Button control to work. All of the other controls either display wrong or do not display at all. I could really use some help so I can figure out if the product is worth the cost for a new long-term project we are starting up.</p>
  
  <p>In the example below, I'm using Angular 2 to display their button and a dropdown list. Only the button works. Please help me get this sample working. I've spent way too long trying to figure this out.
  Thanks!</p>
  
  <p><strong>package.json (truncated for brevity)</strong></p>
  
  <pre><code>"dependencies": {
     ...
     "@progress/kendo-angular-buttons": "^0.10.2",
     "@progress/kendo-angular-dropdowns": "^0.10.2",
     ...
  </code></pre>
  
  <p><strong>systemjs.config.js (truncated for brevity)</strong></p>
  
  <pre><code>map: {
    app: 'app',
    'rxjs': 'npm:rxjs',
    '@progress': 'npm:@progress',
    '@telerik': 'npm:@telerik',
    ...
  },
  packages: {
    "@progress/kendo-angular-dropdowns": { main: './dist/npm/js/main.js', defaultExtension: 'js' },
    "@progress/kendo-angular-buttons": { main: './dist/npm/js/main.js', defaultExtension: 'js' },    
    '@telerik/kendo-dropdowns-common': { main: './dist/npm/js/main.js', defaultExtension: 'js' },
    ...
  }
  </code></pre>
  
  <p><strong>app.module.ts</strong></p>
  
  <pre><code>// Application
  import { AppComponent }  from './app.component';
  
  // Misc Modules
  import { BrowserModule } from '@angular/platform-browser';
  import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  import { HttpModule } from '@angular/http';
  import { NgModule } from '@angular/core';
  
  // Kendo Controls
  import { ButtonsModule } from '@progress/kendo-angular-buttons';
  import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
  
  // Test Pages
  import { KButtonComponent } from './components/k.button.component'
  import { KDropDownListComponent } from './components/k.dropdownlist.component'
  
  @NgModule({
      imports: [
          BrowserModule, FormsModule, ReactiveFormsModule, HttpModule, ButtonsModule, DropDownsModule ],
      declarations: [ AppComponent, KButtonComponent, KDropDownListComponent ],
      providers: [],
      bootstrap: [ AppComponent ]
  })
  
  export class AppModule { }
  </code></pre>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code>            import { Component } from '@angular/core';
  
              // Kendo Controls
              import { ButtonsModule } from '@progress/kendo-angular-buttons';
              import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
  
  import { Component } from '@angular/core';
  
  @Component({
      selector: 'my-app',
      template: `
          &lt;button kendoButton (click)="onButtonClick()" [primary]=true&gt;Button!&lt;/button&gt; This works!
          &lt;kendo-dropdownlist [data]="listItems"&gt;&lt;/kendo-dropdownlist&gt; This doesn't even display.
      `,
      styleUrls: [ '../node_modules/@progress/kendo-angular-buttons/dist/npm/css/main.css', '../node_modules/@progress/kendo-angular-dropdowns/dist/npm/css/main.css' ]
  })
  
  export class AppComponent {
     listItems: Array&lt;string&gt; = ['This', 'is', 'really', 'upsetting'];
  
     onButtonClick() {
          alert('The only working Kendo component');
      }
  }
  </code></pre>