Articles in this section
Category / Section

Angular plunker with Syncfusion Angular Components

2 mins read

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

 

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied