From 03825cfab65e66c53e8c2e6de0f9da5414cfe775 Mon Sep 17 00:00:00 2001
From: iRealNirmal <nil4u.you@gmail.com>
Date: Tue, 11 May 2021 19:35:57 +0530
Subject: [PATCH] docs: updated animation docs intro section and example
 (#42046)

This commit updates the animation docs and provides better clarity for open-close component with it also added click event in open-close.component

Closes #39708

PR Close #42046
---
 .../animations/src/app/open-close.component.1.html  |  4 ++--
 aio/content/guide/animations.md                     | 13 ++++++++++++-
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/aio/content/examples/animations/src/app/open-close.component.1.html b/aio/content/examples/animations/src/app/open-close.component.1.html
index 4edd5000fa..1ef8dfc604 100644
--- a/aio/content/examples/animations/src/app/open-close.component.1.html
+++ b/aio/content/examples/animations/src/app/open-close.component.1.html
@@ -1,10 +1,10 @@
 <!-- #docplaster -->
+<!-- #docregion trigger -->
 <nav>
   <button (click)="toggle()">Toggle Open/Close</button>
 </nav>
 
-<!-- #docregion compare, trigger -->
 <div [@openClose]="isOpen ? 'open' : 'closed'" class="open-close-container">
   <p>The box is now {{ isOpen ? 'Open' : 'Closed' }}!</p>
 </div>
-<!-- #enddocregion compare, trigger -->
+<!-- #enddocregion trigger -->
diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md
index ae1e359630..401892699c 100644
--- a/aio/content/guide/animations.md
+++ b/aio/content/guide/animations.md
@@ -73,6 +73,17 @@ In HTML, these attributes are set using ordinary CSS styles such as color and op
   <img src="generated/images/guide/animations/open-closed.png" alt="open and closed states">
 </div>
 
+<div class="alert is-helpful">
+
+  Let's create a new `open-close` component to animate with simple transitions.
+
+  Run the following command in terminal to generate the component:
+
+  `ng g component open-close`
+
+  This will create the component at `src/app/open-close.component.ts`.
+</div>
+
 ### Animation state and styles
 
 Use Angular's `state()` function to define different states to call at the end of each transition. This function takes two arguments: a unique name like `open` or `closed` and a `style()` function.
@@ -192,7 +203,7 @@ The animation is executed or triggered when the expression value changes to a ne
 The following code snippet binds the trigger to the value of the `isOpen` property.
 
 <code-example path="animations/src/app/open-close.component.1.html" header="src/app/open-close.component.html"
-region="compare">
+region="trigger">
 </code-example>
 
 In this example, when the `isOpen` expression evaluates to a defined state of `open` or `closed`, it notifies the trigger `openClose` of a state change. Then it's up to the `openClose` code to handle the state change and kick off a state change animation.