Angular Components

Wijmo Angular 2 components are available as separate npm packages. npm package for each component is named after its core library with "angular2" included in the package name. For example, "wijmo.angular2.grid" provides angular components for "wijmo.grid" from the core library. You can install the components individually or all of them at once with "wijmo.angular2.all."

npm install @mescius/wijmo.angular2.all 

For more information on Wijmo npm packages, see Reference Wijmo Packages.

type=note

Supports Angular version 2.2.1 or higher, including 10.* versions.

Wijmo Angular 2 components are designed for use in template markup.

To create a Wijmo control in code, use the corresponding Wijmo control from the core module instead. That is, use "wijmo.grid" to create the FlexGrid control in code and not "wijmo.angular2.grid".

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

Adding Wijmo CSS

Wijmo ships @mescius/wijmo.styles npm package which contains the following two files:

• Wijmo.css - includes styles for all controls

• wijmo-core.css - truncated version of wijmo.css. It excludes styles for Enterprise controls.

You can add styles to your Angular application by referencing in one of the following places:

• Default styles.css - add the following import statement to import styles:

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

• Angular.json - Add the following code in angular.json:

../node_modules/@grapecity/wijmo.styles/wijmo.css

Angular Markup Syntax

Wijmo Angular components use a clear naming pattern, making them easy to reference in templates. Component names follow these simple rules:

• The HTML element name for a Wijmo component uses lower-case-dash syntax. For example, write WjInputNumber component as wj-input-number.

  <wj-input-number [(value)]="amount"></wj-input-number>

• Wijmo attribute directives use camelCase for their class names. For example, you can define WjFlexGridCellTemplate directive using the wjFlexGridCellTemplate attribute.

  <template wjFlexGridCellTemplate [cellType]="'Cell'"></template>

• Attribute names for Wijmo component properties and events exactly match the property and event names exposed off the component class interface.

  • For one-way binding, enclose property names in the square brackets; for example: [isReadOnly].

  • For two-way binding, use both square brackets and parentheses; for example: [(value)].

  • Enclose event names in parentheses; for example: e.g. (valueChanged).

    <wj-input-number
    [(value)]="amount" // two-way binding to a component property
    [format]="'n0'" // one-way binding to string
    [isReadOnly]="true" // one-way binding to boolean (valueChanged)="valueChanged($event)"> // event binding
    </wj-input-number>

• Binding expression should evaluate to a value of the same type as the property type it is assigned to. Let us observe and understand with the help of the above code.

  • The format string type property has the value 'n0' enclosed in single quotes. It represents a string literal. If we omit quotes and just specify n0, then such an expression becomes a property name.

  • Similarly, isReadOnly boolean property is bound to true (without quotes) because true is a boolean type constant while 'true' surrounded by single quotes denotes a string literal.

Event handlers

Wijmo event handlers are defined as functions with two parameters: sender argument and event argument. Angular EventEmitter allows passing only one parameter from an event initiator to the subscribers. It is accessible as a value of the $event local variable in template markup. Wijmo events pass an event argument in this parameter.

<wj-flex-grid
[itemsSource]="data"(deletingRow)="beforeDelete($event)"> //$event contains CellRangeEventArgs object
</wj-flex-grid>

To receive both the sender and event argument in an event handler, define a local template variable for the component and pass it along with the event argument:

<wj-flex-grid #flex // 'flex' local variable references the grid component instance
[itemsSource]="data"(deletingRow)="beforeDelete(flex, $event)"> // pass sender ('flex') and event arguments ($event) to the handler
</wj-flex-grid>

The “initialized” event

All Wijmo Angular components have an initialized event, triggered after the control is added to the page and has been initialized. You can use this event for extra setup beyond setting properties in markup.

HTML

<wj-flex-grid #flex (initialized)="initGrid(flex)">
</wj-flex-grid>

JavaScript

// implementation
export class AppComponent {
constructor() {
this.data = ...;
}
// add custom merge manager to the FlexGrid
initGrid(flex) {
flex.mergeManager = new CustomMerge(flex);
}
}