Hello Everyone! In today's video we'll look at how to build an Angular 2 dashboard in under five minutes. If you haven't watched our Getting Started videos, I highly encourage you to do so as this will walk you through project setup.
- Using multiple Wijmo Controls inside an Angular 2 Component
- Create a shared data source
- Bind Wijmo controls to shared data source
Code Snips
Our DataSvc
import { Injectable } from 'angular2/core';
@Injectable()
export class DataSvc {
getData(countries: string[]): any[] {
var data = [];
for (let i = 0; i < countries.length; i++) {
data.push({
country: countries[i],
downloads: Math.round(Math.random() * 20000),
sales: Math.random() * 10000,
expenses: Math.random() * 5000
});
}
return data;
}
}
app.ts
// required for beta
///
/** Requred Angular 2 Libraries **/
import {Component, View, EventEmitter, provide, Input, Inject, enableProdMode} from 'angular2/core';
import { CORE_DIRECTIVES } from 'angular2/common';
import { bootstrap } from 'angular2/platform/browser';
// Wijmo Input, FlexChart, and FlexGrid Modules
import * as wjInput from 'wijmo/wijmo.angular2.input';
import * as wjNg2FlexGrid from 'wijmo/wijmo.angular2.grid';
import * as wjNg2FlexChart from 'wijmo/wijmo.angular2.chart';
// Shared DataService
import { DataSvc } from './DataSvc';
@Component({
selector: 'app',
templateUrl: '/src/app.html',
directives: [wjInput.WjInputDate, wjInput.WjComboBox,
wjNg2FlexChart.WjFlexChart, wjNg2FlexChart.WjFlexChartAxis,
wjNg2FlexChart.WjFlexChartLegend, wjNg2FlexChart.WjFlexChartDataLabel, wjNg2FlexChart.WjFlexChartSeries,
wjNg2FlexGrid.WjFlexGrid, wjNg2FlexGrid.WjFlexGridColumn, CORE_DIRECTIVES] // Directives needed imported from common
})
export class AppCmp {
countries = 'US,Germany, UK, Japan, Greece'.split(',');
// Initialize data as a Wijmo Collectionview
data: wijmo.collections.CollectionView;
protected dataSvc: DataSvc;
constructor( @Inject(DataSvc) dataSvc: DataSvc) {
this.dataSvc = dataSvc;
// Bound data to a collectionView
this.data = new wijmo.collections.CollectionView(this.dataSvc.getData(this.countries));
}
}
bootstrap(AppCmp, [DataSvc]);
app.html
Select a Country:
Transcript
Hello Everyone, welcome to the building a dashboard using a shared dared data service with Wijmo and Angular 2. I am Ross Dederer, developer relations at GrapeCity. Let’s begin by creating a new application in Visual Studio 2015. I am going to name my project DashboardNg2. If you haven’t already I encourage you to check out our getting started videos. Add a new component to our src folder. This will require two files, an app ts and app html file. Inside App ts import the angular 2 libraries. For this dashboard, we will use a Wijmo input, Wijmo FlexChart, and Wijmo FlexGrid. So let's import those modules as well. Finally, let's import our Data service. Configure our component decorator selector with app, templateUrl to point to app html and import our CORE_DIRECTIVES. Next, we need to import our Wijmo input directives of combo box, a few from FlexChart, and a few from FlexGrid. Now let’s build our class and give it a default constructor. To complete the app ts structure, let's assign a root component of AppCmp and expose our Data service to it. Add a new Typescript class and call it DataSvc. This will be our shared data service. We need to import an injectable from Angular 2. Now let’s build our class. Inside our class create a getData function that returns an array. We can use a for loop to complete the model. I am going to give my getData function a simple string parameter to customize the data request. Back in our AppCmp class let's declare countries as a string. We can declare our data property a type of Wijmo.CollectionView. In our default constructor we need to inject DataSvc as a property type and then assign dataSvc to it. We need to initialize dataSvc to our parameter from our constructor. Visual Studio is going to point out my error here. Finally, we can instantiate data as a new Wijmo.CollectionView passing it our array from our dataSvc. Finally, we need to construct our view that will contain our three controls. Lets add a combo box bound to data displaying the country field. Add a FlexGrid bound to data and define each column manually in our markup. Lastly, add a FlexChart bound to data defining each of our three series manually. Set our default.html page as our start up page. Last but not least, add our component selector element to our main body. If we run the application, we can run through our dashboard. As we change the combo box value, the selected item in the grid updates. If we want to update values in our Grid, our Chart will update automatically. Thanks for watching. Learn more at Wijmo.com/angular2.
Read more about Angular 2 and other Wijmo controls.
GrapeCity