<h2>
    Angular 2 Components
</h2>
<p>

</p>
<ul>
    <li>Supports Angular version <b>2.2.1</b> or higher, including <b>5.*</b> versions.</li>
</ul>
<p>
    <b>Note</b> This description pertains to new <i>external</i> Wijmo core library modules 
    introduced after build 211. This is a recommended way of Wijmo interop for Angular 2 usage. 
    A description based on <i>global</i> Wijmo core library modules 
    can be found <a href="static/angular2ComponentsGlobalModules.html">here</a>.
</p>
<p>
    Wijmo <i>components</i> for Angular 2 allow you to use Wijmo <i>controls</i> in Angular 2 templates markup.
    In terms of the TypeScript class inheritance feature, Wijmo Angular 2 <i>components</i> "extend" the
    <i>control</i> classes they represent.
    This means that when you acquire a reference to a Wijmo component, the referenced instance is a Wijmo <i>control</i>
    with all its properties, events and methods, and an Angular 2 <i>component</i> 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 2 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 2 components and Angular 2 itself are written in the same TypeScript language.
</p>
<p>
    Wijmo Angular 2 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
    <a href="https://www.npmjs.com/package/wijmo" target="_blank">wijmo</a> npm package, which
    can be installed as explained <a href="static/referencesNpm.html">here</a>.
</p>
<p>
    All Wijmo modules should be imported using their <i>ambient</i> names, which are module names
    prefixed with "wijmo/", and without ".js" extension. For example, this import statement imports 
    the content of the "wijmo.angular2.grid.js" module:
    <pre>import * as wjGrid from 'wijmo/wijmo.angular2.grid';</pre>
</p>


<h3>Importing Wijmo components</h3>
<p>
    With this setup, you may import Wijmo Angular 2 modules and use the components and directives they contain.
    For example, this code adds a WjFlexGrid component to MyCmp component's template, with the <b>flex</b>
    property containing a reference to the added grid:
</p>
<pre>
import { Component, NgModule, ViewChild } from '@angular/core';
import { WjGridModule, WjFlexGrid } from 'wijmo/wijmo.angular2.grid';
&nbsp;
&#64;Component({
    template: '&lt;wj-flex-grid #flex [itemsSource]="data"&gt;&lt;/wj-flex-grid&gt;',
    selector: 'my-cmp',
})
export class MyCmp {
    data: any[];
    @ViewChild('flex') flex: WjFlexGrid;

}
&nbsp;
@NgModule({
    imports: [WjGridModule, BrowserModule],
    declarations: [MyCmp]
})
export class MyModule {
}</pre>

<p>
    Every Wijmo for Angular 2 JavaScript module contains an Angular 2 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 <b>imports</b> metadata property of your NgModule decorator.
</p>
<p>
    A name of NgModule is constructed from its JavaScript module name using the following schema:
    <br />
    <b>Wj</b>&lt;JS module name without <i>wijmo.angular2</i> prefix&gt;<b>Module</b>
</p>
<p>
    For example, <b>WjInputModule</b> NgModule for <b>wijmo.angular2.input</b> JavaScript module, or
    <b>WjGridFilterModule</b> NgModule for <b>wijmo.angular2.grid.filter</b> JavaScript module.
</p>

<h3>Creating Wijmo controls in code</h3>
<p>
    Wijmo <i>components</i> for Angular 2 are intended for a usage in templates markup.
    If you want to create a Wijmo control in code, you should use a Wijmo <i>control</i>
    from a core module for this purpose, instead of a component. A core module has the same
    name as a corresponding Angular 2 interop module, but without the "angular2" word in the
    name. For example, this code creates a FlexGrid control in code:
    <pre>
import { FlexGrid } from 'wijmo/wijmo.grid';
let flex = new FlexGrid('#host_element');
    </pre>
</p>
<p>
    Note that we import FlexGrid control instead of WjFlexGrid component, and import it from
    the 'wijmo/wijmo.grid' module instead of 'wijmo/wijmo.angular2.grid'.
</p>

<h3>Adapting to different loader/bundler tools</h3>
<p>
    Let's consider specifics of adapting Wijmo to most popular module loaders and bundlers.
</p>
<h4>WebPack</h4>
<p>
    The only additional step required here is to include Wijmo css 
    (the Dist/styles/wijmo.min.css file from Wijmo download zip) in a bundle. 
    You should copy this file somewhere under the application's root and include it
    using standard WebPack means that you use for your own application's css: 
    <pre>
import 'style!css!wijmo/styles/wijmo.css';
    </pre>
    The style-loader and css-loader should be added to the "devDependencies" option of your
    application's package.json file:
    <pre>
"devDependencies": {
    "css-loader": "^0.23.1",
    "style-loader": "^0.13.1",
    ... another libraries
}</pre>
</p>

<h4>SystemJS Loader</h4>
<p>
    You have to map Wijmo ambient module names to Wijmo .js files in the node_modules folder, by
    adding the following config options that you pass to the System.config method call:
    <pre>
map: {
    'wijmo': 'node_modules/wijmo'
},
packages: {
    'wijmo': {
        defaultExtension: 'js'
    }
}</pre>
</p>

<h4>Angular CLI</h4>
<p>
    Refer to this <a href="https://www.grapecity.com/en/blogs/wijmo-and-npm" target="_blank">blog</a>
    for the step by step instructions.
</p>

<a name="ng2markup"></a>
<h3>Angular 2 Markup Syntax</h3>
<p>
    Refer to the <a href="static/angular2Markup.html">Angular 2 Markup Syntax</a> topic for the description.
</p>