This tutorial is out of date and no longer maintained.
Note: This is part one of a two-part series where we will learn about implementing translation in our Angular 2 application.
In part 1 we will learn how to:
pipe
that we can use to translate our words in the HTML view. Like this:service
that we can use to translate our words in JavaScript / Typescript. Like this:This is how our UI will look:
View Simple Translate Part 1 (final) on plnkr
Here’s our file structure:
|- app/
|- app.component.html
|- app.component.ts
|- app.module.ts
|- main.ts
|- translate/
|- index.ts
|- lang-en.ts
|- lang-es.ts
|- lang-zh.ts
|- translate.pipe.ts
|- translate.service.ts
|- translation.ts
|- index.html
|- systemjs.config.js
|- tsconfig.json
translate
related files.Let’s add some translations in our lang-[name].ts
files.
Now let’s link all the translation files in our translation.ts
file.
translations
. An opaque token is an object with no application interfaces. It’s a special kind of provider lookup key for use in dependency injection. For more details, please refer to Angular official document.dictionary
variable links all our translations.TRANSLATION_PROVIDERS
notes that we use the opaque token that we defined earlier, and supply our dictionary
as value. Later we will register TRANSLATION_PROVIDERS
during bootstrap (main.ts
).Let’s create our service.
Note that we import our TRANSLATIONS
token and inject it into our constructor.
Let’s now create our translation pipe. Our pipe is simple - no logic in the pipe. We will import and call our translate
service to perform the translation.
Both the translation service and pipe are now done. Let’s use it in our app component!
Before we can use the translation service and pipe, we need to import it to our app module.
Then, we can use them in our component.
supportedLanguages
to store all supported languages.navigator.language
and set the default language accordingly.translatedText
. (We can do better. We will enhance the way we handle the refresh in part 2).Here is our HTML view.
We will export our translate modules as barrel. A barrel is a way to rollup exports from several modules into a single convenience module. The barrel itself is a module file that re-exports selected exports of other modules. Refer to Angular official documentation for details.
Now let’s bootstrap our application.
If you are using systemjs
, and use Angular CLI for project setup, please include the translate barrel in your system-config.ts file. Like this:
Let’s run your application. When the application loads, Spanish language is selected, and the translation shows hola mundo as expected.
Try to select English now. You should see that the Translate with pipe value is not updated.
Angular 2 Pipe is pure by default. Angular executes a pure pipe only when it detects a pure change to the input value. In our case, the input value didn’t change, it’s still Hello world
. Therefore, the value is not updated.
Let’s make our pipe impure. Angular executes an impure pipe during every component change detection cycle. In our case, when we update the language selection, change will be triggered, and the impure pipe will update accordingly.
To make our pipe impure, open app/translate/translate.pipe.ts
and add in one line:
Please refer to Angular 2 Pipes documentation for details on Pipe.
Yay, we have implemented our own translation. We will cover more advanced features in part 2, coming soon:
That’s it. Happy coding.
View Simple Translate Part 1 (final) on plnkr
References:
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!