Internationalization is also referred as i18n. By using this we can use our project in different locals around the world. Internationalization (i18n) is a must required feature for any modern web application. Internationalization enables the application to target any language in the world. In simple word it is the process of supporting multiple languages in your applications.
Angular provides us with a set of built-in functionalities to deal with internationalization (i18n). For example –
- Displaying dates, numbers, percentages in local formats.
- Translating text in component templates.
By default, Angular uses the locale en-US. To set your application locale to another value use the CLI parameter locale with the proper value that you want to use
ng serve –aot –locale es
Above command serve your application with Spanish language.
Lets see this concept by using some example-
Firstly create on angular application with below command-
ng new internationalization
Then install all packages using –
npm install
Now run the application using –
ng serve
By default, Angular serves the application with the locale set to en-US. If you want to run yo application in different language then you need to add below code in package.json file under script section –
“start:es”: “ng serve –aot –locale es”
Above command is used for serving your application in Spanish language.
i18n pipes
Angular has a built-in set of pipes to deal with some internationalization issues. For example dates, decimals, and percentages. below is the example of datepipe –
Here dateTime is a variable which is defined in ts file with date Object like below
dateTime = new Date();
If we run the application now with npm start we are going to see the en-US version of a long date. Below is the output-
If you will run this app in Spanish language then it will give Spanish date and time.
So this is the very basic knowledge about the internationalization , in next chapter we will see it in more detail and with more examples.
