Wijmo5 FlexGrid Basic Tutorial (vii) "ANGULAR2 Create HTML5 Input Controls" __html

Starting with the 2016 V1 version, the Wijmo UI control supports angular 2. Wijmo 2016 v1 strong release, full support angular 2! This article describes using ANGULAR2 to create a html5/typescript based input control.
Steps:

1. Create a project using the Visual Studio HTML application.

2. Delete Index.html,app.ts and app.css files.

Select Typescript Project Settings, specify COMMONJS as the project model system, and, in order to get Angular2 and libraries, Add. json files to the app's root directory. Copy angular2 start content, this part is Visual Studio automatic. Locate all libraries in the node_modules. Add the Default.html page to the project's root node. Add references, ANGUALR2 libraries, Wijmo control references. The code is as follows:

<script src= "Http://code.jquery.com/jquery-2.0.0.min.js" type= "Text/javascript" ></script> <script Src= "Http://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js" type= "Text/javascript" ></script > <!--shims, polyfills, angular 2--> <!--IE required polyfills, in this exact order--> <script " Node_modules/es6-shim/es6-shim.min.js "></script> <script src=" node_modules/systemjs/dist/ System-polyfills.js "></script> <script src=" Node_modules/angular2/es6/dev/src/testing/shims_for_ Ie.js "></script> <script src=" Node_modules/angular2/bundles/angular2-polyfills.js "></script > <script src= "node_modules/systemjs/dist/system.src.js" ></script> <script src= "node_modules/" Rxjs/bundles/rx.js "></script> <script src=" Node_modules/angular2/bundles/angular2.dev.js "></ script> <!--wijmo--> <script src= "scripts/vendor/wijmo.min.js" type= "Text/javascript" &GT;&LT;/SCRIPT&GT <script src= "Scripts/vendor/wijmo.input.min.js" type= "Text/javascript" ></script> <!--Wijmo Angular2 --> <script src= "scripts/vendor/wijmo.angular2.min.js" type= "Text/javascript" ></script> <script >//<!

[cdata[system.config ({packages: {' src ': {defaultextension: ' js ',},},}); ]]></script> <script>//<!

[cdata[system.import ('/src/app '); ]]></script>

Configure SYSTEMJS and locate ANGUALR2.

3. Configure the project structure.

Add three files: Scripts,styles and src folders (used to contain the components we use); Open Explorer, add 2 folders: Vendor and definitions (define APIs and internal models that contain WIJMO controls). Copy the Angualar2 collection JS file from the interop Wijmo package to the vendor path. Copy the D.ts file from interop to the newly created folder. Finally, copy the underlying style. Return to Visual Studio, and then add all the styles and scripts to the project.

Now that the project has been created, add the app component to the SRC folder. Add a new Typescript class and component template. Import a small number of angular models into our components and create a new TS class that is also imported. Import the Wijmo input control. First, define decorators and metadata so that the component can be used anywhere in the extension. Import references in src/app.html, the necessary code:

app.ts

Import {Component} from ' Angular2/core ';
Import {core_directives} from ' Angular2/common ';
Import {bootstrap} from ' Angular2/platform/browser ';
Import * as Wjinput from ' wijmo/wijmo.angular2.input ';
@Component ({
selector: ' app ',
templateurl: '/src/app.html ',
directives: [Wjinput.wjinputdate, Core_ Directives]//directives needed imported from common
})
Export class App {
}
bootstrap (app, []) C14/>app.html

Wijmo Input Date control.