Get Started

Kendo UI for Angular 2 is a set of native Angular 2 UI components, packaged and distributed as discrete, scoped NPM packages.

In this article

To install Kendo UI for Angular 2, you need to have an active trial or licensed commercial version of Kendo UI. Your Telerik account will be used for authentication.

Register for a trial I have an active trial or commercial license


Set Up the Angular 2 Project

The easiest way to start with Angular 2 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-angular2-project --style=scss;
cd my-first-angular2-project;

Don't worry about the --style=scss parameter for now, we will get to it later.

Add the Progress NPM Registry

Kendo UI for Angular 2 is distributed as multiple NPM packages, published at the Progress NPM registry. The packages are scoped to @progress. For example, the name of the Grid package is @progress/kendo-angular-grid.

To associate the Progress NPM registry with the @progress scope, run the following command:

npm login --registry=https://registry.npm.telerik.com/ --scope=@progress

The Progress NPM registry works only as a scoped registry. If you set it as a main registry by mistake, the access to the official NPM registry (https://registry.npmjs.org/) will be blocked. You won't be able to install the regular public NPM packages. Check the scoped packages section for more information about how npm scopes work.

NPM will ask you for your Telerik account credentials and an email. Enter the username (if the username is an email address, use everything before the @) and the password you use to log in your Telerik account. The login name will be ignored.

If you create a new account, you will need to activate it before logging in. Check your e-mail for an activation link.

If you use a social account to log in, make sure you complete your profile to obtain a password.

If the command does not show you any errors, you can access 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' ]

Add a Kendo UI Package to Your Project

Let's start simple and add the Buttons package:

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

Next, import the component directives into your source code. Change the code in 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 the 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 { }

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

<h1>{{title}}</h1>

<button kendoButton (click)="onButtonClick()" [primary]="true">My Kendo UI Button</button>

Add the button click event handler to 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!';
    }
}

We are done! Run the application in the browser with the following Angular CLI command:

ng serve

The button should be visible, but it looks plain. Let's add the theme.

Add the Styles

The Kendo UI for Angular 2 theme is distributed as a separate NPM package - @progress/kendo-theme-default. Install it just like the buttons package:

npm install -S @progress/kendo-theme-default

Import the SCSS file from the package in src/styles.scss:

/* You can add global styles to this file, and also import other style files */

@import "~@progress/kendo-theme-default/scss/all";

With the stylesheet in place, you should see something like this in the browser:

getting-started.png

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!