![\"\"](\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/04\/image-19.png\")
<\/figure>\n<\/div>\n\n\n<\/p>\n\n\n\n
Why not use Angular’s internal implementation?<\/strong> The main reason is that Angular builds one version of your application per locale. As a result, if you have to support 20 different locales, your Angular build would output 20 different applications. This means that changing the site would result in a complete reload of the application. This also means that changing a translation requires a complete rebuild and redeploy of the application.<\/p>\n\n\n\n ngx-translate<\/strong> is much more flexible because it relies on pipes, directives, and services to translate our text at runtime instead of build-time. Here are some examples:<\/p>\n\n\n\n With <\/p>\n\n\n\n With <\/p>\n\n\n\n With <\/p>\n\n\n\n Translations come from specific files where translation keys ( Here is an example of English translations stored in en.json<\/strong>:<\/p>\n\n\n\n <\/p>\n\n\n\n And the same translations in French in fr.json<\/strong>:<\/p>\n\n\n\n <\/p>\n\n\n\n All we have to do is indicate where the translation files are located<\/a> and Defining which languages are supported as well as which one to use by default can all be done with the <\/p>\n\n\n\n You can see a live example of Yesterday, we touched on how to change the locale of our Angular applications. The next step is to fully internationalize our apps by translating all text into different languages. While Angular has its localization implementation to internationalize applications, the most popular library used for such a task is ngx-translate. Why not use Angular’s internal implementation? […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,27],"tags":[],"class_list":["post-774","post","type-post","status-publish","format-standard","hentry","category-angular","category-i18n"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/774","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=774"}],"version-history":[{"count":4,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/774\/revisions"}],"predecessor-version":[{"id":796,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/774\/revisions\/796"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=774"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=774"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=774"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}TranslateService<\/code>:<\/p>\n\n\n![\"\"](\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/04\/image-20.png\")
<\/figure>\n<\/div>\n\n\nTranslatePipe<\/code>:<\/p>\n\n\n\n![\"\"](\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/04\/image-21.png\")
<\/figure>\n\n\n\nTranslateDirective<\/code>:<\/p>\n\n\n\n![\"\"](\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/04\/image-22.png\")
<\/figure>\n\n\n\n\"HELLO\"<\/code> in my example) are mapped to actual values in each language. ngx-translate<\/code> supports different formats out of the box (such as JSON<\/a> and PO<\/a>).<\/p>\n\n\n\n![\"\"](\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/04\/image-23.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/04\/image-24.png\")
<\/figure>\n\n\n\nngx-translate<\/code> will download them as needed based on the locale.<\/p>\n\n\n\nTranslateService<\/code> from the library:<\/p>\n\n\n\n![\"\"](\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/04\/image-26.png\")
<\/figure>\n\n\n\nngx-translate<\/code> in Stackblitz here<\/a>. If you want to try it, you can use my ngx-translate step-by-step tutorial<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"