2 |
8 |
9 | ngx-translate message format compiler demo
3 | 4 | Switch languages at runtime: 5 | 6 | 7 |
10 |
34 |
--------------------------------------------------------------------------------
/ngx-translate-demo-standalone/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ngx-translate-demo-standalone",
3 | "version": "0.0.0",
4 | "scripts": {
5 | "ng": "ng",
6 | "start": "ng serve",
7 | "build": "ng build",
8 | "watch": "ng build --watch --configuration development",
9 | "test": "ng test",
10 | "lint": "ng lint"
11 | },
12 | "prettier": {
13 | "overrides": [
14 | {
15 | "files": "*.html",
16 | "options": {
17 | "parser": "angular"
18 | }
19 | }
20 | ]
21 | },
22 | "private": true,
23 | "dependencies": {
24 | "@angular/common": "^20.1.0",
25 | "@angular/compiler": "^20.1.0",
26 | "@angular/core": "^20.1.0",
27 | "@angular/forms": "^20.1.0",
28 | "@angular/platform-browser": "^20.1.0",
29 | "@angular/router": "^20.1.0",
30 | "@ngx-translate/core": "^17.0.0",
31 | "@ngx-translate/http-loader": "^17.0.0",
32 | "rxjs": "~7.8.0",
33 | "tslib": "^2.3.0",
34 | "zone.js": "~0.15.0"
35 | },
36 | "devDependencies": {
37 | "@angular/build": "^20.1.3",
38 | "@angular/cli": "^20.1.3",
39 | "@angular/compiler-cli": "^20.1.0",
40 | "@types/jasmine": "~5.1.0",
41 | "angular-eslint": "20.1.1",
42 | "eslint": "^9.29.0",
43 | "jasmine-core": "~5.8.0",
44 | "karma": "~6.4.0",
45 | "karma-chrome-launcher": "~3.2.0",
46 | "karma-coverage": "~2.2.0",
47 | "karma-jasmine": "~5.1.0",
48 | "karma-jasmine-html-reporter": "~2.1.0",
49 | "typescript": "~5.8.2",
50 | "typescript-eslint": "8.34.1"
51 | }
52 | }
--------------------------------------------------------------------------------
/ngx-translate-demo-standalone-icu/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ngx-translate-demo-standalone",
3 | "version": "0.0.0",
4 | "scripts": {
5 | "ng": "ng",
6 | "start": "ng serve",
7 | "build": "ng build",
8 | "watch": "ng build --watch --configuration development",
9 | "test": "ng test",
10 | "lint": "ng lint"
11 | },
12 | "prettier": {
13 | "overrides": [
14 | {
15 | "files": "*.html",
16 | "options": {
17 | "parser": "angular"
18 | }
19 | }
20 | ]
21 | },
22 | "private": true,
23 | "dependencies": {
24 | "@angular/common": "^20.1.0",
25 | "@angular/compiler": "^20.1.0",
26 | "@angular/core": "^20.1.0",
27 | "@angular/forms": "^20.1.0",
28 | "@angular/platform-browser": "^20.1.0",
29 | "@angular/router": "^20.1.0",
30 | "@ngx-translate/core": "^17.0.0",
31 | "@ngx-translate/http-loader": "^17.0.0",
32 | "rxjs": "~7.8.0",
33 | "tslib": "^2.3.0",
34 | "zone.js": "~0.15.0"
35 | },
36 | "devDependencies": {
37 | "@angular/build": "^20.1.3",
38 | "@angular/cli": "^20.1.3",
39 | "@angular/compiler-cli": "^20.1.0",
40 | "@types/jasmine": "~5.1.0",
41 | "angular-eslint": "20.1.1",
42 | "eslint": "^9.29.0",
43 | "jasmine-core": "~5.8.0",
44 | "karma": "~6.4.0",
45 | "karma-chrome-launcher": "~3.2.0",
46 | "karma-coverage": "~2.2.0",
47 | "karma-jasmine": "~5.1.0",
48 | "karma-jasmine-html-reporter": "~2.1.0",
49 | "typescript": "~5.8.2",
50 | "typescript-eslint": "8.34.1"
51 | }
52 | }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # How to translate your Angular application
2 |
3 |
4 | Pluralization
11 | 12 | 13 | 18 | 19 |icu.pluralization
20 |{{'icu.pluralization' | translate:{ count } }}
21 | 22 |Selection
23 | 24 | 25 | 30 | 31 |icu.select
32 |{{'icu.select' | translate:{ gender, 'product': 'BabelEdit' } }}
33 |
5 |
6 |
7 | Simple 3 demo projects for Angular and ngx-translate.
8 |
9 | - **ngx-translate-demo-standalone** - uses standalone components
10 | - **ngx-translate-demo-standalone** - uses standalone modules and the ngx-translate-messageformat-compiler plugin to use ICU formatted translation messages
11 | - **ngx-translate-demo-ngmodules** - uses ngModules (app.module.ts)
12 |
13 | Read the tutorial [How to translate your Angular app with ngx-translate](https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-angular-app-with-ngx-translate) for more information about how to use ngx-translate, ngx-translate-extract and BabelEdit.
14 |
15 | The repository also contains demo projects working with Angular 20.
16 |
17 | The demo is also available for older Angular versions from 5-19: Please check the branches.
18 |
19 | Tutorials for the older version of Angular:
20 |
21 | * [How to translate your Angular 8-16 app with ngx-translate](https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-angular8-16-app-with-ngx-translate)
22 | * [How to translate your Angular 7 app with ngx-translate](https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-angular7-app-with-ngx-translate)
23 | * [How to translate your Angular 5/6 app with ngx-translate](https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-angular6-app-with-ngx-translate)
24 |
25 |
--------------------------------------------------------------------------------
/ngx-translate-demo-standalone-icu/README.md:
--------------------------------------------------------------------------------
1 | # NgxTranslateDemoStandalone
2 |
3 | This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.1.3.
4 |
5 | ## Development server
6 |
7 | To start a local development server, run:
8 |
9 | ```bash
10 | ng serve
11 | ```
12 |
13 | Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
14 |
15 | ## Code scaffolding
16 |
17 | Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
18 |
19 | ```bash
20 | ng generate component component-name
21 | ```
22 |
23 | For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
24 |
25 | ```bash
26 | ng generate --help
27 | ```
28 |
29 | ## Building
30 |
31 | To build the project run:
32 |
33 | ```bash
34 | ng build
35 | ```
36 |
37 | This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
38 |
39 | ## Running unit tests
40 |
41 | To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
42 |
43 | ```bash
44 | ng test
45 | ```
46 |
47 | ## Running end-to-end tests
48 |
49 | For end-to-end (e2e) testing, run:
50 |
51 | ```bash
52 | ng e2e
53 | ```
54 |
55 | Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
56 |
57 | ## Additional Resources
58 |
59 | For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
60 |
--------------------------------------------------------------------------------
/ngx-translate-demo-standalone/README.md:
--------------------------------------------------------------------------------
1 | # NgxTranslateDemoStandalone
2 |
3 | This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.1.3.
4 |
5 | ## Development server
6 |
7 | To start a local development server, run:
8 |
9 | ```bash
10 | ng serve
11 | ```
12 |
13 | Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
14 |
15 | ## Code scaffolding
16 |
17 | Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
18 |
19 | ```bash
20 | ng generate component component-name
21 | ```
22 |
23 | For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
24 |
25 | ```bash
26 | ng generate --help
27 | ```
28 |
29 | ## Building
30 |
31 | To build the project run:
32 |
33 | ```bash
34 | ng build
35 | ```
36 |
37 | This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
38 |
39 | ## Running unit tests
40 |
41 | To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
42 |
43 | ```bash
44 | ng test
45 | ```
46 |
47 | ## Running end-to-end tests
48 |
49 | For end-to-end (e2e) testing, run:
50 |
51 | ```bash
52 | ng e2e
53 | ```
54 |
55 | Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
56 |
57 | ## Additional Resources
58 |
59 | For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
60 |
--------------------------------------------------------------------------------
/ngx-translate-demo-standalone/src/app/app.spec.ts:
--------------------------------------------------------------------------------
1 | import {TestBed} from "@angular/core/testing";
2 | import {App} from "./app";
3 | import {provideTranslateLoader, provideTranslateService, TranslateService} from "@ngx-translate/core";
4 | import {StaticTranslationLoader} from "./static-translation-loader";
5 |
6 |
7 | describe("App", () =>
8 | {
9 | beforeEach(async () =>
10 | {
11 | await TestBed.configureTestingModule({
12 | imports: [App],
13 | providers: [
14 | provideTranslateService({
15 | loader: provideTranslateLoader(StaticTranslationLoader),
16 | lang: "en"
17 | })
18 | ]
19 | }).compileComponents();
20 | });
21 |
22 | it("should create the app", () =>
23 | {
24 | const fixture = TestBed.createComponent(App);
25 | const app = fixture.componentInstance;
26 | expect(app).toBeTruthy();
27 | });
28 |
29 | it("should render title in english (default)", () =>
30 | {
31 | const fixture = TestBed.createComponent(App);
32 | fixture.detectChanges();
33 | const compiled = fixture.nativeElement as HTMLElement;
34 | expect(compiled.querySelector("h1")?.textContent).toContain("Translation Demo");
35 | });
36 |
37 | it("should render title in german", () =>
38 | {
39 | const fixture = TestBed.createComponent(App);
40 |
41 | const translateService = TestBed.inject(TranslateService);
42 | translateService.use("de");
43 |
44 | fixture.detectChanges();
45 | const compiled = fixture.nativeElement as HTMLElement;
46 | expect(compiled.querySelector("h1")?.textContent).toContain("Übersetzungs Demo");
47 | });
48 |
49 | });
50 |
--------------------------------------------------------------------------------
/ngx-translate-demo-standalone/src/app/app.ts:
--------------------------------------------------------------------------------
1 | import {Component, inject, OnDestroy, OnInit} from "@angular/core";
2 | import {Subscription} from "rxjs";
3 | import {_, TranslateDirective, TranslatePipe, TranslateService} from "@ngx-translate/core";
4 |
5 |
6 | @Component({
7 | selector: "app-root",
8 | imports: [
9 | TranslatePipe,
10 | TranslateDirective
11 | ],
12 | templateUrl: "./app.html",
13 | styleUrl: "./app.scss"
14 | })
15 | export class App implements OnInit, OnDestroy
16 | {
17 | private translate = inject(TranslateService);
18 | name = "Andreas";
19 |
20 | private subscription?: Subscription;
21 |
22 | ngOnInit(): void
23 | {
24 | this.translate.get(_("demo.interpolation.instant"), {name: "John"})
25 | .subscribe((text: string) =>
26 | {
27 | console.log(`using get(): ${text}`);
28 | });
29 |
30 | const text2 = this.translate.instant(_("demo.interpolation.instant"), {name: "John"});
31 | console.log(`using instant() too early: ${text2}`);
32 |
33 | this.translate.use(this.translate.getCurrentLang())
34 | .subscribe(() =>
35 | {
36 | // instant can be used after the language is loaded
37 | // we wait for it by setting the current language again
38 | // the observable emits as soon as the language is loaded
39 | const text2 = this.translate.instant(_("demo.interpolation.instant"), {name: "John"});
40 | console.log(`using instant() after loading is done: ${text2}`);
41 | });
42 |
43 | this.subscription = this.translate.stream(_("demo.interpolation.instant"), {name: "John"})
44 | .subscribe((text: string) =>
45 | {
46 | console.log(`using stream(): ${text}`);
47 | });
48 | }
49 |
50 | ngOnDestroy(): void
51 | {
52 | this.subscription?.unsubscribe();
53 | }
54 |
55 | useLanguage(language: string): void
56 | {
57 | this.translate.use(language);
58 | }
59 |
60 | }
61 |
--------------------------------------------------------------------------------
/ngx-translate-demo-standalone-icu/angular.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3 | "version": 1,
4 | "newProjectRoot": "projects",
5 | "projects": {
6 | "ngx-translate-demo-standalone": {
7 | "projectType": "application",
8 | "schematics": {
9 | "@schematics/angular:component": {
10 | "style": "scss"
11 | }
12 | },
13 | "root": "",
14 | "sourceRoot": "src",
15 | "prefix": "app",
16 | "architect": {
17 | "build": {
18 | "builder": "@angular/build:application",
19 | "options": {
20 | "browser": "src/main.ts",
21 | "polyfills": [
22 | "zone.js"
23 | ],
24 | "tsConfig": "tsconfig.app.json",
25 | "inlineStyleLanguage": "scss",
26 | "assets": [
27 | {
28 | "glob": "**/*",
29 | "input": "public"
30 | }
31 | ],
32 | "styles": [
33 | "src/styles.scss"
34 | ]
35 | },
36 | "configurations": {
37 | "production": {
38 | "budgets": [
39 | {
40 | "type": "initial",
41 | "maximumWarning": "500kB",
42 | "maximumError": "1MB"
43 | },
44 | {
45 | "type": "anyComponentStyle",
46 | "maximumWarning": "4kB",
47 | "maximumError": "8kB"
48 | }
49 | ],
50 | "outputHashing": "all"
51 | },
52 | "development": {
53 | "optimization": false,
54 | "extractLicenses": false,
55 | "sourceMap": true
56 | }
57 | },
58 | "defaultConfiguration": "production"
59 | },
60 | "serve": {
61 | "builder": "@angular/build:dev-server",
62 | "configurations": {
63 | "production": {
64 | "buildTarget": "ngx-translate-demo-standalone:build:production"
65 | },
66 | "development": {
67 | "buildTarget": "ngx-translate-demo-standalone:build:development"
68 | }
69 | },
70 | "defaultConfiguration": "development"
71 | },
72 | "extract-i18n": {
73 | "builder": "@angular/build:extract-i18n"
74 | },
75 | "test": {
76 | "builder": "@angular/build:karma",
77 | "options": {
78 | "polyfills": [
79 | "zone.js",
80 | "zone.js/testing"
81 | ],
82 | "tsConfig": "tsconfig.spec.json",
83 | "inlineStyleLanguage": "scss",
84 | "assets": [
85 | {
86 | "glob": "**/*",
87 | "input": "public"
88 | }
89 | ],
90 | "styles": [
91 | "src/styles.scss"
92 | ]
93 | }
94 | },
95 | "lint": {
96 | "builder": "@angular-eslint/builder:lint",
97 | "options": {
98 | "lintFilePatterns": [
99 | "src/**/*.ts",
100 | "src/**/*.html"
101 | ]
102 | }
103 | }
104 | }
105 | }
106 | },
107 | "cli": {
108 | "schematicCollections": [
109 | "angular-eslint"
110 | ]
111 | }
112 | }
113 |
--------------------------------------------------------------------------------
/ngx-translate-demo-standalone/angular.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3 | "version": 1,
4 | "newProjectRoot": "projects",
5 | "projects": {
6 | "ngx-translate-demo-standalone": {
7 | "projectType": "application",
8 | "schematics": {
9 | "@schematics/angular:component": {
10 | "style": "scss"
11 | }
12 | },
13 | "root": "",
14 | "sourceRoot": "src",
15 | "prefix": "app",
16 | "architect": {
17 | "build": {
18 | "builder": "@angular/build:application",
19 | "options": {
20 | "browser": "src/main.ts",
21 | "polyfills": [
22 | "zone.js"
23 | ],
24 | "tsConfig": "tsconfig.app.json",
25 | "inlineStyleLanguage": "scss",
26 | "assets": [
27 | {
28 | "glob": "**/*",
29 | "input": "public"
30 | }
31 | ],
32 | "styles": [
33 | "src/styles.scss"
34 | ]
35 | },
36 | "configurations": {
37 | "production": {
38 | "budgets": [
39 | {
40 | "type": "initial",
41 | "maximumWarning": "500kB",
42 | "maximumError": "1MB"
43 | },
44 | {
45 | "type": "anyComponentStyle",
46 | "maximumWarning": "4kB",
47 | "maximumError": "8kB"
48 | }
49 | ],
50 | "outputHashing": "all"
51 | },
52 | "development": {
53 | "optimization": false,
54 | "extractLicenses": false,
55 | "sourceMap": true
56 | }
57 | },
58 | "defaultConfiguration": "production"
59 | },
60 | "serve": {
61 | "builder": "@angular/build:dev-server",
62 | "configurations": {
63 | "production": {
64 | "buildTarget": "ngx-translate-demo-standalone:build:production"
65 | },
66 | "development": {
67 | "buildTarget": "ngx-translate-demo-standalone:build:development"
68 | }
69 | },
70 | "defaultConfiguration": "development"
71 | },
72 | "extract-i18n": {
73 | "builder": "@angular/build:extract-i18n"
74 | },
75 | "test": {
76 | "builder": "@angular/build:karma",
77 | "options": {
78 | "polyfills": [
79 | "zone.js",
80 | "zone.js/testing"
81 | ],
82 | "tsConfig": "tsconfig.spec.json",
83 | "inlineStyleLanguage": "scss",
84 | "assets": [
85 | {
86 | "glob": "**/*",
87 | "input": "public"
88 | }
89 | ],
90 | "styles": [
91 | "src/styles.scss"
92 | ]
93 | }
94 | },
95 | "lint": {
96 | "builder": "@angular-eslint/builder:lint",
97 | "options": {
98 | "lintFilePatterns": [
99 | "src/**/*.ts",
100 | "src/**/*.html"
101 | ]
102 | }
103 | }
104 | }
105 | }
106 | },
107 | "cli": {
108 | "schematicCollections": [
109 | "angular-eslint"
110 | ]
111 | }
112 | }
113 |
--------------------------------------------------------------------------------
/ngx-translate-demo-standalone/translations.babel:
--------------------------------------------------------------------------------
1 |
2 | de-DE
151 | en-US
154 | de-DE
166 | en-US
169 |