feat(directive): read nested property

Author: fxck

README.md

@@ -157,7 +157,7 @@ This is the recommended approach. It's DRY and efficient, as it creates one subs
 </ng-template>
 ```
 
-If you are using `shared` strategy (default in the next major release), you can set `context` in your structural directive to get translations from a particular nested (including deeply nested) property.
+If you are using `shared` strategy (default in the next major release), you can use `read` property in your structural directive to get translations of a particular nested (including deeply nested) property.
 
 Given this translation object:
 
@@ -177,13 +177,13 @@ Given this translation object:
 you can do
 
 ```html
-<ng-container *transloco="let t; context: 'dashboard'">
+<ng-container *transloco="let t; read: 'dashboard'">
   <h1>{{ t.title }}</h1>
   <p>{{ t.desc }}</p>
 </ng-container>
 ```
 
-without having to repeat the `dashboard` key.
+without having to repeat the `dashboard` key in each translation.
 
 ### Using the Attribute Directive
 

projects/ngneat/transloco/src/lib/tests/transloco.directive.spec.ts

@@ -51,7 +51,7 @@ describe('TranslocoDirective', () => {
     expect(host.queryHost('div')).toHaveText('Admin Lazy spanish');
   }
 
-  function testTranslationWithContext(host: SpectatorWithHost<TranslocoDirective, HostComponent>) {
+  function testTranslationWithRead(host: SpectatorWithHost<TranslocoDirective, HostComponent>) {
     const service = host.get<TranslocoService>(TranslocoService);
     initScopeTest(host, service);
     expect(host.queryHost('div')).toHaveText('Title english');
@@ -196,9 +196,9 @@ describe('TranslocoDirective', () => {
       expect(host.queryHostAll('p')[1]).toHaveText('a.b.c value english');
     }));
 
-    it('should get translation of a nested property using context', fakeAsync(() => {
-      host = createHost(`<section *transloco="let t; context: 'nested'"><div>{{t.title}}</div></section>`, false);
-      testTranslationWithContext(host);
+    it('should get translation of a nested property using read', fakeAsync(() => {
+      host = createHost(`<section *transloco="let t; read: 'nested'"><div>{{t.title}}</div></section>`, false);
+      testTranslationWithRead(host);
     }));
   });
 

projects/ngneat/transloco/src/lib/transloco.directive.ts

@@ -33,7 +33,7 @@ export class TranslocoDirective implements OnInit, OnDestroy, OnChanges {
   @Input('transloco') key: string;
   @Input('translocoParams') params: HashMap = {};
   @Input('translocoScope') inlineScope: string | undefined;
-  @Input('translocoContext') inlineContext: string | undefined;
+  @Input('translocoRead') inlineRead: string | undefined;
   @Input('translocoLang') inlineLang: string | undefined;
   @Input('translocoLoadingTpl') inlineTpl: TemplateRef<any> | undefined;
 
@@ -104,13 +104,13 @@ export class TranslocoDirective implements OnInit, OnDestroy, OnChanges {
   }
 
   private structuralStrategy(data: Translation) {
-    const dataWithContext = this.inlineContext ? getValue(data, this.inlineContext) : data;
+    const translations = this.inlineRead ? getValue(data, this.inlineRead) : data;
     if (this.view) {
-      this.view.context['$implicit'] = dataWithContext;
+      this.view.context['$implicit'] = translations;
     } else {
       this.detachLoader();
       this.view = this.vcr.createEmbeddedView(this.tpl, {
-        $implicit: dataWithContext
+        $implicit: translations
       });
     }
   }

src/app/scope-sharing/scope-sharing.component.html

@@ -27,11 +27,11 @@ <h5><u>Pipe</u></h5>
 <p data-cy="p-todos-page-scope">{{ 'todos.title' | transloco }}</p>
 <p data-cy="p-global">{{ 'home' | transloco }}</p>
 
-<h5><u>Settings a context to a nested property</u></h5>
+<h5><u>Use read to get translations of a nested property</u></h5>
 <code
   ><pre>{{ ex.nested }}</pre></code
 >
-<ng-container *transloco="let t; context: 'nested'">
+<ng-container *transloco="let t; read: 'nested'">
   <h5>{{ t.title }}</h5>
   <p>{{ t.desc }}</p>
 </ng-container>

src/app/scope-sharing/scope-sharing.component.ts

@@ -16,7 +16,7 @@ export class ScopeSharingComponent implements OnInit {
     <p>{{ t.todos.title }}</p>
     <p>{{ t.home }}</p>
   </ng-container>`,
-    nested: `  <ng-container *transloco="let t; context: 'nested'">
+    nested: `  <ng-container *transloco="let t; read: 'nested'">
     <h5>{{ t.title }}</h5>
     <p>{{ t.desc }}</p>
   </ng-container>`