Skip to content

Commit 544f1f8

Browse files
rbaletrbalet
committed
feat(nested): deep
1 parent b9f0bdf commit 544f1f8

File tree

8 files changed

+183
-2
lines changed

8 files changed

+183
-2
lines changed

‎projects/test-app/public/i18n-nested-2/de.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"nested.own": "Ich bin in NESTED 2 definiert (de)"
3+
}

‎projects/test-app/public/i18n-nested-2/en.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"nested.own": "I am defined in NESTED 2 (en)"
3+
}

‎projects/test-app/public/i18n-nested-3/de.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"nested.own": "Ich bin in NESTED 3 definiert (de)",
3+
"shared.greeting": "Hallo von EXTENDED 3 - überschreibt EXTENDED 1! (de)"
4+
}

‎projects/test-app/public/i18n-nested-3/en.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"nested.own": "I am defined in NESTED 3 (en)",
3+
"shared.greeting": "Hello from EXTENDED 3 - overrides EXTENDED 1! (en)"
4+
}

‎projects/test-app/src/app/pages/extended/nested/nested.component.ts‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,16 @@
11
import { ChangeDetectionStrategy, Component, inject } from "@angular/core";
22
import { TranslatePipe, TranslateService, provideChildTranslateService } from "@ngx-translate/core";
33
import { provideTranslateHttpLoader } from "@ngx-translate/http-loader";
4+
import { Nested2Component } from "./nested/nested.component";
45

