From d3bf54bdeb0fbd0f5c4eed5c9476d32d4f56aa9e Mon Sep 17 00:00:00 2001
From: Xander Garbett <xander.garbett@outlook.com>
Date: Sat, 11 Nov 2017 08:40:17 +0000
Subject: [PATCH] feat(core): add binding name to content changed error
 (#20352)

Adding the binding name to the error message recieved by the user gives
extra context on what exactly changed. The tests are also updated to
reflect the new error message.

PR Close #20352
---
 packages/core/src/view/util.ts                 | 5 +++--
 packages/core/test/view/component_view_spec.ts | 2 +-
 packages/core/test/view/embedded_view_spec.ts  | 2 +-
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/core/src/view/util.ts b/packages/core/src/view/util.ts
index dae387cb9f..90d1580c2a 100644
--- a/packages/core/src/view/util.ts
+++ b/packages/core/src/view/util.ts
@@ -98,9 +98,10 @@ export function checkBindingNoChanges(
     view: ViewData, def: NodeDef, bindingIdx: number, value: any) {
   const oldValue = view.oldValues[def.bindingIndex + bindingIdx];
   if ((view.state & ViewState.BeforeFirstCheck) || !devModeEqual(oldValue, value)) {
+    const bindingName = def.bindings[def.bindingIndex].name;
     throw expressionChangedAfterItHasBeenCheckedError(
-        Services.createDebugContext(view, def.nodeIndex), oldValue, value,
-        (view.state & ViewState.BeforeFirstCheck) !== 0);
+        Services.createDebugContext(view, def.nodeIndex), `${bindingName}: ${oldValue}`,
+        `${bindingName}: ${value}`, (view.state & ViewState.BeforeFirstCheck) !== 0);
   }
 }
 
diff --git a/packages/core/test/view/component_view_spec.ts b/packages/core/test/view/component_view_spec.ts
index 2ccba8ed1a..3f073ec7ff 100644
--- a/packages/core/test/view/component_view_spec.ts
+++ b/packages/core/test/view/component_view_spec.ts
@@ -132,7 +132,7 @@ const addEventListener = '__zone_symbol__addEventListener';
         value = 'v2';
         expect(() => Services.checkNoChangesView(view))
             .toThrowError(
-                `ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'v1'. Current value: 'v2'.`);
+                `ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'a: v1'. Current value: 'a: v2'.`);
       });
 
       it('should support detaching and attaching component views for dirty checking', () => {
diff --git a/packages/core/test/view/embedded_view_spec.ts b/packages/core/test/view/embedded_view_spec.ts
index 9ad1556b07..f0da7901f1 100644
--- a/packages/core/test/view/embedded_view_spec.ts
+++ b/packages/core/test/view/embedded_view_spec.ts
@@ -145,7 +145,7 @@ import {compViewDef, compViewDefFactory, createAndGetRootNodes, createEmbeddedVi
       childValue = 'v2';
       expect(() => Services.checkNoChangesView(parentView))
           .toThrowError(
-              `ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'v1'. Current value: 'v2'.`);
+              `ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'name: v1'. Current value: 'name: v2'.`);
     });
 
     it('should destroy embedded views', () => {