We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Angular plunker with Syncfusion Angular Components

Plunker is an online community for creating, collaborating on and sharing your web development ideas.

Features of Plunker

  • Real-time code collaboration
  • Fully-featured, customizable syntax editor
  • Live previewing of code changes
  • As-you-type code linting
  • Forking, commenting and sharing of Plunks

Steps to create an Angular Plunker with Syncfusion Angular Components

 

  • Essential JavaScript provides support for Angular Framework through wrappers. To configure the Syncfusion Angular Components in the created plunker, we need the dependencies ej-angular2 package and syncfusion-javascript package.

 

  • Syncfusion JavaScript Widgets requires dependencies jquery, jquery-validation and jsrender which needs to be loaded through systemjs loader in config.js file. 

 

Refer to the below code snippet for config.js file.

var angularVersion;

if (window.AngularVersionForThisPlunker === 'latest') {

    angularVersion = ''; //picks up latest

}

else {

    angularVersion = '@' + window.AngularVersionForThisPlunker;

}

 

System.config({

    //use typescript for compilation

    transpiler: 'typescript',

    //typescript compiler options

    typescriptOptions: {

        emitDecoratorMetadata: true

    },

    paths: {

        'npm:': 'https://unpkg.com/'

    },

    //map tells the System loader where to look for things

    map: {

        // Angular Package Library

        'app': './src',

        '@angular/core': 'npm:@angular/core' + angularVersion + '/bundles/core.umd.js',

        '@angular/common': 'npm:@angular/common' + angularVersion + '/bundles/common.umd.js',

        '@angular/common/http': 'npm:@angular/common' + angularVersion + '/bundles/common-http.umd.js',

        '@angular/compiler': 'npm:@angular/compiler' + angularVersion + '/bundles/compiler.umd.js',

        '@angular/platform-browser': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser.umd.js',

        '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic.umd.js',

        '@angular/http': 'npm:@angular/http' + angularVersion + '/bundles/http.umd.js',

        '@angular/router': 'npm:@angular/router' + angularVersion + '/bundles/router.umd.js',

        '@angular/forms': 'npm:@angular/forms' + angularVersion + '/bundles/forms.umd.js',

        '@angular/animations': 'npm:@angular/animations' + angularVersion + '/bundles/animations.umd.js',

        '@angular/platform-browser/animations': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-animations.umd.js',

        '@angular/animations/browser': 'npm:@angular/animations' + angularVersion + '/bundles/animations-browser.umd.js',

 

        '@angular/core/testing': 'npm:@angular/core' + angularVersion + '/bundles/core-testing.umd.js',

        '@angular/common/testing': 'npm:@angular/common' + angularVersion + '/bundles/common-testing.umd.js',

        '@angular/common/http/testing': 'npm:@angular/common' + angularVersion + '/bundles/common-http-testing.umd.js',

        '@angular/compiler/testing': 'npm:@angular/compiler' + angularVersion + '/bundles/compiler-testing.umd.js',

        '@angular/platform-browser/testing': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-testing.umd.js',

        '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic-testing.umd.js',

        '@angular/http/testing': 'npm:@angular/http' + angularVersion + '/bundles/http-testing.umd.js',

        '@angular/router/testing': 'npm:@angular/router' + angularVersion + '/bundles/router-testing.umd.js',

        'tslib': 'npm:tslib@1.6.1',

        'rxjs': 'npm:rxjs',

        'typescript': 'npm:typescript@2.2.1/lib/typescript.js',

        // syncfusion-javascript library dependencies

        'jquery': 'npm:jquery/dist/jquery.min.js',

        'jsrender': 'npm:jsrender/jsrender.min.js',

        'jquery-validation': 'npm:jquery-validation/dist/jquery.validate.min.js',

        'syncfusion-javascript': 'npm:syncfusion-javascript', // syncfusion-javascript library

        'ej-angular2': 'npm:ej-angular2' // Syncfusion Angular Component Library

    },

    //packages defines our app package

    packages: {

        app: {

            main: './main.ts',

            defaultExtension: 'ts'

        },

        rxjs: {

            defaultExtension: 'js'

        },

        'ej-angular2': {

            main: './src/index.js'

        },

        'syncfusion-javascript': {

            defaultExtension: 'js'

        }

    }

});

 

 

  • Import EJAngular2Module in src/app.ts file. Refer to the below code snippet for app.ts file.

 

//our root app component

import {Component, NgModule, VERSION} from '@angular/core'

import {BrowserModule} from '@angular/platform-browser'

import { EJAngular2Module} from 'ej-angular2'

 

@Component({

  selector: 'my-app',

  template: `

    <div>

      <h2>Hello {{name}}</h2>

    </div>

    <input type="button" ej-button text="button"/>

  `,

})

export class App {

  name:string;

  constructor() {

    this.name = `Angular! v${VERSION.full}`

  }

}

 

@NgModule({

  imports: [ BrowserModule, EJAngular2Module.forRoot()],

  declarations: [ App ],

  bootstrap: [ App ]

})

export class AppModule {}

 

 

  • Refer the Syncfusion theme file in style.css file. Refer to the below code snippet for style.css file.

 

/* Styles go here */

@import 'https://unpkg.com/syncfusion-javascript@15.4.17/Content/ej/web/material/ej.web.all.min.css';

 

 

  • Now Save and Fork the repository to save the changes in the plunker. Then Run the plunker, to get the output.

For more information, we created plunker with ejGrid, ejTab, ejDatePicker, ejButton and ejAccordion Angular components. Refer to the below plunker links.

 

Note: Refer the sample plunker for Syncfusion Angular Component integration here

 

Article ID: Published Date: Last Revised Date: Platform: Control:
8202 11/29/2017 11/29/2017 JavaScript General
Did you find this information helpful?
Add Comment
You must log in to leave a comment

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.