<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. Module files are located in subfolders 
    of the <b>NpmImages</b> folder of Wijmo download zip. Each subfolder provides modules in a certain
    module format, like CommonJS or AMD, and is effectively an npm image that can be installed into
    your application using "npm install &lt;path to subfolder&gt;" command. Refer to the accompanying 
    readme.txt files in these folders for more details.
</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>Adding Wijmo to your Angular 2 Application</h3>
<p>
    Wijmo is not represented in npm registry. Instead, we ship npm images of Wijmo external modules
    in the <b>NpmImages</b> folder of Wijmo download zip, where the library can be installed from,
    using the conventional npm installation means ("npm install &lt;path_to_folder&gt;" command or
    a record in the "dependencies" option of the application's package.json file).
</p>
<p>
    The NpmImages folder contains subfolders like <b>wijmo-commonjs-min</b>, <b>wijmo-amd-min</b> and
    <b>wijmo-system-min</b>, which are standalone npm images representing Wijmo modules in
    different module formats (CommonJS, AMD and System respectively).
</p>
<p>
    A choice of a module format to use depends on the module loader and/or bundler tools
    that you use in your application. CommonJS format will work in most cases.
</p>
<p>
    So, you can install Wijmo into your application using "npm install &lt;path_to_folder&gt;" 
    command in NodeJS command prompt, like this:
    <pre>npm install ../wijmo_download/NpmImages/wijmo-commonjs-min</pre>
    This command will add the folder content to the node_modules/wijmo folder of your application.
</p>
<p>
    Alternatively, you can add the following record to the package.json file of your application:
    <pre>
"dependencies": {
    "wijmo": "../wijmo_download/NpmImages/wijmo-commonjs-min",
    … other libraries
}</pre>
    After that, each time you execute "npm install" command in your application root folder,
    Wijmo modules will be installed under the "node_modules" folder along with another libraries
    enumerated in package.json.
</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!../styles/vendor/wijmo.min.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>
    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 Angular CLI means that you use for your own application's css, namely
    by adding a reference to this file to the application's angular-cli.json file:
    <pre>
"apps": [
    {
        "styles": ["../styles/vendor/wijmo.min.css"],
    }
],
... other options
    </pre>
</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>