From c40cbecdd1363aa323f0d4b43585aae67f8032bc Mon Sep 17 00:00:00 2001
From: Advaith3600 <advaitharunjeena@gmail.com>
Date: Thu, 9 Jul 2020 10:55:29 +0530
Subject: [PATCH] docs(animations): Added consistency in code examples (#37081)

PR Close #37081
---
 .../examples/animations/src/app/animations.ts        | 12 ++++++------
 .../examples/animations/src/app/app.component.html   |  2 +-
 aio/content/guide/route-animations.md                |  2 +-
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/aio/content/examples/animations/src/app/animations.ts b/aio/content/examples/animations/src/app/animations.ts
index d525647354..8b6abd5ec7 100644
--- a/aio/content/examples/animations/src/app/animations.ts
+++ b/aio/content/examples/animations/src/app/animations.ts
@@ -32,15 +32,15 @@ export const slideInAnimation =
 // #enddocregion style-view
 // #docregion query
       query(':enter', [
-        style({ left: '-100%'})
+        style({ left: '-100%' })
       ]),
       query(':leave', animateChild()),
       group([
         query(':leave', [
-          animate('300ms ease-out', style({ left: '100%'}))
+          animate('300ms ease-out', style({ left: '100%' }))
         ]),
         query(':enter', [
-          animate('300ms ease-out', style({ left: '0%'}))
+          animate('300ms ease-out', style({ left: '0%' }))
         ])
       ]),
       query(':enter', animateChild()),
@@ -56,15 +56,15 @@ export const slideInAnimation =
         })
       ]),
       query(':enter', [
-        style({ left: '-100%'})
+        style({ left: '-100%' })
       ]),
       query(':leave', animateChild()),
       group([
         query(':leave', [
-          animate('200ms ease-out', style({ left: '100%'}))
+          animate('200ms ease-out', style({ left: '100%' }))
         ]),
         query(':enter', [
-          animate('300ms ease-out', style({ left: '0%'}))
+          animate('300ms ease-out', style({ left: '0%' }))
         ])
       ]),
       query(':enter', animateChild()),
diff --git a/aio/content/examples/animations/src/app/app.component.html b/aio/content/examples/animations/src/app/app.component.html
index 1deca03101..78d1655313 100644
--- a/aio/content/examples/animations/src/app/app.component.html
+++ b/aio/content/examples/animations/src/app/app.component.html
@@ -17,7 +17,7 @@ Toggle All Animations <input type="checkbox" [checked]="!animationsDisabled" (cl
 </nav>
 
 <!-- #docregion route-animations-outlet -->
-<div [@routeAnimations]="prepareRoute(outlet)" >
+<div [@routeAnimations]="prepareRoute(outlet)">
   <router-outlet #outlet="outlet"></router-outlet>
 </div>
 <!-- #enddocregion route-animations-outlet -->
diff --git a/aio/content/guide/route-animations.md b/aio/content/guide/route-animations.md
index 72c572596e..924380a394 100644
--- a/aio/content/guide/route-animations.md
+++ b/aio/content/guide/route-animations.md
@@ -111,7 +111,7 @@ Let's assume that we are routing from the *Home => About*.
 
 The animation code does the following after styling the views:
 
-* `query(':enter style({ left: '-100%'})` matches the view that is added and hides the newly added view by positioning it to the far left.
+* `query(':enter', style({ left: '-100%' }))` matches the view that is added and hides the newly added view by positioning it to the far left.
 * Calls `animateChild()` on the view that is leaving, to run its child animations.
 * Uses `group()` function to make the inner animations run in parallel.
 * Within the `group()` function: