Use Wijmo as an Angular library
WARNING: This is a Google translated (originally Chinese) and reposted article that probably is mostly comfortably understandable for senior JavaScript developers.
Last time I played Angular * Atom environment, how to put Wijmo of GrapeCity . Since it is a niche content and who has a feeling of anyone, I am summarizing it because I am organizing my own environment.
Wijmo
What is it?
Although I often ask for grid display when doing a business application, I found that I was looking for paid vision because many & delicious libraries that did not see good results by making the grid with full scratch are also quite delicate. As an overview
GrapeCity's Angular / React / Vue.js / TypeScript compatible JavaScript library. Supports business application development with UI control such as data grid, chart, input and printing.
A library of UI controls called. License is a subscription form with development license paid, 1 user at 2018/12
- First year @ 120,000 yen (excluding tax)
- Update year @ 48,000 yen (excluding tax)
It is awful thing that it is not easy to put it in a bit. But it is cheap if you think about man-hours to make parts such as calendar input and numerical value input as well as man-hours to make grid. Regarding distribution
Distribution license will be granted to the user (developer) who registered the subscription. The distribution license of Wijmo is runtime free. It can be freely distributed according to the license agreement.There are no limitations on the number of applications and Web sites to develop, the number of users and devices connected. Also, at the time of distribution, acquisition and setting of the license key is necessary, but it does not cost extra.
Feeling.
Reason
This time it adopted this time that it is a major company called GrapeCity that you do not know much about the library that can be used with Angular in the first place. It was decided that there was another grid of header rows . I think that it would be even better if there was anything like discounted by the number of contractors. Incidentally, there is a trial it is possible to try it by trial.
Installation method
Installing the npm package
It seems that it seems that it was the procedure of downloading npm images and installing from there before, but it seems that it became possible to use npm command. Especially if you do not select a version, there is no problem with the latest version, so go to the MyAppdirectory at the terminal
npm install wijmo --save
Implementation
Basically following the contents of here , the rough procedure of the grid implementation example below.
Read style.css and language files for wijmo
Wijmo's various component designs as css are required wijmo.min.cssfor Japanese notation such as calendar and monetary amount wijmo.culture.ja.min.js. Both when it from the official of the Quick Start articles wijmo.min.css from this link and, Wijmo.Culture.Ja.Min.Js from this link can DL a. In the Dist directory if you are DLing a trial version
wijmoentEval2018v3 / Wijmo5EntEval - 5.20183.550 / Dist / styles / wijmo.min.css
wijmoentEval2018v3 / Wijmo5EntEval_5.20183.550 / Dist / controls / cultures / wijmo.culture.ja.min.js
srcInstalled in the directory in the Angular application created using . MyAppTo be right under .angular-cli.json angular.json Edit the file as follows.
// ≈ Omission ≈
"styles" : [
"src / styles.scss" ,
"src / wijmo.min.css"
],
"scripts" : [
"src / wijmo.culture.ja.min.js"
],
/ / ≈ Omission ≈
Implementation on screen
Module addition
MyApp/src/app/app.module.ts Import module used in grid to.
import { BrowserModule } from '@ angular / platform-browser' ;
import { NgModule } from '@ angular / core' ;
import { AppComponent } from './App.Component' ;
import { WjGridModule } from 'Wijmo / Wijmo.Angular2 .grid ' ; <- add this
@ NgModule ({
declarations : [
AppComponent
],
imports : [
BrowserModule ,
WjGridModule <- add this
],
providers : [],
bootstrap : [ AppComponent ]
})
export class AppModule { }
Component editing
MyApp/src/app/app.component.tsAdded data to use in the grid. If you are actually going to operate it, this data part will be the value you have mostly obtained from the DB.
import { Component } from '@ angular / core' ;
@ Component ({
selector : 'app-root' ,
templateUrl : './app.component.html' ,
styleUrls : [ './app.component.scss' ]
})
export class AppComponent {
title = 'app' ;
Data = [ <- This add
{ No : 0 , product name : '100% fruit juice grape' , Order Date : New Date ( '2017/7/14' ), the amount : 42560 , discount : True },
{ No : 1 , product name : 'best macaroni' , order Date : New Date ( '2013/10/20' ), amount : 26,880 , discounts : True },
{ No: 2 , trade name : '100% fruit juice Peach' , Order Date : New Date ( '2016/9/10' ), amounts : 5100 , discount : False },
{ No : 3 , trade name : 'fresh butter' , order Date : New Date ( '2014/4/22' ), amounts : 8400 , discount : False },
{ No : 4 , product name : '100% fruit juice lemon', Order Date : New Date ( '2013/4/21' ), the amount : 25200 , discount : False }
];
}
Screen display
MyApp/src/app/app.component.html As you can erase all the contents originally described in.
Completion
That's it. npm startThen localhost:4200the grid of the top image is displayed. I do not know, it will be checked by arbitrary set of bool values.
In order to implement at the operation level, it is necessary to control more and more infinitely, so we are separately concerned about that point. I will update Angular CLI first of all .