fix(directive): update dom even if initial content is empty

Fixes #439 Fixes #355 Fixes #380
ngx-translate · Mar 23, 2017 · f1e693a · f1e693a
1 parent c2c06bc
commit f1e693a
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/src/translate.directive.ts b/src/translate.directive.ts
@@ -61,6 +61,12 @@ export class TranslateDirective implements AfterViewChecked, OnDestroy {
 
     checkNodes(forceUpdate = false, translations?: any) {
         let nodes: NodeList = this.element.nativeElement.childNodes;
+        // if the element is empty
+        if(!nodes.length) {
+            // we add the key as content
+            this.element.nativeElement.textContent = this.key;
+            nodes = this.element.nativeElement.childNodes;
+        }
         for(let i = 0; i < nodes.length; ++i) {
             let node: any = nodes[i];
             if(node.nodeType === 3) { // node type 3 is a text node

diff --git a/tests/translate.directive.spec.ts b/tests/translate.directive.spec.ts
@@ -10,6 +10,7 @@ import {TranslateService, TranslateModule} from '../index';
     template: `
         <div #noKey translate>TEST</div>
         <div #withKey [translate]="'TEST'">Some init content</div>
+        <div #noContent [translate]="'TEST'"></div>
         <div #withOtherElements translate>TEST1 <span>Hey</span> TEST2</div>
         <div #withParams [translate]="'TEST'" [translateParams]="value">Some init content</div>
         <div #withParamsNoKey translate [translateParams]="value">TEST</div>
@@ -22,6 +23,7 @@ class App {
     @ViewChild('withOtherElements') withOtherElements: ElementRef;
     @ViewChild('withParams') withParams: ElementRef;
     @ViewChild('withParamsNoKey') withParamsNoKey: ElementRef;
+    @ViewChild('noContent') noContent: ElementRef;
     value = {value: 'ok'};
 
     constructor(viewContainerRef: ViewContainerRef) {
@@ -123,21 +125,22 @@ describe('TranslateDirective', () => {
     it('should update the DOM when the lang changes', () => {
         expect(fixture.componentInstance.noKey.nativeElement.innerHTML).toEqual('TEST');
         expect(fixture.componentInstance.withParams.nativeElement.innerHTML).toEqual('TEST');
+        expect(fixture.componentInstance.noContent.nativeElement.innerHTML).toEqual('TEST');
 
         translate.setTranslation('en', {"TEST": "This is a test"});
         translate.setTranslation('fr', {"TEST": "C'est un test"});
 
         translate.use('en');
         expect(fixture.componentInstance.noKey.nativeElement.innerHTML).toEqual('This is a test');
         expect(fixture.componentInstance.withParams.nativeElement.innerHTML).toEqual('This is a test');
+        expect(fixture.componentInstance.noContent.nativeElement.innerHTML).toEqual('This is a test');
 
         translate.use('fr');
         expect(fixture.componentInstance.noKey.nativeElement.innerHTML).toEqual("C'est un test");
         expect(fixture.componentInstance.withParams.nativeElement.innerHTML).toEqual("C'est un test");
+        expect(fixture.componentInstance.noContent.nativeElement.innerHTML).toEqual("C'est un test");
     });
 
-    // Test (temporarily) disabled as the directive tests manipulate the DOM manually which breaks this test.
-    // https://github.com/ocombe/ng2-translate/pull/336
     it('should update the DOM when the default lang changes', () => {
         expect(fixture.componentInstance.noKey.nativeElement.innerHTML).toEqual('TEST');