Step 5: Finalize Animation Trigger

CanKattwinkel · Oct 7, 2016 · 8cf6c64 · 8cf6c64
1 parent deb14f5
commit 8cf6c64
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git 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
@@ -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";
+    });
   }
 
 }