Getting Started

The purpose of this document is to build and run a simple Essential JS 2 application in TypeScript, using the Essential JS 2 quickstart seed repository. This seed repository is pre-configured with all Essential JS 2 packages.

Setup for Local Development

Clone the Essential JS 2 quick start project from GitHub and install necessary npm packages using following command line scripts.

git clone https://github.com/syncfusion/ej2-quickstart.git quickstart
cd quickstart
npm install

Adding component to the Application

Now, you can start adding Essential JS 2 components in the application. For getting started, we have added a Button component in app.ts and index.html file.

Now, add the Button in app.ts using the following code.


import { Button } from '@syncfusion/ej2-buttons';

// initialize button component
let button: Button = new Button();

// render initialized button
button.appendTo('#normalbtn');

Now, add the Button in index.html using following code.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="description" content="Essential JS 2" />
    <meta name="author" content="Syncfusion" />
    <link rel="shortcut icon" href="resources/favicon.ico" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

    <!--style reference from app-->
    <link href="/styles/styles.css" rel="stylesheet" />

    <!--system js reference and configuration-->
    <script src="node_modules/systemjs/dist/system.src.js" type="text/javascript"></script>
    <script src="system.config.js" type="text/javascript"></script>
</head>

<body>
    <div style="margin: 50px;">
        <!--element which is going to render-->
        <button id="normalbtn">Normal</button>
    </div>

</body>

</html>

Configuring System JS

Required Syncfusion packages needs to be mapped in system.config.js configuration file as follows:

System.config({
    paths: {
        'syncfusion:': './node_modules/@syncfusion/',
    },
    map: {
        app: 'app',

        //Syncfusion packages mapping
        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
    },
    packages: {
        'app': { main: 'app', defaultExtension: 'js' }
    }
});

System.import('app');

Adding CSS reference

Combined CSS files are available in the Essential JS 2 package root folder. This can be your reference styles.css using following code.

@import '../../node_modules/@syncfusion/ej2/material.css';

Running the application

The quick start project is configured to compile and run the application in browser. Use the following command to run the application.

npm start

Output will be as follows:

import { Button } from '@syncfusion/ej2-buttons';

// initialize button component
let button: Button = new Button();

// render initialized button
button.appendTo('#normalbtn');
import { Button } from '@syncfusion/ej2-buttons';
// initialize button component
let button = new Button();
// render initialized button
button.appendTo('#normalbtn');

// initialize button component
var button = new ej.buttons.Button();
button.appendTo('#normalbtn')