2

I am new to Angular2 and trying to develop an application from the scratch. In that application, I would need to extensively use controls like Scheduler, Grids, Charts along with other controls. I have been looking into google and came across Syncfusion, Kendo UI, DevExtreme etc but unable to come to conclusive solution. Please suggest what Thrid party UI control should I use. My basic needs are -

  • Performance

  • Very good Documentation

  • Easily available support from the specific company as well as from community of people who are using the same.

  • Lazy Loading

  • Easily available way to customize the controls to some extent if needed.

Anirban Paul
  • 1,065
  • 1
  • 16
  • 22
  • Try bootstrap. If you are inclined towards material, try MDC for Web . Dont go with angular-material. Kendo UI looks best but not free – Vamshi Jul 12 '17 at 05:44
  • Hey, Thank you very much for reply.We can pay for the licensing, we just need the best third party control which will give us all the above mentioned features. Also Does bootstrap provide controls like Kendo/syncfusion ? – Anirban Paul Jul 12 '17 at 05:59
  • I did compare all of them except bootstrap, I felt Kendo UI is just amazing. They have all the features like AOT , modular ( you can import only those you need to use ) , they have charts etc ., good support and good looking too . If you can pay , I think it is the best ! – Vamshi Jul 12 '17 at 06:06
  • You can also check this question https://stackoverflow.com/questions/41235629/ng2-devextreme-vs-telerik-kendo-ui/42808893 – Alexander Bykov Jul 12 '17 at 10:40
  • I've tried Kendo, Wijmo and DevExpress (DevExtreme). Kendo for Angular 2 was just not ready for prime time when I used it. Wijmo and DevExtreme were both better and I like DevExtreme's look and feel though it does have a dependency on JQuery – Trevor de Koekkoek Jul 15 '17 at 09:28

2 Answers2

6

You can use Syncfusion's next generation JavaScript components. Essential JS 2

These components are fully developed in TypeScript and has full native support for Angular features like Ahead Of Compilation and Tree-Shaking. Using tree-shaking you can exclude the unused features of a control like Grid, Chart etc from your production bundle.

Controls are fully open source and hosted in GitHub under Syncfusion Community license. Also, it will satisfy your mentioned basic needs i.e., Performance, Support, Lazy loading and customization. and its documentation is keep on improving with in current month it will have full documentation.

Please refer the following links

http://ej2.syncfusion.com/angular/documentation/
http://ej2.syncfusion.com/angular/demos/
https://github.com/syncfusion?q=ej2

EDIT Currently only Grid, Chart and other supportive components are available. Scheduler is already in our roadmap and started progressing it which will be available in any of our upcoming release.

