Our customers enjoy building a good UI for their projects. They rely on Kendo UI to deliver an outstanding development experience along with the most popular JS framework of the modern web – Angular. Kendo UI for Angular is a professionally developed library distributed under a commercial license.

Some of them are not sure how to get started with Kendo UI for Angular. In the post below we detail how you can start using Kendo UI with Angular and include a Chart control:

First Step => Setting up the angular project

The easiest way to start with Angular is to use the Angular CLI Tool. To scaffold your project structure, follow its installation instructions.

npm install -g @angular/cli
ng new my-first-angular-project
cd my-first-angular-project

Second Step => Activate your Trial or commercial License

Starting from December 2020, using any of the UI components from the Kendo UI for Angular library requires either a commercial license key or an active trial license key.

After login in your telerik account Download your Telerik license key Next, save the kendo-ui-license.txt license key file in the project folder.

Install or Update a License Key

• Copy the license key file (kendo-ui-license.txt) to the root folder of your project. Alternatively, copy the contents of the file to the KENDO_UI_LICENSE environment variable.
• Install @progress/kendo-licensing as a project dependency by running npm install --save @progress/kendo-licensing or yarn add @progress/kendo-licensing.
• Run npx kendo-ui-license activate or yarn run kendo-ui-license activate in the console.

Adding the Kendo UI Components

Kendo UI for Angular is distributed as multiple NPM packages scoped to @progress. For example, the name of the Grid package is @progress/kendo-angular-grid. As of the Angular 6 release, Angular CLI introduces the ng add command which provides for a faster and more user-friendly package installation. For more information, refer to the article on using Kendo UI for Angular with Angular CLI.

1. Let’s start and add the Charts package:

Angular CLI supports the addition of packages through the ng add command which executes in one step the set of otherwise individually needed commands.

ng add @progress/kendo-angular-charts

The command installs all necessary packages, sets up the default theme, and imports the component module. The full set of applied changes can be seen by running git diff at any time.

Manual Setup

All components that you reference during the installation will be present in the final bundle of your application. To avoid ending up with components you do not actually need, either:

• Import all Charts components at once by using the ChartsModule, or
• Import a specific Charts component by adding it as an individual NgModule.

Download and install the package.

npm install --save @progress/kendo-angular-charts @progress/kendo-angular-common @progress/kendo-angular-intl @progress/kendo-angular-l10n @progress/kendo-angular-popup @progress/kendo-drawing hammerjs @progress/kendo-licensing

Once installed, import Hammer.js and the NgModule of the components you need.

To get all package components, import the ChartsModule in your [application root]({{ site.data.url.angular[‘ngmodules’] }}#angular-modularity) or feature module in app.module.ts.

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    import { ChartsModule } from '@progress/kendo-angular-charts';
    import { AppComponent } from './app.component';

    import 'hammerjs';

    @NgModule({
        bootstrap:    [AppComponent],
        declarations: [AppComponent],
        imports:      [BrowserModule, BrowserAnimationsModule, ChartsModule]
    })
    export class AppModule {
    }

and Use Chart in app.component.js

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

@Component({
  selector: 'app-root',
  template:'<kendo-chart>
  <kendo-chart-title text="Units sold"></kendo-chart-title>
  <kendo-chart-category-axis>
      <kendo-chart-category-axis-item [categories]="['Q1', 'Q2', 'Q3', 'Q4']">
      </kendo-chart-category-axis-item>
  </kendo-chart-category-axis>
  <kendo-chart-series>
    <kendo-chart-series-item type="bar" [gap]="2" [spacing]=".25" [data]="[100, 123, 234, 343]">
    </kendo-chart-series-item>
    <kendo-chart-series-item type="bar" [data]="[120, 67, 231, 196]">
    </kendo-chart-series-item>
    <kendo-chart-series-item type="bar" [data]="[45, 124, 189, 143]">
    </kendo-chart-series-item>
    <kendo-chart-series-item type="bar" [data]="[87, 154, 210, 215]">
    </kendo-chart-series-item>
  </kendo-chart-series>
</kendo-chart>',
 
})
export class AppComponent {
  title = 'chart-sample';
}

Kendo UI for Angular provides themes that you can use to style your application.

Currently, the suite ships the following themes:

• Kendo UI Default theme—The theme package is available through the @progress/kendo-theme-default NPM module.
• Kendo UI Bootstrap theme—The theme package is available through the @progress/kendo-theme-bootstrap NPM module.
• Kendo UI Material theme—The theme package is available through the @progress/kendo-theme-material NPM module.

Let us know your experience getting started with Kendo UI in Angular…