https://github.com/whiteducksoftware/angular-i18n-demo
This repository is accompanying our blogpost on Angular internationalization (i18n) in 2022. It demonstrates how to use the native Angular i18n library to translate your angular application at runtime.
https://github.com/whiteducksoftware/angular-i18n-demo
angular i18n internationalization runtime-translations
Last synced: 12 months ago
JSON representation
This repository is accompanying our blogpost on Angular internationalization (i18n) in 2022. It demonstrates how to use the native Angular i18n library to translate your angular application at runtime.
- Host: GitHub
- URL: https://github.com/whiteducksoftware/angular-i18n-demo
- Owner: whiteducksoftware
- License: mit
- Created: 2022-04-28T08:06:28.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2023-03-06T11:59:54.000Z (about 3 years ago)
- Last Synced: 2025-03-24T19:35:48.945Z (about 1 year ago)
- Topics: angular, i18n, internationalization, runtime-translations
- Language: TypeScript
- Homepage: https://whiteduck.de/how-to-approach-angular-internationalization-i18n-in-2022/
- Size: 300 KB
- Stars: 16
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Angular i18n demo
This repository is accompanying our blogpost on [Angular internationalization (i18n) in 2022](https://whiteduck.de/how-to-approach-angular-internationalization-i18n-in-2022/). It demonstrates how to use the native [Angular i18n library](https://www.npmjs.com/package/@angular/localize) to translate your angular application at runtime. For more information see the blogpost.
## How to run it
Navigate into the `./runtime-translations` folder and run `npm install` to install the required dependencies.
Then run `npm run start` to start the app in development mode.
## How to use it
This demo implements runtime translations for the `en` and `de` languages. Click on the `en` or `de` button in the navbar to switch the language. It should translate the route label in the navbar and the app title displayed in the center.
## How it is structured
- The `i18n.module.ts` located in `./src/app/core/i18n/i18n.module.ts` applies the selected language at application start-up and is the main component required for runtime translations.
- The translation files are located in `./src/assets/i18n/` and are named `en.json` and `de.json`.
- The language switch and storage of the selected language is done in the `app-component.ts` located in `./src/app/app-module.ts`.