Kendo UI Angular 4 Setting Up Project

Kendo UI Installation Instructions in Angular 4–

Step 1- Installation

npm install -g @angular/cli
ng new my-first-angular-project --style=scss
cd my-first-angular-project

Step 2 -

npm install --save @progress/kendo-angular-buttons @progress/kendo-angular-l10n @angular/animations

Step 3 -

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

Step 4 - Once installed, import the NgModule of the components you need

Example - import the DropDownsModule

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
import { AppComponent } from './app.component';

@NgModule({
   bootstrap:    [AppComponent],
   declarations: [AppComponent],
   imports:      [BrowserModule, BrowserAnimationsModule, DropDownsModule]
})
export class AppModule {
}

Example -import the GridModule in your application root module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { GridModule } from '@progress/kendo-angular-grid';
import { AppComponent } from './app.component';

@NgModule({
   bootstrap:    [AppComponent],
   declarations: [AppComponent],
   imports:      [BrowserModule, BrowserAnimationsModule, GridModule]
})
export class AppModule {
}

All Angular Dependencies-

1. @angular/common
2. @angular/core
3. @angular/forms
4. @progress/kendo-angular-dropdowns
5. @progress/kendo-angular-inputs
6. @progress/kendo-angular-intl
7. @progress/kendo-angular-l10n
8. @progress/kendo-data-query
9. @progress/kendo-drawing
10. @progress/kendo-angular-excel-export
11. @progress/kendo-angular-dateinputs
12. rxjs

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