All Components

Using with SystemJS

SystemJS is a dynamic ECMAScript (ES) module loader that is used by Angular Quickstart and other projects.

Overview

To use Kendo UI components for Angular with SystemJS, you have to explicitly list the package entry points. This article demonstrates how to implement the required configuration when you use the Angular Quickstart project template.

The Angular Quickstart seed project has been deprecated. To scaffold new projects, it is highly recommended that you use the Angular CLI. For more information, refer to the article on getting started.

The source code for the completed sample project is available on GitHub at telerik/kendo-angular-quickstart.

Sample Project

To configure a typical SystemJS setup in the Angular Quickstart sample:

  1. Clone the Agular Quickstart project
  2. Add the required Kendo UI package to your project
  3. Add the styles
  4. Configure the SystemJS module loader
  5. Run your application

Cloning Angular Quickstart

To clone the Angular Quickstart project into a local folder, run the following commands:

  1. git clone https://github.com/angular/quickstart.git
  2. cd quickstart
  3. npm install

Adding the Kendo UI Package

  1. Choose a Kendo UI package for Angular to add to your project. For example, to include the Buttons, use the following command:

    npm install --save @progress/kendo-angular-buttons @progress/kendo-angular-l10n @angular/animations
  2. Import the component directives into your source code. Change the code in src/app/app.module.ts to:

    import { BrowserModule } from '@angular/platform-browser';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    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,
           BrowserAnimationsModule,
           FormsModule,
           HttpModule,
    
           // ... and register it
           ButtonsModule
       ],
       providers: [],
       bootstrap: [AppComponent]
    })
    export class AppModule { }
  3. Add the HTML for the Button to src/app/app.component.html:

    <h1>{{title}}</h1>
    
    <button kendoButton [primary]="true">My Kendo UI Button</button>

Adding the Styles

Kendo UI for Angular distributes its Default theme as a separate NPM package that is available as @progress/kendo-theme-default.

  1. Install the Default theme in the same way you included the Buttons package:

    npm install --save @progress/kendo-theme-default
  2. Import the CSS file from the Default theme package into src/app/app.component.ts:

    @Component({
     selector: 'my-app',
     styleUrls: [
       // Load the Kendo UI Default theme
       'node_modules/@progress/kendo-theme-default/dist/all.css'
     ],
     template: `
       <h1>Hello {{name}}!</h1>
       <button kendoButton (click)="onButtonClick()" [primary]="true">My Kendo UI Button</button>
     `,
    })

Configuring SystemJS

The configuration file, which SystemJS uses, is located in the project template under src/systemjs.config.js.

The complete list of entry points for all Kendo UI components for Angular is available in telerik/kendo-angular2-quickstart/src/systemjs.config.js.

To add the Kendo UI configuration to the map and packages section, use the following example:

map: {
  // ...


  // Kendo UI for Angular scopes
  '@progress': 'npm:@progress',
  '@telerik': 'npm:@telerik'
},
packages: {
  // ...


  // Kendo UI for Angular packages
  'npm:@progress/kendo-angular-buttons': {
    main: './dist/npm/main.js',
    defaultExtension: 'js'
  }
}

Running Your Application

To run the application in the browser, use the npm start command.

In this article