Welcome to the Wijmo Input control,an HTML5 and TypeScript-based input control you can use in an Angular 2 application!

In this video, we’ll learn how to:

  1. Configure Visual Studio 2015
  2. Use NPM to get Angular2 and accompanying libraries
  3. How to setup project structure for development
  4. Build an Angular 2 component
  5. Display a Wijmo Input control

If you haven’t already downloaded Wijmo, get your fully-featured watermarked trial now.

Code Snips

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, []);

app.html

Wijmo Input Date Control.

Script references in default.html

<script src="http://code.jquery.com/jquery-2.0.0.min.js" type="text/javascript"></script>
<script src="https://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 src="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"></script>
<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>

Transcript

Welcome to Getting Started with Input using Wijmo and Angular 2. I’m Ross Dederer, Development Relations at GrapeCity.

Today we’re going to walk through how to add Wijmo Input to a new application. In this video, we’ll be using Visual Studio 2015 with Intellisense and TypeScript, but you can use command line or other editors.

First, create a new application using Visual Studio’s HTML Application with TypeScript project template. I’ll call it InputAngular2.

Next, remove the index.html, app.ts, and app.css files. Go to TypeScript project settings and specify CommonJS as the project module system.

To get Angular 2 and its libraries, add a package.json file to the root of our app.

Copy the contents found in the Angular 2 quickstart manual. That instructs Visual Studio to get the libraries automatically. Place all libraries in node_modules.

Add a default.html page to the root of the project. Add references to Angular 2 and libraries as described in the quickstart manual.

Add references to Wijmo controls and the angular2 interop file.

Add references to any CSS files, as well.

Configure systemJS. Place the Angular 2 component in the src folder.

Next we’ll configure the project structure.Add three folders: one for scripts, where we’ll place the Wijmo controls. One for styles. And one for the src folder, which will contain our component.

Open the project in Windows File Explorer next to the Wijmo download package. Add two folders to scripts: one called vendor, and one called definitions. Definitions will describe the API of the internal modules contain the Wijmo controls. Vendors will contain the code for the controls themselves.

Copy the Wijmo.Angular2 interop JS file into the Vendors location from the Interop Wijmo package. Copy the d.ts files from interop into a newly created folder in node_modules called Wijmo. Finally, copy the base style.

Go back to Visual Studio and include everything in styles and scripts into the project. Note that we didn’t include the Wijmo folder from node_modules.

Now that our project is set up, add the app component to the src folder. Add a new typescript class and a companion template. We can remove the html code.

Import a few Angular2 modules into our component.

A Data Service is required to get the data, so create a new TS class and import that, as well.

We’re ready to import Wijmo Input. First, define decorators and MetaData so that the component can be placed anywhere that it’s called in the markup.

Expose the directives to our component from Wijmo FlexChart. We’ll define our decorators and MetaData such that it will place this component anywhere were it sees app, loading the markup found in src/app.html. Finally, we’ll pass expose some directives to our component from Wijmo’s Input

Run the application.

Read more about Angular 2 and Wijmo