From 451257a2fd4a4f2ed1301f66f2865c08a5b90125 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matias=20Niemel=C3=A4?= <matias@yearofmoo.com>
Date: Fri, 9 Jun 2017 15:22:43 -0700
Subject: [PATCH] fix(animations): do not treat a `0` animation state as `void`

---
 .../src/render/transition_animation_engine.ts |  2 +-
 .../animation/animation_integration_spec.ts   | 38 +++++++++++++++++++
 2 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/packages/animations/browser/src/render/transition_animation_engine.ts b/packages/animations/browser/src/render/transition_animation_engine.ts
index 6581527dc3..5423f37783 100644
--- a/packages/animations/browser/src/render/transition_animation_engine.ts
+++ b/packages/animations/browser/src/render/transition_animation_engine.ts
@@ -1218,7 +1218,7 @@ function normalizeTriggerValue(value: any): string {
     case 'boolean':
       return value ? '1' : '0';
     default:
-      return value ? value.toString() : null;
+      return value != null ? value.toString() : null;
   }
 }
 
diff --git a/packages/core/test/animation/animation_integration_spec.ts b/packages/core/test/animation/animation_integration_spec.ts
index 75e68f19b2..b94ffabf30 100644
--- a/packages/core/test/animation/animation_integration_spec.ts
+++ b/packages/core/test/animation/animation_integration_spec.ts
@@ -223,6 +223,44 @@ export function main() {
         ]);
       });
 
+      it('should allow a state value to be `0`', () => {
+        @Component({
+          selector: 'if-cmp',
+          template: `
+            <div [@myAnimation]="exp"></div>
+          `,
+          animations: [trigger(
+              'myAnimation',
+              [
+                transition(
+                    '0 => 1', [style({height: '0px'}), animate(1234, style({height: '100px'}))]),
+                transition(
+                    '* => 1', [style({width: '0px'}), animate(4567, style({width: '100px'}))])
+              ])]
+        })
+        class Cmp {
+          exp: any = false;
+        }
+
+        TestBed.configureTestingModule({declarations: [Cmp]});
+
+        const engine = TestBed.get(ɵAnimationEngine);
+        const fixture = TestBed.createComponent(Cmp);
+        const cmp = fixture.componentInstance;
+        cmp.exp = 0;
+        fixture.detectChanges();
+        engine.flush();
+        resetLog();
+
+        cmp.exp = 1;
+        fixture.detectChanges();
+        engine.flush();
+
+        expect(getLog().length).toEqual(1);
+        const player = getLog().pop() !;
+        expect(player.duration).toEqual(1234);
+      });
+
       it('should always cancel the previous transition if a follow-up transition is not matched',
          fakeAsync(() => {
            @Component({