python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
Angular 2

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.



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,

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

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions