This content originally appeared on Telerik Blogs and was authored by Vyom Srivastava
In this blog post, we will cover best practices that the virtuous Angular developers use when implementing internationalized user interfaces.
If you have ever built a website or an app with different markets in mind, you know how challenging it can be to create a user experience that caters to users all over the world. Different cultures respond to various elements of user interface design in different ways. When developing a product with global audiences in mind, it is essential to consider these important details from the start.
Proper internationalization (i18n) from the very beginning can save you from potential pitfalls and support the future growth of your product. In this blog post, we’ll explore some of the most effective techniques for incorporating these principles into your Angular apps. Let’s get started!
Define Your i18n Strategy
Before you begin any implementation, you should first consider your i18n strategy. What languages do you need to support, and why?
Why is this important? It will help you to decide which components of the user interface you need to translate. This strategy will also inform how you approach the actual translation process. You’ll need to decide whether to translate your app’s strings with the assistance of a translation agency or if you want to do the translations in-house. If the former, you’ll need to decide how many translators to hire and what languages they should be fluent in.
Once you’ve decided which languages you need to support, you need to decide how to structure your application’s i18n configuration. The structure should be designed in a way that makes it easy for translators to find and edit the app’s strings.
Utilize Angular Pipes
When working with Angular, you’ll run into a lot of different pipes. These are typically used to format data so that it looks how you want it to. This is important to know because it can help you solve problems as they come up. Perhaps you need to format a date. Instead of fumbling with the code, you can just add a pipe to your template! Pipes in Angular can be used to transform data in various ways.
For example, the DatePipe can be used to format dates, the CurrencyPipe can be used to format currency values, and the UpperCasePipe can be used to convert strings to uppercase.
Pipes can be used in conjunction with the pipe (|) operator in template expressions. Here’s an example of a pipe operator—the operator in the template:
<p>The hero's birthday is {{ birthday | date }}</p>
This utilizes the same pipe as in the template as part of an in-line template in a component that helps to set the birthday value:
import { Component } from '@angular/core';
@Component({
selector: 'app-hero-birthday',
template: "<p>The hero's birthday is {{ birthday | date }}</p>"
})
export class HeroBirthdayComponent {
birthday = new Date(1988, 3, 15); // April 15, 1988 -- since month parameter is zero-based
}
The value of the component’s birthday flows through the pipe operator, | , to the date function. This is used in the template’s format for the birthday property, as well as the output of the date function in the template. The
date function is then used in the template’s output.
Translate Your App’s Branding Elements
Elements such as a company logo, color scheme and the app name are important parts of an application’s user experience. They represent the business and help users identify the app. If these elements are not translated, users who are not fluent in the language of the app will have a difficult time identifying and using the app.
You should translate as many branding elements as possible. This includes the app name, color scheme, logo graphics and any other important visual elements. In most cases, you should store the translated branding elements in a single file. This will allow you to load the translated branding elements into your app with a single line of code.
Use Platform-Appropriate and Language-Specific Characters
There are a few characters that are common to multiple languages, but many others are specific to a given language. When you decide to use a character in your app, you need to decide if it should be language-specific or platform-specific. You can use language-specific characters in places where there aren’t any cultural or linguistic implications.
For example, you can use language-specific characters in a label if the label contains dates or times. You can also use language-specific characters when you need to display a word or phrase that has a specific meaning. You should use platform-specific characters when there are no linguistic or cultural implications. A great example is the separator symbol between numbers in a date. You should also use platform-specific characters when there is no word or phrase that means what you need to convey. A good example is the percentage sign.
Use Enum
An enum is a useful tool for i18n. It can store the human-readable names of data that you use in your application. The data that is stored in an enum can be translated into multiple languages and displayed to users in their language. Enums are particularly useful for storing dates, currencies and other units of measurement.
You can create an enum with a name for each data unit, and then define the code for each unit in a separate class file. When a unit of data is referenced in your application code, you can use the enum’s name instead of the code. A simple example of enum in Angular:
Define enum keys in a separate JSON file:
export enum Test {
test1 = 'dropdown.doSomething.test1',
test2 = 'dropdown.doSomething.test2',
}
Then easily translate the value from enum with:
const enTranslations = {
dropdown: {
doSomething: {
test1: "1 - do something"
}
}
};
const getTranslatedText = (tranlations, keys: string[]) => keys.reduce((acc, curr) => acc[curr], translations);
const key1 = Test.test1
const translatedEnText = getTranslatedText(enTranslations, key1.split('.'));
The application can then display the unit of data in the user’s preferred language. Enums are helpful because they allow you to replace a number in your code with a human-readable name. This makes it easier to maintain your application.
Look into Other Angular i18n Libraries
Most i18n libraries have an open source codebase, are well maintained and have well-written documentation. As such, they provide a better user experience and can help you save time and money. If you decide to use an Angular i18n library, you don’t have to implement every best practice from scratch. You can take advantage of the time and effort made by the library’s developers and use their code as a starting point for your app.
There are a few i18n libraries for Angular. Many of them are still in the beta phase and are actively being developed. Because there are no set standards for i18n implementations in Angular, you should select an i18n library based on its functionality and community. Here are some of the popular ones:
- Ngx-translate (read our post about it)
- I18next
If you are looking for a professional UI component library with built-in internationalization options, look no further than Progress Kendo UI for Angular. Together with the Localization package, the Internationalization package provides robust globalization features of Kendo UI for Angular.
Final Words
The best practices listed in the article will help you create a robust i18n strategy that will serve your app well. Some of the best practices are specific to Angular apps, but others can be applied to web apps in general. All of these best practices are easy to implement, and they will make the i18n implementation process much smoother. You can also make use of Angular i18n libraries and component suites like Kendo UI for Angular.
This content originally appeared on Telerik Blogs and was authored by Vyom Srivastava
Vyom Srivastava | Sciencx (2023-01-03T08:13:01+00:00) Best Practices for Angular i18n. Retrieved from https://www.scien.cx/2023/01/03/best-practices-for-angular-i18n/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.