From de8a6ae9edb185ad509dafde372507038fbcd6c0 Mon Sep 17 00:00:00 2001
From: David Shevitz <dshevitz@google.com>
Date: Tue, 25 May 2021 17:42:25 +0000
Subject: [PATCH] docs: add example that exports a part of an animation for
 reuse (#42321)

Fixes #41334

PR Close #42321
---
 .../animations/src/app/animations.1.ts        | 24 ++++++++++++++++---
 .../examples/animations/src/app/animations.ts |  2 --
 aio/content/guide/reusable-animations.md      | 18 +++++++-------
 3 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/aio/content/examples/animations/src/app/animations.1.ts b/aio/content/examples/animations/src/app/animations.1.ts
index ae7558f53d..507d4d7c89 100644
--- a/aio/content/examples/animations/src/app/animations.1.ts
+++ b/aio/content/examples/animations/src/app/animations.1.ts
@@ -1,7 +1,9 @@
-// #docregion
-import { animation, style, animate } from '@angular/animations';
+// #docplaster
+// #docregion animation-const, trigger-const
+import { animation, style, animate, trigger, transition, useAnimation } from '@angular/animations';
+// #enddocregion trigger-const
 
-export const transAnimation = animation([
+export const transitionAnimation = animation([
   style({
     height: '{{ height }}',
     opacity: '{{ opacity }}',
@@ -9,3 +11,19 @@ export const transAnimation = animation([
   }),
   animate('{{ time }}')
 ]);
+// #enddocregion animation-const
+
+// #docregion trigger-const
+export const triggerAnimation = trigger('openClose', [
+  transition('open => closed', [
+    useAnimation(transitionAnimation, {
+      params: {
+        height: 0,
+        opacity: 1,
+        backgroundColor: 'red',
+        time: '1s'
+      }
+    })
+  ])
+]);
+// #enddocregion trigger-const
diff --git a/aio/content/examples/animations/src/app/animations.ts b/aio/content/examples/animations/src/app/animations.ts
index 8b6abd5ec7..040985da9c 100644
--- a/aio/content/examples/animations/src/app/animations.ts
+++ b/aio/content/examples/animations/src/app/animations.ts
@@ -1,4 +1,3 @@
-// #docregion reusable
 import {
   animation, trigger, animateChild, group,
   transition, animate, style, query
@@ -12,7 +11,6 @@ export const transAnimation = animation([
   }),
   animate('{{ time }}')
 ]);
-// #enddocregion reusable
 
 // Routable animations
 // #docregion route-animations
diff --git a/aio/content/guide/reusable-animations.md b/aio/content/guide/reusable-animations.md
index fe3b44f1ea..1a31f5c78f 100644
--- a/aio/content/guide/reusable-animations.md
+++ b/aio/content/guide/reusable-animations.md
@@ -1,21 +1,19 @@
 # Reusable animations
 
-#### Prerequisites
+This topic provides some examples of how to create reusable animations.
 
-A basic understanding of the following concepts:
+## Prerequisites
+
+Before continuing with this topic, you should be familiar with the following:
 
 * [Introduction to Angular animations](guide/animations)
 * [Transition and triggers](guide/transition-and-triggers)
 
-<hr>
-
-The [AnimationOptions](api/animations/AnimationOptions) interface in Angular animations enables you to create animations that you can reuse across different components.
-
 ## Creating reusable animations
 
 To create a reusable animation, use the [`animation()`](api/animations/animation) method to define an animation in a separate `.ts` file and declare this animation definition as a `const` export variable. You can then import and reuse this animation in any of your application components using the [`useAnimation()`](api/animations/useAnimation) API.
 
-<code-example path="animations/src/app/animations.ts" header="src/app/animations.ts" region="reusable" language="typescript"></code-example>
+<code-example path="animations/src/app/animations.1.ts" header="src/app/animations.ts" region="animation-const" language="typescript"></code-example>
 
 In the above code snippet, `transAnimation` is made reusable by declaring it as an export variable.
 
@@ -24,7 +22,11 @@ In the above code snippet, `transAnimation` is made reusable by declaring it as
 **Note:** The `height`, `opacity`, `backgroundColor`, and `time` inputs are replaced during runtime.
 </div>
 
-You can import the reusable `transAnimation` variable in your component class and reuse it using the `useAnimation()` method as shown below.
+You can also export a part of an animation. For example, the following snippet exports the animation `trigger`.
+
+<code-example path="animations/src/app/animations.1.ts" header="src/app/animations.1.ts" region="trigger-const" language="typescript"></code-example>
+
+From this point, you can import resuable animation variables in your component class. For example, the following code snippet imports the `transAnimation` variable for use in the `useAnimation()` method.
 
 <code-example path="animations/src/app/open-close.component.3.ts" header="src/app/open-close.component.ts" region="reusable" language="typescript"></code-example>