Get Started

In this article

Setting Up the Angular Project

The latest versions of the Kendo UI for Angular packages target the latest Angular long-term support versions (currently, v4.4.x) all through the latest official version (currently, v6.x). If your application targets Angular 2.x, refer to telerik/kendo-angular#469.

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

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

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:

    ng 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:

    <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:

    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!';
       }
    }
  4. Run the application in the browser by using the ng serve Angular CLI command.

    getting-started.png

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

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!