Wijmo Angular logo

Wijmo and Angular

This sample was designed to show advanced data-binding scenarios using Wijmo and different application frameworks.

This version of the sample uses AngularJS 1.x and the wijmo.angular.js interop module. Other versions use React and Vue.

Together, the samples demonstrate the differences between popular application frameworks and Wijmo's framework-agnostic nature.

FlexGrid

Let's begin by showing some data on an editable FlexGrid control:

Wijmo Angular directives include a "control" pseudo-property that exposes the control instance to the scope. This allows you to use the control in your markup. For example, the grid above has {{ theGrid.rows.length }} rows.

FlexChart

Next, let's show the same data as a chart using the FlexChart control:

The chart is bound to the same CollectionView as the grid, so if you edit or sort the data on the grid, the changes are automatically reflected on the chart.

Gauges

Here's two gauges bound to the current customer's sales. You can use the gauges to see and also to edit the sales amount.

Input Controls

This section shows several input controls bound to the current item's properties:

Modal Popups and Labeled Inputs

This section shows a modal popup containing input controls with floating labels (inspired by the Material Design Lite CSS library):