From 8cf6c646c3572f3c757a3c9cb7bbb11174a9076f Mon Sep 17 00:00:00 2001
From: Can Kattw <kattwinkel@w11k.de>
Date: Fri, 7 Oct 2016 11:29:32 +0200
Subject: [PATCH] Step 5: Finalize Animation Trigger

---
 src/app/app.component.html |  2 +-
 src/app/app.component.ts   | 10 ++++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 719df75..ee13105 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -2,6 +2,6 @@ <h1>
   {{title}}
 </h1>
 
-<app-animation-target></app-animation-target>
+<app-animation-target [@wobble]="wobbleState" (@wobble.done)="reset()"></app-animation-target>
 
 <button (click)="triggerAnimation()">Click to Trigger the Animation</button>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 7e52241..f9b5b11 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,4 +1,4 @@
-import {Component, trigger, keyframes, animate, transition, style} from '@angular/core';
+import {Component, trigger, keyframes, animate, transition, style, NgZone} from '@angular/core';
 
 @Component({
   selector: 'app-root',
@@ -22,11 +22,17 @@ export class AppComponent {
   title = 'app works!';
   public wobbleState: string;
 
-  triggerAnimation() {
+  constructor(public zone: NgZone) {
+  }
 
+  triggerAnimation() {
+    this.wobbleState = "active";
   }
 
   reset() {
+    this.zone.run(() => {
+      this.wobbleState = "inactive";
+    });
   }
 
 }