Get Started

In this article

Setting Up the Angular Project

The latest version of the packages target Angular 4.x. If your application targets Angular 2.x, refer to telerik/kendo-angular#469.
If your project is based on the Angular Quickstart, refer to the article on how to use Kendo UI for Angular with SystemJS.

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

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

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

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

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 UI package installation. For more information, refer to the article on [using with Angular CLI](/kendo-angular-ui/components/installation/angular-cli/). The following installation process, however, is still valid.

Let's start simple and add the Buttons package:

npm install --save @progress/kendo-angular-buttons @progress/kendo-angular-l10n

If you use Angular 6, install the rxjs-compat dependency. To upgrade your existing Kendo UI for Angular project to Angular 6, refer to the article on using with Angular 6.

npm install --save rxjs-compat@6

The Kendo UI components use Angular animations. For more information, refer to the **Overview** section on installing each package.

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 Animations module
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

// Import the ButtonsModule
import { ButtonsModule } from '@progress/kendo-angular-buttons';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,

        // Register the modules
        BrowserAnimationsModule,
        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 by using the ng serve Angular CLI command.

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

Adding the Styles

The Kendo UI for Angular themes are distributed as separate NPM packages. At the time, the available theme packages are @progress/kendo-theme-default and @progress/kendo-theme-bootstrap.

We'll take the Default theme and install it just like the Buttons package:

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

Now, 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 brings to the table.

Happy coding!