Angular 2 Components (global core modules)

Note This description pertains to an obsolete approach that uses global Wijmo core library modules (build 211 and earlier). A description based on new external Wijmo core library modules can be found here.

Wijmo components for Angular 2 allow you to use Wijmo controls in Angular 2 templates markup. In terms of the TypeScript class inheritance feature, Wijmo Angular 2 components "extend" the control classes they represent. This means that when you acquire a reference to a Wijmo component, the referenced instance is a Wijmo control with all its properties, events and methods, and an Angular 2 component at the same time. A Wijmo component extends a control class and adds the necessary functionality that allows the control to be used in the Angular 2 template markup, with the fully functional one-way and two-way property bindings and event bindings. This integration is smooth, as all the players, Wijmo controls, Wijmo Angular 2 components and Angular 2 itself are written in the same TypeScript language.

Wijmo Angular 2 components are shipped as a single wijmo.angular2.js file which contains multiple modules, and are accompanied by TypeScript definition (.d.ts) files that represent modules' API for TypeScript compiler and Visual Studio (or any other IDE) IntelliSense.

Using Wijmo 5 in Angular 2 Applications

In order to use Wijmo 5 Angular directives in your Angular 2 application, you need to perform the steps discussed below.

Creating application project

In case of Visual Studio:
In case of NodeJS:

Configuring HTML

Add the following references within the <head> section of the .html file, which will host the root component of your Angular 2 application:

The whole picture may look as follows: 
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
   
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script> 
<script src="node_modules/systemjs/dist/system.src.js"></script>
   
<!-- Wijmo controls and css -->
<script src="scripts/vendor/controls/wijmo.min.js"></script>
<script src="scripts/vendor/controls/wijmo.grid.min.js"></script>
<script src="scripts/vendor/controls/wijmo.chart.min.js"></script>
<script src="scripts/vendor/controls/wijmo.input.min.js"></script>
<script src="scripts/vendor/controls/wijmo.gauge.min.js"></script>
<link href="styles/wijmo.min.css" rel="stylesheet"/>
   
<!-- Wijmo Angular 2 components -->
<script src="scripts/vendor/interop/angular2/wijmo.angular2.min.js"></script>

Using Wijmo Angular 2 components with TypeScript

You need to allow TypeScript compiler and Visual Studio IntelliSense (if you use the latter) to understand the API of Wijmo modules which cannot be retrieved from .js module files that you use at run-time. For this, we provide a set of TypeScript "definition" files (the ones with the .d.ts extension) for all the official Wijmo modules.

As we mentioned above, there are two kinds of modules, "internal" (Wijmo controls) and "external" (Wijmo Angular 2 Components).

The definition files for internal modules should be simply included in Visual Studio project as items with BuildAction=TypeScriptCompile. In case you are not a Visual Studio user, these definition files should be placed in any folder "visible" to command line TypeScript compiler as per the settings specified in tsconfig.json file of the project.

External Wijmo Angular 2 modules require a bit more attention. As these modules are exposed using ambient names (like "wijmo/wijmo.angular2.grid"), you need to make sure that your project uses "Node" module resolution algorithm and that the corresponding definition files(.d.ts files) are placed at the correct location in order to allow TypeScript to find these files.

Below are the steps necessary to get a correct .d.ts files setup.

In case of Visual Studio:
In case of NodeJS:
In any case

Make sure that typings/globals/core-js/index.d.ts file is visible to the TypeScript compiler, for example by adding the following rererence in the bootstrap file of your application: 

///<reference path="../typings/globals/core-js/index.d.ts" />

Importing Wijmo components

With this setup, you may import Wijmo Angular 2 modules and use the components and directives they contain. For example: 
import * as wjGrid from 'wijmo/wijmo.angular2.grid';
 
@Component({
    template: '<wj-flex-grid [itemsSource]="data"></wj-flex-grid>',
    selector: 'my-cmp',
})
export class MyCmp {
    data: any[];
}
 
@NgModule({
    imports: [wjGrid.WjGridModule, BrowserModule],
    declarations: [MyCmp]
})
export class MyModule {
}

Every Wijmo for Angular 2 JavaScript module contains an Angular 2 NgModule that exports all the components in the module. To use any of these components in your NgModule components' templates, you just need to add a reference to Wijmo NgModule to the imports metadata property of your NgModule decorator.

A name of NgModule is constructed from its JavaScript module name using the following schema:
Wj<JS module name without wijmo.angular2 prefix>Module

For example, WjInputModule NgModule for wijmo.angular2.input JavaScript module, or WjGridFilterModule NgModule for wijmo.angular2.grid.filter JavaScript module.

Angular 2 Markup Syntax

Refer to the Angular 2 Markup Syntax topic for the description.