Angular 2 Markup Syntax

Wijmo Angular 2 components use consistent naming conventions for specifying them in template markup. The HTML element and attribute names used for components can be easily inferred from component class and member names by using the following simple rules:

• HTML element name representing a Wijmo component is specified using lower-case-dash syntax. For example, WjInputNumber component should be spelled as wj-input-number:

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

• Wijmo attribute directives use camel case form for their class names, that is, it is a class name with the first letter in lower case. For example, WjFlexGridCellTemplate directive is defined using the wjFlexGridCellTemplate attribute:

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

• Names of the attributes representing Wijmo component properties and events exactly coincide with the property and event names exposed off the component class interface. Property names must be enclosed in square brackets for one-way binding (e.g. [isReadOnly]) and square brackets plus parentheses for two-way binding (e.g. [(value)]). Event names must be enclosed in parentheses (e.g. (valueChanged)). For example:

  <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>

  Note that binding expression should evaluate to a value of the same type as the property type it is assigned to. In the above example, the format string type property is assigned with 'n0' enclosed in single quotes, which represents a string literal. If we omit quotes and just specify n0, then such an expression will be treated as a property name. Similarly, isReadOnly boolean property is bound to true where the latter is specified without quotes, because true is a boolean type constant while 'true' surrounded by single quotes would denote a string literal.

Event binding details

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

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

If you want to additionally receive a sender in an event handler, as it happens when you subscribe to Wijmo control events in TypeScript/JavaScript code, all you need to do is add a local template variable to the component and pass it to the event handler 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 2 components include an "initialized" event that is raised after the control has been added to the page and initialized.

You can use this event to perform additional initalization in addition to setting properties in markup. For example:

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

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