“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.
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,
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|