Dynamic Translations in Angular

Share on facebook
Share on google
Share on twitter
Share on linkedin

Yet another post of me fixing something I find flawed about the way Angular wants you to do stuff. Just like the way Angular’s built-in way of handling environment configuration wants you to create a build for every environment, Angular’s internalization library wants you to have a separate build for every language. This is BOGUS and I have previously written about why you should opt for a build once, deploy many setup for the most ease and maintainability.

Another point is that an Angular app can benefit from getting the translations from an external API, as this will allow for actually change the translations in the app without needing to redeploy the Angular app. Also, centralizes the translation, as they might be used by multiple clients such as web apps, mobile apps, and back-end services.

This post is going to cover how to fix this by introducing dynamic translation capabilities using ngx-translate for getting translations from a NodeJS REST API.

Creating an Angular app with dynamic translations from a REST API

In this part, we are going to look at how to add translations to a todo app on my Github using Angular, ngx-translate and a NodeJS API for serving the translations. You can find the complete source code in my Github repo with Angular best practices demonstrated in a todo app.

Starting out, the todo app had static English texts hardcoded in the code. I wanted to make it able to support Danish translations as well (my mother language):

The first step is to install ngx-translate/core and ngx-translate/http-loader.

To do this simply open the terminal and type:

npm install ngx-translate/core

npm install ngx-translate/http-loader

Setting up translations on the Node server

From my todo app is a server folder, which contains a simple Express app.

We want to enable our server to serve the translations for our app. We are first going to add two language files to the Node server in the folder assets/i18n called da-lang.json and en-lang.json:

In these files you put your translations for your app, like these English translations for the todo app:

The translations are served on the Node server with:

This will expose everything in the assets folder as static content which can be fetched from eg. our Angular app.

Now, we have created the translations and have served them on the Node server, we can are ready to make our app use the translations.

Use translations in the app

In app.module we set up the app to fetch the translations from the Node server:

The TranslateModule provide us with the TranslateService which we are going to use to initialize the translations upon startup:

This will add the languages, set English as the default language and try to set the browser language if that is available.

To use the translate pipe in the app we import TranslateModule in the SharedModule, which is getting imported by every feature module.

Now the translate pipe can be used like this to translate text in the templates:

Creating a change language dropdown

Because we want the user to be able to change the language dynamically at runtime, we are going to provide a dropdown to change the language in the NavBarComponent.

We are going to create a dropdown of the available languages like this:

This will show a dropdown option for every available language and will set that language on change using the TranslateService‘s use method.

Now you have created an app where you can easily change translations at runtime because they are not hardcoded in the app anymore but fetched from the Node server.


In this post, we saw how to overcome shortcomings of the built-in method of handling translations in an Angular app by using ngx-translate to enable dynamic translation in an Angular app, enabling you to change the translations at runtime in a todo app.

Thanks for reading. Remember to comment, follow me on Twitter and subscribe for getting new posts about how to become a better Angular developer every Sunday.

Do you want to become an Angular architect? Check out Angular Architect Accelerator.

Related Posts and Comments

How to Handle Errors in a Reactive Angular App

In this post, we will cover how to handle errors in a reactive Angular app. To provide a good user experience you should always let your users know what state your application is in. That includes showing a loading spinner when it’s loading and showing error messages if there are any errors. It is a

Read More »

How to Set Up Git Hooks in an Nx Repo

Git hooks can be used to automate tasks in your development workflow. The earlier a bug is discovered, the cheaper it is to fix (and the less impact it has). Therefore it can be helpful to run tasks such as linting, formatting, and tests when you are e.g. committing and pushing your code, so any

Read More »

The Stages of an Angular Architecture with Nx

Long gone are the times when the frontend was just a dumb static website. Frontend apps have gotten increasingly complex since the rise of single-page application frameworks like Angular. It comes with the price of increased complexity and the ever-changing frontend landscape requires you to have an architecture that allows you to scale and adapt

Read More »

The Best Way to Use Signals in Angular Apps

Since Angular 16, Angular now has experimental support for signals and there is a lot of confusion in the community about whether this is going to replace RxJS or how it should be used in an app in combination with RxJS. This blog post sheds some light on what I think is the best way

Read More »

High ROI Testing with Cypress Component Testing

Testing is one of the most struggled topics in Angular development and many developers are either giving up testing altogether or applying inefficient testing practices consuming all their precious time while giving few results in return. This blog post will change all this as we will cover how I overcame these struggles the hard way

Read More »