In the next section, we will extend it to make it available to different languages. Hence, we have successfully implemented i18n to our app. Hence, it is advisable to provide custom ids to each translatable tag to maintain consistency. Regenerating the file will override the default id of tags. If you change the text for any tag in your HTML file, you need to regenerate the translation file. Angular translation tool will not consider it for translations. There is no entry for the tag in translation file because we have not marked it with i18n attribute. Hence, the id for tag is “myName” as we defined it. We can also customize the id by providing a name pr efixed with as we hav e done with tag in previous section. This unique id will be generated by default for each tag that was marked with i18n attribute. You can also observe that each tag has an id property associated with it. These tags will have all the content that was marked for translation using i18n attribute. Localization Demo in Angular using i18n app/ 1 Hello, My name is Ankit app/ 5
#EF ENGLISH LIVE DEMOSTRACION CODE#
Open the file and you can observe the following XML code inside it. It will create a folder called translate and create a messages.xlf file inside it. Run the following command in the CLI to create a translation source file. We will explore i18n attribute in detail in the next section. This is a way to tell the Angular to consider this text as translatable content. You can observe that we have marked and tags with i18n attribute. Localization Demo in Angular using i18n Hello, My name is AnkitThis text will remain same in all languages Replace the already existing text with the following code. Run the following command to create the app.
#EF ENGLISH LIVE DEMOSTRACION HOW TO#
If you are new to Angular, I would suggest you to read my article Getting Started With Angular 7.0 to learn how to set up Angular development environment in your machine. The first step is to create an Angular 7 app. Localization allows us to serve our application in different languages. We need to apply internationalization to the application and after that we can localize it. Localization is the process for translating the app to a particular language. I18n, also known as internationalization, is the process of making our app support various languages to extend the reach to a worldwide audience.
Get the source code for this application from GitHub. We will use Angular 7 and VS Code to develop our application. We will also deploy our app to Google Firebase and see how localization works in real time. We will create an Angular application and configure it to serve the content in three different languages. In this article, we will learn how to make our Angular app available in different languages using i18n and localization.
0 kommentar(er)
