How to build Angular apps with Wijmo and NPM

Notice: Code examples in this blog use Wijmo modules from the non-scoped ‘wijmo’ npm package. Beginning with Wijmo 2019 v1 release, Wijmo packages are also available in the @grapecity npm scope, and the use of these packages is the recommended for new applications. For the convenience of our customers, we continue publishing new Wijmo builds as non-scoped ‘wijmo’ packages as well.

Read more about Wijmo NPM Package Changes.

Build Angular apps with Wijmo and NPM

In this series, we'll show how you can use Wijmo with NPM and Webpack to create applications targeting the most popular JavaScript application frameworks. This blog focuses on Angular, Google’s framework for building JavaScript applications that live on the web, mobile, or the desktop, this full-featured framework combines declarative templates, dependency injection, and includes end-to-end tooling.

Read more about Wijmo's Angular Components including a powerful Angular DataGrid.

Blog series

1. Introduction to NPM and Wijmo

2. Angular

3. React

4. Vue.js

5. Ionic

In this tutorial, we won't get into the details of NPM, Webpack, or Angular itself. All these tools are incredibly popular and thoroughly documented, and you can read our e-book on frameworks for a good overview. Instead, we'll focus on the task of adding Wijmo to simple applications written in Angular.

The basic steps for creating and maintaining applications are the same in all frameworks:

• Install the appropriate CLI (Command-Line Interface utility) to generate, run, maintain, and deploy applications.

• Use the CLI to create the application.

• Use NPM to add Wijmo to the application.

• Import the components you want to use and add the appropriate markup.

Step 1. Create a new Angular app

Follow these steps to create a new Angular app and get it up and running:

You should see the app running in the browser. Let’s start editing the app. When you save changes, the browser will reload the app automatically.

Step 2. Add Wijmo modules

Open the “src/app/app.module.ts” file and add the Wijmo modules for the grid and chart:

// src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

// import Wijmo modules
import { WjGridModule } from 'wijmo/wijmo.angular2.grid';
import { WjChartModule } from 'wijmo/wijmo.angular2.chart';

// apply Wijmo license key
import { setLicenseKey } from 'wijmo/wijmo';
setLicenseKey('your license key goes here');

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    WjGridModule,
    WjChartModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

In addition to importing the Wijmo modules we want, the code also applies a Wijmo license key to remove the evaluation watermark from the app. If you don’t have a license key, it’s OK to skip this step.

Now that the Wijmo modules have been referenced by the application module, we can use them in our component templates.

Step 3. Add data to the controls

Start by opening the “src/app/app.component.ts” file and give the component some data for the controls:

// src/app/app.component.ts
import { Component } from '@angular/core';

// import Wijmo components
import { CollectionView } from 'wijmo/wijmo';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Wijmo Starter App';
  data = this.getData();
  getData() {
    var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
        data = [];
    for (var i = 0; i < countries.length; i++) {
      data.push({
        country: countries[i],
        sales: Math.random() * 10000,
        expenses: Math.random() * 5000,
        downloads: Math.round(Math.random() * 20000),
      });
    }
    return new CollectionView(data);
  }
}

Notice that getData returns a CollectionView rather than a regular array. The CollectionView class supports sorting, filtering, grouping, currency, and notifications. In this example, we'll use it as a data source for a grid and a chart.

Step 4. Add the Angular controls to the app

To add the grid and the chart to the app, edit the src/app/app.component.html file as follows:

<!-- The content below is only a placeholder and can be replaced. -->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="100" alt="Angular Logo" src="data:image/svg+xml;base64,PH…">
</div>
<h2>Here are some Wijmo controls to help you start:</h2>
<div class="App-panel">
  <wj-flex-grid [itemsSource]="data">
  </wj-flex-grid>
  <wj-flex-chart [itemsSource]="data" [bindingX]="'country'">
    <wj-flex-chart-series [binding]="'sales'" [name]="'Sales'">
    </wj-flex-chart-series>
    <wj-flex-chart-series [binding]="'expenses'" [name]="'Expenses'">
    </wj-flex-chart-series>
    <wj-flex-chart-series [binding]="'downloads'" [name]="'Downloads'">
    </wj-flex-chart-series>
  </wj-flex-chart>
</div>

Notice the use of the wj-flex-grid, wj-flex-chart, and wj-flex-chart-series directives. These were imported from the grid and chart modules.

Step 5. Update the stylesheet

We're almost done. The last step is adding the CSS. Open the “src/styles.css” file and add this code:

/* 
  You can add global styles to this file,
  and also import other style files
*/
@import "wijmo/styles/wijmo.css";

.App-panel {
    margin: 0 48pt;
    text-align: center;
  }
    .App-panel .wj-control {
      display: inline-block;
      width: 400px;
      height: 300px;
      vertical-align: top;
    }

First, we import Wijmo’s CSS, so all Wijmo controls will be properly styled throughout the app.

Next, we define rules that apply to “App-panel” elements and controls hosted in those elements.

We could also have defined the “App-panel” rules at the component level, in the “app.component.css” file.

Step 6. Test in the browser

Now press ctrl+S to save the changes in all files and switch back to the browser to see the result:

Because the grid and the chart are bound to the same CollectionView, any changes made to the data in the grid are automatically reflected in the chart. For example, you may click the column headers to sort the data or edit some values using the keyboard.

Conclusion

Integrating Wijmo into modern Angular applications is just a matter of installing it with NPM and importing the components you want from the library.

Being able to use the exact same UI components on different frameworks makes things easier you work with two or more frameworks, or are planning to switch frameworks in the future.

Read more about Wijmo's Angular Components including a powerful Angular DataGrid.

Download Now!