From f1e693a247f0fd4f7ddded585046e9b59a3c65d1 Mon Sep 17 00:00:00 2001
From: Olivier Combe <olivier.combe@gmail.com>
Date: Thu, 23 Mar 2017 21:47:08 +0100
Subject: [PATCH] fix(directive): update dom even if initial content is empty

Fixes #439
Fixes #355
Fixes #380
---
 src/translate.directive.ts        | 6 ++++++
 tests/translate.directive.spec.ts | 7 +++++--
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/translate.directive.ts b/src/translate.directive.ts
index c2bdc63c..fc181744 100644
--- 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
index 3fd9de6c..bb08ed90 100644
--- 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,6 +125,7 @@ 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"});
@@ -130,14 +133,14 @@ describe('TranslateDirective', () => {
         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');