Angular’s official internationalization(i18n) support

In the previous blog post series, we have seen how to achieve the internationalization support using ngx-translate library. Please read this post if you didn’t read yet. In this blog post, you will see how to achieve it through Angular’s official i18n tools.  “Internationalization is the process of designing a software application so that it can potentially be adapted to various languages and regions without engineering changes”. Angular uses ngx-i18n tools to support internationalization. The process involves four steps.

  1. Identify the messages: Initially mark the static text messages in your component templates.
  2. Generate standard translation files: Extracts the marked messages into an industry standard translation source file(XLIFF and XMB formats).
  3. Translating the messages: Translating the extracted text messages into the target language by Translator tool.
  4. 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.

The demo example is powered by PrimeNG components and the internationalization support for German and Spanish languages. You can close the Github URL to play with the features.

Continue reading

What’s new in JHipster 4.6 release

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.

AutoUpgrade:

  1. Upgrade your version of JHipster:

  2. Run the upgrade sub-generator:


Manual upgrade:


1.Upgrade your JHipster version

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)

Continue reading

Nested JSON structure usage with PrimeNG DataTable

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,

Then we will directly use the JSON key values as dataTable field attributes as below,

Continue reading

Angular 4.2 release: General and Animation features

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

Generic features:

  • 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 Features:

  • 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.

Continue reading

What’s new TypeScript 2.4

This is my first blog post on TypeScript open source programming language. I really impressed with the TypeScript benefits after working with Angular framework for quite some time. Of course, it is also very popular in other JS based frameworks such as ExpressJS, ReactJS, VueJS and so on. If you have prior knowledge on Object-Oriented Programming(OOPs) based languages(for example, java) then you feel that TypeScript is really simple with it’s known concepts and terminology. The static type-checking nature introduced compile -time error checks(no more surprise on runtime errors) and great tooling support with IntelliSense to this dynamic type JavaScript world.

“TypeScript is a superset of JavaScript that brings static types and powerful tooling to JavaScript”

TypeScript team announced 2.4 version with four major improvements

  1. Dynamic Import Calls
  2. Weak Types
  3. String Enums
  4. Safter Callback Parameters.

Continue reading

What’s new in PrimeNG 4.1 release

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.

Continue reading

Angular and PrimeNG i18n using ng2-translate

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 translationThe entire process involves four phases:

  1. Identify the messages: Initially mark the static text messages in your component templates.
  2. Generate standard translation files: Extracts the marked messages into an industry standard translation source file(XLIFF and XMB formats).
  3. Translating the messages: Translating the extracted text messages into the target language by Translator tool.
  4. 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.

Continue reading