56
@Component({
67
selector: "app-nested",
7-
imports: [TranslatePipe],
8+
imports: [
9+
TranslatePipe,
10+
11+
// Components
12+
Nested2Component,
13+
],
814
providers: [
915
provideChildTranslateService({
1016
loader: provideTranslateHttpLoader({
@@ -16,7 +22,7 @@ import { provideTranslateHttpLoader } from "@ngx-translate/http-loader";
1622
],
1723
template: `
1824
<div class="sub-card" style="margin-top: 2rem; border-style: dashed; background: #f8fafc;">
19-
<h4><span>🍀</span> Nested Component (Grandchild)</h4>
25+
<h4><span>🍀</span> Nested Component - 1 (Grandchild)</h4>
2026
<div class="translation-item">
2127
<span class="key">nested.own</span>
2228
<span class="value">{{ "nested.own" | translate }}</span>
@@ -39,6 +45,10 @@ import { provideTranslateHttpLoader } from "@ngx-translate/http-loader";
3945
>
4046
</div>
4147
</div>
48+
49+
<div style="margin-left: 2rem;">
50+
<app-nested-2></app-nested-2>
51+
</div>
4252
`,
4353
changeDetection: ChangeDetectionStrategy.OnPush,
4454
})

‎projects/test-app/src/app/pages/extended/nested/nested/nested.component.ts‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import { ChangeDetectionStrategy, Component, inject } from "@angular/core";
2+
import { TranslatePipe, TranslateService, provideChildTranslateService } from "@ngx-translate/core";
3+
import { provideTranslateHttpLoader } from "@ngx-translate/http-loader";
4+
import { Nested3Component } from "./nested/nested.component";
5+
6+
@Component({
7+
selector: "app-nested-2",
8+
imports: [
9+
TranslatePipe,
10+
11+
// Components
12+
Nested3Component,
13+
],
14+
providers: [
15+
provideChildTranslateService({
16+
loader: provideTranslateHttpLoader({
17+
prefix: "./i18n-nested-2/",
18+
suffix: ".json",
19+
enforceLoading: true,
20+
}),
21+
}),
22+
],
23+
template: `
24+
<div class="sub-card" style="margin-top: 2rem; border-style: dashed; background: #f8fafc;">
25+
<h4><span>🍀</span> Nested Component - 2 (Grandchild)</h4>
26+
<div class="translation-item">
27+
<span class="key">nested.own</span>
28+
<span class="value">{{ "nested.own" | translate }}</span>
29+
<em style="font-size: 0.7rem; color: var(--accent); display: block;"
30+
>(Found locally)</em
31+
>
32+
</div>
33+
<div class="translation-item">
34+
<span class="key">extended.own</span>
35+
<span class="value">{{ "extended.own" | translate }}</span>
36+
<em style="font-size: 0.7rem; color: var(--secondary); display: block;"
37+
>(Fallback to Parent)</em
38+
>
39+
</div>
40+
<div class="translation-item">
41+
<span class="key">root.own</span>
42+
<span class="value">{{ "root.own" | translate }}</span>
43+
<em style="font-size: 0.7rem; color: var(--primary); display: block;"
44+
>(Fallback to Root)</em
45+
>
46+
</div>
47+
</div>
48+
49+
<div style="margin-left: 2rem;">
50+
<app-nested-3></app-nested-3>
51+
</div>
52+
`,
53+
changeDetection: ChangeDetectionStrategy.OnPush,
54+
})
55+
export class Nested2Component {
56+
translate = inject(TranslateService);
57+
}

‎projects/test-app/src/app/pages/extended/nested/nested/nested/nested.component.ts‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import { ChangeDetectionStrategy, Component, inject } from "@angular/core";
2+
import { TranslatePipe, TranslateService, provideChildTranslateService } from "@ngx-translate/core";
3+
import { provideTranslateHttpLoader } from "@ngx-translate/http-loader";
4+
import { Nested4Component } from "./nested/nested.component";
5+
6+
@Component({
7+
selector: "app-nested-3",
8+
imports: [
9+
TranslatePipe,
10+
11+
// Components
12+
Nested4Component,
13+
],
14+
providers: [
15+
provideChildTranslateService({
16+
loader: provideTranslateHttpLoader({
17+
prefix: "./i18n-nested-3/",
18+
suffix: ".json",
19+
enforceLoading: true,
20+
}),
21+
}),
22+
],
23+
template: `
24+
<div class="sub-card" style="margin-top: 2rem; border-style: dashed; background: #f8fafc;">
25+
<h4><span>🍀</span> Nested Component - 3 (Grandchild)</h4>
26+
<div class="translation-item">
27+
<span class="key">nested.own</span>
28+
<span class="value">{{ "nested.own" | translate }}</span>
29+
<em style="font-size: 0.7rem; color: var(--accent); display: block;"
30+
>(Found locally)</em
31+
>
32+
</div>
33+
<div class="translation-item">
34+
<span class="key">extended.own</span>
35+
<span class="value">{{ "extended.own" | translate }}</span>
36+
<em style="font-size: 0.7rem; color: var(--secondary); display: block;"
37+
>(Fallback to Parent)</em
38+
>
39+
</div>
40+
<div class="translation-item">
41+
<span class="key">root.own</span>
42+
<span class="value">{{ "root.own" | translate }}</span>
43+
<em style="font-size: 0.7rem; color: var(--primary); display: block;"
44+
>(Fallback to Root)</em
45+
>
46+
</div>
47+
</div>
48+
49+
<div style="margin-left: 2rem;">
50+
<app-nested-4></app-nested-4>
51+
</div>
52+
`,
53+
changeDetection: ChangeDetectionStrategy.OnPush,
54+
})
55+
export class Nested3Component {
56+
translate = inject(TranslateService);
57+
}

‎projects/test-app/src/app/pages/extended/nested/nested/nested/nested/nested.component.ts‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { ChangeDetectionStrategy, Component, inject } from "@angular/core";
2+
import { TranslatePipe, TranslateService, provideChildTranslateService } from "@ngx-translate/core";
3+
import { provideTranslateHttpLoader } from "@ngx-translate/http-loader";
4+
5+
@Component({
6+
selector: "app-nested-4",
7+
imports: [TranslatePipe],
8+
providers: [
9+
provideChildTranslateService({
10+
loader: provideTranslateHttpLoader({}),
11+
}),
12+
],
13+
template: `
14+
<div class="sub-card" style="margin-top: 2rem; border-style: dashed; background: #f8fafc;">
15+
<h4><span>🍀</span> Nested Component - 4 (Grandchild)</h4>
16+
<div class="translation-item">
17+
<span class="key">nested.own</span>
18+
<span class="value">{{ "nested.own" | translate }}</span>
19+
<em style="font-size: 0.7rem; color: var(--accent); display: block;"
20+
>(Found locally)</em
21+
>
22+
</div>
23+
<div class="translation-item">
24+
<span class="key">extended.own</span>
25+
<span class="value">{{ "extended.own" | translate }}</span>
26+
<em style="font-size: 0.7rem; color: var(--secondary); display: block;"
27+
>(Fallback to Parent)</em
28+
>
29+
</div>
30+
<div class="translation-item">
31+
<span class="key">root.own</span>
32+
<span class="value">{{ "root.own" | translate }}</span>
33+
<em style="font-size: 0.7rem; color: var(--primary); display: block;"
34+
>(Fallback to Root)</em
35+
>
36+
</div>
37+
</div>
38+
`,
39+
changeDetection: ChangeDetectionStrategy.OnPush,
40+
})
41+
export class Nested4Component {
42+
translate = inject(TranslateService);
43+
}

0 commit comments

Comments
 (0)