Welcome to the Wijmo FlexGrid, an HTML5 grid control you can use in Angular 2 apps! In this video, we'll learn how to:
- Configure Visual Studio 2015
- Use NPM to get Angular 2 and accompanying libraries
- How to set up project structure for development
- Build an Angular 2 component
- Display a Wijmo FlexGrid bound to some generic data using a service
If you haven't already downloaded Wijmo, get your fully-featured watermarked trial now.
Code Snips
///
import { Component, View, EventEmitter, provide, Input, Inject, enableProdMode } from 'angular2/core';
import { CORE_DIRECTIVES } from 'angular2/common';
import { bootstrap } from 'angular2/platform/browser';
import * as wjNg2FlexGrid from 'wijmo/wijmo.angular2.grid';
import { DataSvc } from './DataSvc';
@Component({
selector: 'app-cmp',
templateUrl: 'src/app.html',
directives: [CORE_DIRECTIVES, wjNg2FlexGrid.WjFlexGrid, wjNg2FlexGrid.WjFlexGridColumn]
})
export class AppCmp {
protected dataSvc: DataSvc;
data: wijmo.collections.CollectionView;
constructor( @Inject(DataSvc) dataSvc: DataSvc) {
this.dataSvc = dataSvc;
this.data = new wijmo.collections.CollectionView(this.dataSvc.getData(100));
}
}
bootstrap(AppCmp, [DataSvc]);
app.html
<h2>Wijmo FlexGrid Control</h2>
DataSvc.ts
'use strict';
import { Injectable } from 'angular2/core';
// Common data service
@Injectable()
export class DataSvc {
// data used to generate random items
getData(count: number): wijmo.collections.ObservableArray {
var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
data = new wijmo.collections.ObservableArray();
for (var i = 0; i < count; i++) {
data.push({
id: i,
country: countries[i % countries.length],
date: new Date(2014, i % 12, i % 28),
amount: Math.random() * 10000,
active: i % 4 == 0
});
}
return data;
}
}
Script references in default.html
<script src=\"http://code.jquery.com/jquery-2.0.0.min.js\" type=\"text/javascript\"></script>
<script src=\"https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js\" type=\"text/javascript\"></script>
<!-- Shims, polyfills, Angular 2 -->
<!-- IE required polyfills, in this exact order -->
<script src=\"node_modules/es6-shim/es6-shim.min.js\"></script>
<script src=\"node_modules/systemjs/dist/system-polyfills.js\"></script>
<script src=\"node_modules/angular2/es6/dev/src/testing/shims_for_IE.js\"></script>
<script src=\"node_modules/angular2/bundles/angular2-polyfills.js\"></script>
<script src=\"node_modules/systemjs/dist/system.src.js\"></script>
<script src=\"node_modules/rxjs/bundles/Rx.js\"></script>
<script src=\"node_modules/angular2/bundles/angular2.dev.js\"></script>
<script>// <![CDATA[
System.config({
packages: {
'src': {
defaultExtension: 'js',
},
},
});
// ]]></script>
<script>// <![CDATA[
System.import('/src/app');
// ]]></script>
<!-- Wijmo -->
<script src=\"scripts/vendor/wijmo.min.js\" type=\"text/javascript\"></script>
<script src=\"scripts/vendor/wijmo.grid.min.js\" type=\"text/javascript\"></script>
<!-- Wijmo Angular2 -->
<script src=\"scripts/vendor/wijmo.angular2.min.js\" type=\"text/javascript\"></script>
Transcript
Welcome to Getting Started with FlexGrid using Wijmo and Angular 2. I’m Ross Dederer, Development Relations at GrapeCity. Today we’re going to walk through how to add Wijmo FlexGrid to a new application. In this video, we’ll be using Visual Studio 2015 with Intellisense and TypeScript, but you can use command line or other editors. First, create a new application using Visual Studio’s HTML Application with TypeScript project template. I’ll call it GettingStartedFlexGridNg2. I recommend that we remove the index.html, app.ts, and app.css files. Go to TypeScript project settings and specify CommonJS as the project module system. Next, we need to unload our project and specify that Experimental support for decorators be enabled to remove any warnings from our output.
To get Angular 2 and its libraries, add a package.json file to the root of our app. Copy the contents found in the Angular 2 quickstart manual. That instructs Visual Studio to get the libraries automatically. Visual Studio will place all libraries in node_modules. Next, we’ll configure the project structure.
Add three folders: one for scripts, where we’ll place the Wijmo controls; one for styles; and one for the src folder, which will contain our component and services. Open the project in Windows File Explorer next to the Wijmo download package. Add two folders to scripts: one called vendor, and one called definitions. Definitions will describe the API of the internal modules containing the Wijmo controls. Vendors will contain the javascript code for the controls themselves. Copy the Wijmo.Angular2 interop JS file into the Vendors location from the Interop Wijmo package. Copy the d.ts ( definition ) files from interop into a newly created folder in node_modules called Wijmo. Finally, copy the base style . Go back to Visual Studio and include everything in styles and scripts into the project.
Note that we didn’t include the Wijmo folder from node_modules. Let's configure our Default.html. To begin, let’s give it a title. Next, we need to include the Angular 2 references as described in the online manual. Add the necessary Wijmo control references as well. We will need to do some configuring of SystemJS. You can see here, we will put our component in the src folder.
Finally, we need to link to our Wijmo base css. Now we can build the app component. Add a new typescript class and a companion template. We can remove the default html code placed here by Visual Studio. Import a few Angular2 modules into our component. A Data Service is required to get the data, so create a new TS class and import it into our app component.
We’re ready to import Wijmo FlexGrid. First, define decorators and MetaData so that the component can be placed where ever it’s called in the markup. Expose the directives to our component from Wijmo FlexGrid.
Next, create a class and call the data service to load data into FlexGrid. I am going to copy some generic data into my DataSvc. Finally, bootstrap the app. Define AppCmp as the application root component. Expose DataSvc service to it.
The final step is to configure our view. Let’s copy our FlexGrid directive and assign itemsSource to our data model from our app component. Add the component placeholder to default.html and provide any additional styling for the component.
Run the application.
Read more about Angular 2 and other Wijmo controls.
GrapeCity