Kendo UI for Angular

import { Component } from '@angular/core';

@Component({
 selector: 'my-app',
 template: `
    <kendo-chart
      [title]="chartOptions.title"
      [legend]="chartOptions.legend"
      [seriesDefaults]="chartOptions.seriesDefaults"
      [series]="chartOptions.series"
      [valueAxis]="chartOptions.valueAxis"
      [categoryAxis]="chartOptions.categoryAxis"
      [tooltip]="chartOptions.tooltip">
    </kendo-chart>
  `
})

export class AppComponent {
  public chartOptions = {
    title: {
      text: "Gross domestic product growth /GDP annual %/"
    },
    legend: {
      position: "bottom"
    },
    seriesDefaults: {
      type: "area",
      area: {
        line: {
          style: "smooth"
        }
     }
    },
    series: [{
      name: "India",
      data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855]
    }, {
      name: "World",
      data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727]
    }, {
      name: "Haiti",
      data: [-0.253, 0.362, -3.519, 1.799, 2.252, 3.343, 0.843, 2.877, -5.416, 5.590]
    }],
    valueAxis: {
      labels: {
      format: "{0}%"
     },
     line: {
       visible: false
     },
     axisCrossingValue: -10
    },
    categoryAxis: {
      categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011],
      majorGridLines: {
        visible: false
      },
      labels: {
        rotation: "auto"
      }
    },
    tooltip: {
      visible: true,
      format: "{0}%"
    }
  }
}

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <div class="row">
      <div class="col-6">
        <p>AutoComplete</p>
        <kendo-autocomplete [data]="listItems" [placeholder]="'Your favorite sport'">
        </kendo-autocomplete>
      </div>

      <div class="col-6">
        <p>ComboBox</p>
        <kendo-combobox [data]="listItems" [value]="'Basketball'">
        </kendo-combobox>
      </div>

      <div class="col-6">
        <p>DropDownList</p>
        <kendo-dropdownlist [data]="listItems" [value]="'Basketball'">
        </kendo-dropdownlist>
      </div>

      <div class="col-6">
        <p>MultiSelect</p>
        <kendo-multiselect [data]="listItems" [value]="value" [placeholder]="'Your favorite sports'"></kendo-multiselect>
      </div>
    </div>
  `
})

export class AppComponent {
  public listItems: Array < string > = [
    'Baseball', 'Basketball', 'Cricket', 'Field Hockey',
    'Football', 'Table Tennis', 'Tennis', 'Volleyball'
  ];

  public value = ['Basketball', 'Cricket'];
}