Bharath
  • 797
  • 6
  • 14
  • Hi, Thaks for the reply. But so far I have encountered two code blocks/github links given in documentation that does not work. e.g, webback angular seed. - this is not working. So I am not sure about documentation! – Anirban Paul Jul 14 '17 at 03:50
  • Is there any community of Syncfusion where I can expect a quicker reply ? because if I raise an incident in Syncfusion, it takes at least 24 hrs to get a reply. So is there any user's forum atleast where some other user may help me to resolve the issue quickly ? – Anirban Paul Jul 14 '17 at 03:52
  • @AnirbanPaul can you point me in which documentation page you have encountered problem. I can get it resolved ASAP. – Bharath Jul 14 '17 at 03:57
  • https://help.syncfusion.com/angular/gettingstarted/getting-started-webpack – Anirban Paul Jul 14 '17 at 04:03
  • can you please also guide me how to incorporate syncfusion datagrid in a existing webpack angular project ? Basically I am looking for steps so that once I am successful to incorporate the grid control , I would have a fair idea about how to incorporate any other syncfusion control in angular 2 webpack project – Anirban Paul Jul 14 '17 at 04:11
  • You can use stackoverflow, GitHub issues or Syncfusion forums where Syncfusion continue monitoring it and provide solution for it. Also, others could post response for it. – Bharath Jul 14 '17 at 04:23
  • I have reported concern team to look into document integrity. It will get resolved asap. If you are just getting started with Syncfusion Grid control. I suggest you to try our next generation JavaScript controls [Essential JS 2](http://ej2.syncfusion.com/angular/documentation/common/getting-started.html). To integrate it in your webpack application it doesn't require any special configuration, it will start working like any other npm module.The Getting Started document link you have given is for Essential JS version 1. I will check and give more information on integrate it with webpack asap. – Bharath Jul 14 '17 at 04:31
  • Thanks a lot. for Essential JS2, getting started does not contain steps related to Webpack. It would be really helpful if you can provide some guidance regarding the same. – Anirban Paul Jul 14 '17 at 05:02
  • @AnirbanPaul Essential JS 2 for Angular does not have any special steps for Webpack, it will just work. The [Getting started document](http://ej2.syncfusion.com/angular/documentation/common/getting-started.html) uses Angular CLI for illustration which use Webpack for compiling and bundling. – Bharath Jul 14 '17 at 05:09
  • I am new to Angular 2 environment, apologies If I am missing something basic. Following is what I am trying to - – Anirban Paul Jul 14 '17 at 09:35
  • I am new to Angular 2 environment, apologies If I am missing something basic. Following is what I am trying to - 1> I have taken a angular 2 project (using webpack for compiling and bundling). This project is working fine. 2> Opened this project in Visual Studio Code. 3> View > Integrated Terminal and run the following as mentioned in Getting Started page npm install @syncfusion/ej2-ng-buttons –save But I am getting error . So is there any step that I am missing ? – Anirban Paul Jul 14 '17 at 09:42
  • can you share `npm-debug.log` that has been generated in same folder? – Bharath Jul 14 '17 at 12:33
  • Hi, Sorry for late reply. That issue is sorted now. I am able to incorporate button in our project following the getting started project. But now I am stuck with grids. http://ej2.syncfusion.com/angular/documentation/grid/getting-started.html accroding to this link, Syncfusion ej2-ng-grids packages need to be mapped in systemjs.config.js configuration file. How should I configure the same in webpack? please help. – Anirban Paul Jul 20 '17 at 01:48
  • Hi @AnirbanPaul, Webpack will resolve the modules implicitly. Hence there is no need for any special configuration to load Syncfusion `ej2-ng-grids` package, it will resolved by webpack implicitly. Please refer the this link https://github.com/Madhust/ej2-grid-angular-webpack for simple project with `ej2-ng-grids` configured – Madhu Jul 20 '17 at 12:27
  • Hi, Thanks for the sample project. Its working. But I am new to angular 2, and normally I started all the projects by "npm start", but here we are giving command "npm run serve". Can you please help me to understand when to use what ? – Anirban Paul Jul 24 '17 at 01:12
  • Hi @AnirbanPaul, NPM supports scripts object in the `package.json` file. NPM scripts can be either default or custom one. `npm start` is a one of the default scripts which will start the `server.js` file in the root folder if any present. You can refer to https://docs.npmjs.com/misc/scripts for using scripts object in package.json which will provide information on using default scripts and custom scripts. – Madhu Jul 24 '17 at 10:48
  • Previously to run the sample, we have used custom script `serve` in the `package.json` file as `"scripts": { "serve": "npm run rmf && npm run build & npm run bundle & npm run dev" }` for your convenience now we have changed the sample to run in the `start` command, please refer to the commit https://github.com/Madhust/ej2-grid-angular-webpack/commit/9cad983cdd3352cbe37ce65d3e7a9ecdc93195d4#diff-b9cfc7f2cdf78a7f4b91a753d10865a2L11. – Madhu Jul 24 '17 at 10:48
  • Hi, Thanks a lot. This is working fine in Google chrome. In internet explorer, I am getting a message like the following - "JavaScript critical error at line 33925, column 17 in http://localhost:3002/dist/app.js\n\nSCRIPT1002: Syntax error" – Anirban Paul Jul 25 '17 at 10:33
  • Hi @AnirbanPaul, previously the sample was using Typescript compile target as es6, IE don’t support major ES6 features and hence it was not rendered in IE. We have changed the compile target to es5 now the sample will render properly in IE, please check the commit detail https://github.com/Madhust/ej2-grid-angular-webpack/commit/3ee3556646133d3dd430c8220492e73d71bdb149#diff-e5e546dd2eb0351f813d63d1b39dbc48L8 – Madhu Jul 27 '17 at 12:40
  • @Madhu, thanks for the link. It is working. Is there any way to apply average/max/min/Sum etc operators on a numeric field during group by and displaying the result in the grid itself ? I mean if there are 3 columns (A-string, B-string, C- numeric) is there any way perform Sum on column C when user performs group by on Column A or Column B? – Anirban Paul Jul 31 '17 at 05:19
0

Use Primeng along with angular2 material components as both are compatible. Both has very good documentation, supports lazy loading and customizing the components is just of matter of changing css.

Please refer to the links below :

https://www.primefaces.org/primeng/#/

https://material.angular.io/components

user1188867
  • 3,726
  • 5
  • 43
  • 69
  • Hi, Thanks for the reply. We are using Bootstrap. Please suggest some 3rd party control that works with Bootstrap. – Anirban Paul Jul 12 '17 at 06:53
  • I never used bootstrap with primeng. I think primeng will work with bootstrap as it is based on jquery UI. I use angular2 material for basic components like input text, select, checkbox etc and Primeng for advanced components. Both have theming support or we can use CSS to customize styling and are easily upgradable to angular 4 as well. – user1188867 Jul 12 '17 at 07:53