Get Started with Kendo UI for Angular

The Kendo UI for Angular Bootstrap theme is part of the Kendo UI for Angular library of UI components. It is distributed through NPM under the kendo-theme-bootstrap package.

Do You Prefer Video?

You can read about how to setup an Angular project in the tutorial below. If you prefer watching how the steps are executed, you can refer to the Angular video tutorial that show how to get started.

Setting Up the Angular Project

The latest versions of the Kendo UI for Angular packages target the latest Angular long-term support versions (currently, v6.x) all through the latest official version (currently, v8.x).

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

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

The source code for the complete sample project is available on GitHub at telerik/kendo-angular-quickstart-cli.

Activate Your Trial or Commercial License

Kendo UI for Angular is a professionally developed library distributed under a 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.

Follow the instructions on the Kendo UI for Angular My License page to activate your license. Save the kendo-ui-license.txt license key file in the project folder.

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 simple and add the Buttons package:

   Copy Codeng add @progress/kendo-angular-buttons

   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.

2. Add the HTML for the button in src/app/app.component.html:

   Copy Code<h1>{{title}}</h1>
   
   <button kendoButton (click)="onButtonClick()" [primary]="true">My Kendo UI Button</button>

3. Add the Button click event handler to app.component.ts:

   Copy Codeimport { Component } from '@angular/core';
   
   @Component({
       selector: 'app-root',
       templateUrl: './app.component.html',
       styleUrls: ['./app.component.scss']
   })
   export class AppComponent {
       title = 'Hello World!';
   
       onButtonClick() {
           this.title = 'Hello from Kendo UI!';
       }
   }

4. Run the application in the browser by using the ng serve Angular CLI command.

   

The Button is fully functional and looks splendid! This final step concludes the getting-started walkthrough.