JHipster announced it’s new release 4.6 version on yesterday. This includes some of the major improvements such as Angular 4.0 support, upgrade Gradle 4 and RTL support.Let us see one by one. You can upgrade in both automatic and manual ways.
- Upgrade your version of JHipster:
yarn global upgrade generator-jhipster
2. Run the upgrade sub-generator:
1.Upgrade your JHipster version
yarn global upgrade generator-jhipster
2. Remove node_modules folder and run the below command to make sure it is not using older version.
3. Upgrade the entities in your project (Optional)
PrimeNG DataTable is the most popular and complex component with it’s vast features. In real-time applications, we will use HTTP module to retrieve the data from remote data sources. Most of the time we will imagine that the result JSON structure would be interpreted as flatten type.
For example, the list of browser model object’s JSON structure would be written as follows,
"browser": "Internet Explorer 4.0",
"platform": "Win 95+",
//More data goes here....
Then we will directly use the JSON key values as dataTable field attributes as below,
<p-column field="engine" header="Engine"></p-column>
<p-column field="browser" header="Browser"></p-column>
<p-column field="platform" header="Platform"></p-column>
<p-column field="grade" header="Grade"></p-column>
Angular 4.2 was released three weeks back itself. The community aware of this release and upgraded in their many projects as well. But from my observation, the release specific features are still not used in most of the projects. Even though this release is not a major one there are many useful features to the Angular community. This release is mainly concentrated on Animation package if you look at the official change log.
The main features of Angular 4.2 release are
The Angular form inputs support validators such as min and max attributes
The ApplicationRef bootstrap method allows bootstrapping the component directly
Enhance i18n tooling such as MissingTranslationStrategy and location notes in translation files.
- The first step on AOT component’s testing approach
- Introduce flag to always compile the generated code.
- Animation options and input params
- The animation() function for reusable animations
- Query for inner elements within animations
- Staggering multiple elements
- Enabled queried elements
- Routable animations
- Programmatic animations using AnimationBuilder
Let’s dive into them one by one. First we will start with generic features in a quick tour.
TypeScript team announced 2.4 version with four major improvements
- Dynamic Import Calls
- Weak Types
- String Enums
- Safter Callback Parameters.
Angular 4.0 major version was released exactly two months back (i.e, March 2017) by following the semantic versioning process. Thereafter many minor releases came out and will continue till the next major release 5.0 which will expected to release on Sept 2017. PrimeNG releases also in-synch with the Angular major releases. PrimeNG 4.0 was released immediately(First week of May 2017) with 100+ improvements which includes new components, features, defect fixes and accessibility support for keyboard and screen readers. PrimeNG development is quite active and rapid, due to this nature there will be another major release with +60-80 improvements in the couple of days.
PrimeNG 4.1 release going to ship with new components, new features, defect fixes, performance improvements on accessibility support for keyboard and screen readers. To make the community users aware about all changes in one place there is a detailed Github project available here.
The internationalization(i18n) support place a significant role in the web applications to improve the user base from different regions and languages. “Internationalization is the process of designing a software application so that it can potentially be adapted to various languages and regions without engineering changes”. Officially, Angular team supports this internationalization using i18n tools.Internally it uses ngx-i18n tools for the template translation. The entire process involves four phases:
- Identify the messages: Initially mark the static text messages in your component templates.
- Generate standard translation files: Extracts the marked messages into an industry standard translation source file(XLIFF and XMB formats).
- Translating the messages: Translating the extracted text messages into the target language by Translator tool.
- Complete the translation files: Angular compiler imports the compiled translation files and replace the original text with translation text files. Finally it creates translation files based target language.
There are many other libraries exists as an alternative. Among all those libraries, ngx-translate is the most popular one.