Kendo UI for Angular 2 Grids [How To Install]

“How to Install Kendo UI for Angular 2”? and How To Set Up the Angular 2 Project?

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

Stayed Informed – Angular 2 Tutorials and Examples

For Install Kendo UI for Angular 2, you need to have an active trial or licensed version of Kendo UI.

Instructions as,

npm install -g angular-cli;
ng new my-first-angular2-project --style=scss;
cd my-first-angular2-project;

Add the Progress NPM Registry as,

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

Add the Kendo Angular grid NPM Registry as,

npm view @progress/kendo-angular-grid versions

Add a Kendo UI Package to Your Project as,

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

Add the Styles as,

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

Import the SCSS file from the package as,

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

Example as,
Source code for component directives,

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
<h1>{{title}}</h1>

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

References,

http://docs.telerik.com/kendo-ui/third-party/angular2

http://www.telerik.com/kendo-angular-ui/

http://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/

I hope you are enjoying with this post! Please share with you friends. Thank you!!