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
- Create a new Angular SystemJS Plunker
- 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.
- https://plnkr.co/edit/gx5ETPRocVKyj5o39Jc7?p=preview
- https://plnkr.co/edit/AF45fMlVEH8sASncmlmY?p=preview
- https://plnkr.co/edit/LV0HlNLfAS96AvqzhE3T?p=preview
Refer the sample plunker for Syncfusion Angular Component integration here