Using Wijmo with Angular

Note We highly recommend that you download the Wijmo dev kit in addition to installing from npm. The dev kit includes hundreds of samples with source code, reference apps and more.

Wijmo components for Angular (Wijmo works with Angular 2 and up) allow you to use Wijmo controls in Angular template markup. In terms of the TypeScript class inheritance feature, Wijmo Angular 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 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 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 components and Angular itself are written in the same TypeScript language.

Wijmo Angular components are shipped as a set of modules, one module per core library module, with the "angular2" word in their names. For example, "wijmo.angular2.grid.js" module represents components for controls from the core "wijmo.grid.js" module. The modules are included in the wijmo for Angular npm package bundle, which can be installed as explained here.

All Wijmo modules should be imported using their ambient names, which are module names prefixed with "@grapecity/", and without ".js" extension. For example, this import statement imports the content of the "wijmo.angular2.grid.js" module:

import * as wjGrid from '@grapecity/wijmo.angular2.grid';

Importing Wijmo components

With this setup, you may import Wijmo Angular modules and use the components and directives they contain. For example, this code adds a WjFlexGrid component to MyCmp component's template, with the flex property containing a reference to the added grid:

import { Component, NgModule, ViewChild } from '@angular/core';
import { WjGridModule, WjFlexGrid } from '@grapecity/wijmo.angular2.grid';

@Component({
    template: '<wj-flex-grid #flex \[itemsSource\]="data"></wj-flex-grid>',
    selector: 'my-cmp',
})
export class MyCmp {
    data: any\[\];
    @ViewChild('flex') flex: WjFlexGrid;

}

@NgModule({
    imports: \[WjGridModule, BrowserModule\],
    declarations: \[MyCmp\]
})
export class MyModule {
}

Every Wijmo module for Angular contains an Angular 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.

Creating Wijmo controls in code

Wijmo components for Angular are intended for a usage in templates markup. If you want to create a Wijmo control in code, you should use a Wijmo control from a core module for this purpose, instead of a component. A core module has the same name as a corresponding Angular interop module, but without the "angular2" word in the name. For example, this code creates a FlexGrid control in code:

import { FlexGrid } from '@grapecity/wijmo.grid';
let flex = new FlexGrid('#host_element');

Note that we import FlexGrid control instead of WjFlexGrid component, and import it from the '@grapecity/wijmo.grid' module instead of '@grapecity/wijmo.angular2.grid'.

Adding Wijmo css

For Wijmo controls to look and work correctly, you need to load Wijmo CSS files into your application. The styles are shipped in the @grapecity/wijmo.styles npm package.

You can load styles in your Angular CLI application by adding this import statement to the top of the default styles.css file:

@import '@grapecity/wijmo.styles/wijmo.css';

Angular CLI

The easiest way to start building Angular apps is using the Angular CLI tool. Refer to this blog for the step by step instructions.

Wijmo Angular Markup

Refer to the Angular Markup Syntax topic for the description.