Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

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/ [email protected]

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 "[email protected]/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!!

Share the post

Kendo UI for Angular 2 Grids [How To Install]

×

Subscribe to Angular 2 Javascript Asp.net C# Sql Server Knockoutjs Angularjs Kendo Ui Html 5 Web Api Wpf Wcf Etc.

Get updates delivered right to your inbox!

Thank you for your subscription

×