Getting Started

Kendo UI for Angular 2 is a set of UI components for the
Angular 2 framework, built by the developers of Kendo UI.

In this article

The product is in beta stage. The team is working towards releasing version 1.0 in 2017.

This article and the Kendo UI documentation for Angular 2 assume that you are familiar with the basic concepts of the components and the Angular 2 framework.

Project Setup

The most common approach to set up your Angular 2 project is to use the Angular CLI Tool.

You might also want to use other starter kits such as:

Most Angular 2 tutorials and starter kits use SystemJS or Webpack. Both should work—Kendo UI for Angular 2 is distributed as CommonJS modules with TypeScript typings included.

Using the Angular CLI Tool

Prerequisites

If you choose to use the Angular CLI Tool for setting up your project, you need to have:

Installation

Kendo UI for Angular 2 is packaged and distributed as a set of discrete, scoped NPM packages, which are available at the Progress NPM registry (https://registry.npm.telerik.com/).

  1. Access the Progress NPM registry. To do so, you need an active Telerik account. If you do not have such, create one—it’s free. The packages are scoped to @progress. For example, the name of the Grid package is @progress/kendo-angular-grid.

    • Check the scoped packages section in the NPM documentation for more information about npm scopes and how they work.
    • Note that the Progress NPM registry is designed to work as a scoped registry. This means that if you set it as a main registry by mistake, the access to the official registry (https://registry.npmjs.org/) will be blocked.
  2. Enable the Progress NPM registry on your machine by associating the @progress scope with the registry URL. Run the following command in your terminal:

    
        npm login --registry=https://registry.npm.telerik.com/ --scope=@progress
     
  3. Enter the username (if the username is an email address, use everything before the @) and password you use to log in your Telerik account as NPM will ask you for your Telerik account credentials and an email. The login name will be ignored.

  4. Verify that the code works. If the command has passed successfully, you should be able to install the Kendo UI NPM packages. Verify this by querying the versions of the Grid:

    
         npm view @progress/kendo-angular-grid versions
     

    The output should be something like this (json):

    
         [ '0.1.0' ]
     

Adding the Components

The Kendo UI for Angular 2 components are grouped into several NPM packages, which follow a naming convention of the type @progress/kendo-angular-grid, @progress/kendo-angular-inputs, and so on.

Let’s start simple and add the simplest package—@progress/kendo-angular-buttons.

To add the components to your project, follow the steps below.

If you get stuck with the steps below, refer to repository holding the Angular CLI Tool quickstart project.

  1. Install the angular-cli package with this command:

    
        npm install -g angular-cli
     
  2. Create a new project with enabled SCSS compiler:

    
        ng new kendo-angular2-quickstart-cli --style=scss
     
  3. Go to the root of your project:

    
        cd kendo-angular2-quickstart-cli
     
  4. Execute the following command:

    
        npm install -S @progress/kendo-angular-buttons
     

    After a while, if your NPM login has been correct, the package and its dependencies will be installed in your project.

  5. Import the component directives into your source code.

  6. Change the src/app/app.module.ts to:

    
         import { BrowserModule } from '@angular/platform-browser';
         import { NgModule } from '@angular/core';
         import { FormsModule } from '@angular/forms';
         import { HttpModule } from '@angular/http';
         import { AppComponent } from './app.component';
    
         // Import ButtonsModule
         import { ButtonsModule } from '@progress/kendo-angular-buttons';
    
         @NgModule({
           declarations: [
               AppComponent
             ],
             imports: [
               BrowserModule,
               FormsModule,
               HttpModule,
    
               // And register it
               ButtonsModule
             ],
             providers: [],
             bootstrap: [AppComponent]
         })
         export class AppModule { }
     
  7. Add the HTML for the button in the src/app/app.component.html:

    
         

    <button kendoButton (click)="onButtonClick()" [primary]="true"> My Kendo UI Button </button>
  8. Change the app.component.ts:

    
        import { 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!';
          }
        }
     
  9. Run the application in the browser:

    
        ng serve
     

Adding the Styles

To add the Kendo UI default theme to your Angular 2 project, follow the steps below.

  1. Install the theme with the following command (run in the root of the project):

    
        npm install -S @telerik/kendo-theme-default
     
  2. Import the SCSS file that ships with the theme package in your styles.scss:

    
        /* You can add global styles to this file, and also import other style files */
        @import "~@telerik/kendo-theme-default/styles/packages/all";
     
  3. With the stylesheet in place, you should see something like this:

    getting-started.png

  4. The button is fully functional and looks splendid! This final step concludes the getting-started walk-through.

Next Steps

An orange button, while pretty, is not something that you will write home about. We are sure that you are looking for more—browse the components section and discover the amazing features that Kendo UI for Angular 2 brings to the table.

Happy coding!