angular · pkozlowski-opensource · Jul 24, 2015 · Jul 24, 2015
diff --git a/modules/angular2/src/change_detection/change_detection_jit_generator.ts b/modules/angular2/src/change_detection/change_detection_jit_generator.ts
@@ -371,7 +371,7 @@ export class ChangeDetectorJITGenerator {
     for (var i = 0; i < r.args.length; ++i) {
       res += JSON.stringify(r.fixedArgs[i]);
       res += " + ";
-      res += this._localNames[r.args[i]];
+      res += `${UTIL}.s(${this._localNames[r.args[i]]})`;
       res += " + ";
     }
     res += JSON.stringify(r.fixedArgs[r.args.length]);

diff --git a/modules/angular2/src/change_detection/change_detection_util.ts b/modules/angular2/src/change_detection/change_detection_util.ts
@@ -151,4 +151,6 @@ export class ChangeDetectionUtil {
   }
 
   static isValueBlank(value: any): boolean { return isBlank(value); }
+
+  static s(value: any): string { return isPresent(value) ? `${value}` : ''; }
 }
diff --git a/modules/angular2/test/change_detection/change_detector_spec.ts b/modules/angular2/test/change_detection/change_detector_spec.ts
@@ -302,6 +302,15 @@ export function main() {
         expect(val.dispatcher.log).toEqual(['propName=BvalueA']);
       });
 
+      it('should output empty strings for null values in interpolation', () => {
+        var val = _createChangeDetector('interpolation', new TestData('value'));
+        val.changeDetector.hydrate(new TestData(null), null, null, null);
+
+        val.changeDetector.detectChanges();
+
+        expect(val.dispatcher.log).toEqual(['propName=BA']);
+      });
+
       it('should escape values in literals that indicate interpolation',
          () => { expect(_bindSimpleValue('"$"')).toEqual(['propName=$']); });
 

diff --git a/modules/angular2/test/core/compiler/integration_spec.ts b/modules/angular2/test/core/compiler/integration_spec.ts
@@ -50,8 +50,6 @@ import {
   PipeFactory,
   Pipes,
   defaultPipes,
-  ChangeDetection,
-  DynamicChangeDetection,
   Pipe,
   ChangeDetectorRef,
   ON_PUSH
@@ -96,6 +94,19 @@ export function main() {
                });
          }));
 
+      it('should update text node with a blank string when interpolation evaluates to null',
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+           tcb.overrideView(MyComp, new viewAnn.View({template: '<div>{{null}}{{ctxProp}}</div>'}))
+               .createAsync(MyComp)
+               .then((rootTC) => {
+                 rootTC.componentInstance.ctxProp = null;
+
+                 rootTC.detectChanges();
+                 expect(rootTC.nativeElement).toHaveText('');
+                 async.done();
+               });
+         }));
+
       it('should consume element binding changes',
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
            tcb.overrideView(MyComp, new viewAnn.View({template: '<div [id]="ctxProp"></div>'}))
-Original file line number
+Diff line change
@@ Expand Up / @@ -151,4 +151,6 @@ export class ChangeDetectionUtil { @@
       }
       static isValueBlank(value: any): boolean { return isBlank(value); }
+      static s(value: any): string { return isPresent(value) ? `${value}` : ''; }
     }