How to integrate Wijmo5 with Angular 11?

How to integrate Wijmo5 with Angular 11?

Posted by: pooja.bansal on 13 April 2021, 6:18 pm EST

• 

  pooja.bansal

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 13 April 2021, 6:18 pm EST

  Earlier we were using Wijmo 3.2 in our project (Angular 11) with the following references in angular.json-
  
  “projects/abc/src/scripts/jquery.wijmo-open.all.3.20201.155.min.js”,
  
  “projects/abc/src/scripts/jquery.wijmo-pro.all.3.20201.155.min.js”,
  
  “projects/abc/src/scripts/jquery.wijmo.wijribbon.min.js”,

  Now, we need to upgrade it to Wijmo5. So now, how we can get above files and do the settings in angular.json to make Wijmo5 working with Angular 11?

  Do we also need jquery and jquery UI along with this? If no, then do we need to replace the methods of jquery which we were using with Wijmo3.2?

  Regards
  
  Pooja Bansal

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 14 April 2021, 9:31 pm EST

  Hi,

  Wijmo5 has 0 dependencies. We can use it without jQuery, jQueryUI, or any other frameworks. References like wijmo-open.all.3.20201.155.min.js, jquery.wijmo-pro.all.3.20201.155.min.js, jquery.wijmo.wijribbon.min.js were all required by Wijmo 3 and no longer required in Wijmo 5.
  
  The API for Wijmo 5 is changed as compared to wijmo3, so old methods of jquery which were used for Wijmo 3, will not be supported in Wijmo 5. To upgrade the current project to wijmo5, we need to perform the following task:
  
  Add the minimal set of files required by any Wijmo application:
  
  • wijmo.js/wijmo.min.js: Contains the Wijmo 5 infrastructure including the Globalize, Event, Control, and CollectionView classes.
  
  • wijmo.css: Contains the CSS rules used for styling all Wijmo controls.

  In addition to these, include one or more additional files, depending on which components we are using:
  
  • wijmo.nav.js: Contains navigation controls, including TabPanel, Ribbon and TreeView.
  
  • wijmo.grid.js: Contains the FlexGrid control.
  
  • wijmo.chart.js: Contains the FlexChart and FlexPie controls.
  
  • wijmo.input.js: Contains several input controls, including ComboBox, AutoComplete, InputDate, InputTime, InputNumber, InputMask, ListBox, Menu, and Calendar controls.
  
  • wijmo.gauge.js: Contains several gauge controls, including LinearGauge, RadialGauge, and BulletGraph.
  
  • wijmo.culture.[CultureName].js: Contains culture-specific files used to develop applications in languages other than American English.
  
  • wijmo.theme.[ThemeName].css: Contains CSS rules used to customize the appearance of the Wijmo controls.

  Wijmo includes interop modules that allow us to use the controls as native components:
  
  • wijmo.angular.js: Contains directives that encapsulate Wijmo controls in AngularJS applications.
  
  • wijmo.angular2.js: Contains components that encapsulate Wijmo controls in Angular applications

  For further information on referencing wijmo, please refer to the below document:
  
  https://www.grapecity.com/wijmo/docs/GettingStarted/Referencing-Wijmo

  ~sharad