<!DOCTYPE html>
<html>
<head>
<title>Wijmo Angular2 sample</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<link data-require="bootstrap-css@*" data-semver="4.0.0-alpha.4" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" />
<script data-require="bootstrap.js@*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
<script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
<!-- 3.. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('wijmo.css').catch(function(err){ console.error(err); });
System.import('./app/app.module').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
/* set default grid style */
.wj-flexgrid {
height: 300px;
background-color: white;
box-shadow: 4px 4px 10px 0px rgba(50, 50, 50, 0.75);
margin-bottom: 12px;
}
#TreeView header change dynamically from Model
This sample demonstarte how the TreeView header can be changed from Model
# Wijmo for Angular 2 sample with external Wijmo modules
This sample can be used as a base for creating examples
with Wijmo components for Angular 2.
All the Wijmo modules are immediately available for a usage without any
additional setup. Just add corresponding 'import' statements
to to the code file (app.ts). For example:
// Import core (non-Ng2) FlexChart control
import { FlexChart } from 'wijmo/wijmo.chart';
// Import Chart NgModule
import { WjChartModule } from 'wijmo/wijmo.angular2.chart';
When importing Wijmo Ng2 NgModule(s), don't forget to add them
to the @NgModule.imports array at the end of the app.ts file.
## Switching between pre-release and Release Wijmo versions
The sample is set up to use the latest Wijmo Release bits
by default.
You may easily switch to the latest pre-release bits by uncommenting
the other **wijmoUrl** variable declaration in the first lines of
the systemjs.config.js file.
You may also change the Angular 2 version used by the sample
in the **ngVer** variable declaration in systemjs.config.js.
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"typeRoots": [
"../../node_modules/@types/"
]
},
"compileOnSave": true,
"exclude": [
"node_modules/*",
"**/*-aot.ts"
]
}
/**
* PLUNKER VERSION
* (based on systemjs.config.js in angular.io)
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
// Ng2 version
var ngVer = '4.4.0-RC.0';
/// Wijmo code URL, incomment one of the wijmoUrl var declarations.
// uncomment to use the latest pre-release version
//var wijmoUrl = 'http://prerelease.componentone.com/wijmo5/';
// uncomment to use the latest Release version
var wijmoUrl = 'http://cdn.wijmo.com/5.';
var wijmoNpmImageUrl = wijmoUrl + 'latest-npm-images/wijmo-amd-min';
var wijmoCssUrl = wijmoUrl + 'latest/styles/';
System.config({
// DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
transpiler: 'ts',
typescriptOptions: {
tsconfig: true
},
meta: {
'typescript': {
"exports": "ts"
},
'*.css': { loader: 'css' },
},
paths: {
// paths serve as alias
'npm:': 'https://unpkg.com/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'@angular/core': 'npm:@angular/core@' + ngVer + '/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common@' + ngVer + '/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler@' + ngVer + '/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser@' + ngVer + '/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@' + ngVer + '/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http@' + ngVer + '/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router@' + ngVer + '/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms@' + ngVer + '/bundles/forms.umd.js',
'@angular/upgrade': 'npm:@angular/upgrade@' + ngVer + '/bundles/upgrade.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
'ts': 'npm:plugin-typescript@4.0.10/lib/plugin.js',
'typescript': 'npm:typescript@2.0.3/lib/typescript.js',
// Wijmo
'wijmo': wijmoNpmImageUrl,
'wijmo.css': wijmoCssUrl + 'wijmo.min.css',
'css': 'https://unpkg.com/systemjs-plugin-css/css.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
},
wijmo: {
defaultExtension: 'js',
// we need this to work around cross-origin issue on cdn.wijmo.com
meta: {
'*': {'scriptLoad': true}
}
}
}
});
})(this);
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
'use strict';
import * as wjcCore from 'wijmo/wijmo';
import { Injectable } from '@angular/core';
// Common data service
@Injectable()
export class DataSvc {
getData(count: number): wjcCore.ObservableArray {
var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
data = new wjcCore.ObservableArray();
for (var i = 0; i < count; i++) {
data.push({
id: i,
country: countries[i % countries.length],
date: new Date(2014, i % 12, i % 28),
amount: Math.random() * 10000,
active: i % 4 == 0
});
}
return data;
}
}
import { Component, EventEmitter, Input, Inject, enableProdMode, NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserModule } from '@angular/platform-browser';
import { WjNavModule } from 'wijmo/wijmo.angular2.nav';
import { WjGridModule } from 'wijmo/wijmo.angular2.grid';
import { WjInputModule } from 'wijmo/wijmo.angular2.input';
import { WjGridFilterModule } from 'wijmo/wijmo.angular2.grid.filter';
// NOTE: if you add imports of another Wijmo Ng2 modules,
// don't forget to add imported Wijmo NgModule(s)
// to the @NgModule.imports array at the end of this file.
// Import Service
import { DataSvc } from './services/DataSvc';
// Import Component
import {AppComponent} from './app.component';
@NgModule({
imports: [WjInputModule,WjNavModule,WjGridModule, WjGridFilterModule, BrowserModule, FormsModule],
declarations: [AppComponent],
providers: [DataSvc],
bootstrap: [AppComponent]
})
export class AppModule {
}
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
import { Component ,Inject,ViewChild } from '@angular/core';
import { DataSvc } from "./services/DataSvc";
import * as wjcCore from 'wijmo/wijmo';
import * as wjcGrid from 'wijmo/wijmo.grid';
@Component({
selector: 'my-app',
templateUrl:'./app/app.component.html'
})
export class AppComponent {
protected dataSvc: DataSvc;
data: wjcCore.CollectionView;
constructor(@Inject(DataSvc) dataSvc: DataSvc ) {
this.dataSvc = dataSvc;
this.data = new wjcCore.CollectionView(this.dataSvc.getData(10));
}
changeSource(){
this.data = new wjcCore.CollectionView(this.dataSvc.getData(20));
}
}
/*
Copyright 2017 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
<button type="button" class='btn btn-info' (click)="changeSource()">change source</button>
<wj-flex-grid [itemsSource]="data">
<wj-flex-grid-column [header]="''" [isReadOnly]="true" [width]="30">
<ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell">
<input class="wj-cell-check" type="checkbox" #isChecked (click)="onMultipleSelectedItem(cell, $event)"/>
</ng-template>
</wj-flex-grid-column>
<wj-flex-grid-column [header]="'Country'" [binding]="'country'" [width]="'*'"></wj-flex-grid-column>
<wj-flex-grid-column [header]="'Date'" [binding]="'date'"></wj-flex-grid-column>
<wj-flex-grid-column [header]="'Revenue'" [binding]="'amount'" [format]="'n0'"></wj-flex-grid-column>
<wj-flex-grid-column [header]="'Active'" [binding]="'active'"></wj-flex-grid-column>
</wj-flex-grid>