docs: update peek-a-boo example (angular#47219)

The peek-a-boo example image does not exactly reflect what happens. This updates the hook table and the image of the peek-a-boo output. Closes angular#40138 PR Close angular#47219

Author: thePunderWoman

aio/content/guide/lifecycle-hooks.md

@@ -40,7 +40,7 @@ Use them to perform the following kinds of operations.
 
 | Hook method | Purpose | Timing |
 |:--- |:--- |:--- |
-| `ngOnChanges()` | Respond when Angular sets or resets data-bound input properties. The method receives a `SimpleChanges` object of current and previous property values. <br /> <div class="alert is-helpful"> **NOTE**: <br /> This happens very frequently, so any operation you perform here impacts performance significantly. </div> See details in [Using change detection hooks](#onchanges) in this document. | Called before `ngOnInit()` \(if the component has bound inputs\) and whenever one or more data-bound input properties change. <br /> <div class="alert is-helpful"> **NOTE**: <br /> If your component has no inputs or you use it without providing any inputs, the framework will not call `ngOnChanges()`. </div> |
+| `ngOnChanges()` | Respond when Angular sets or resets data-bound input properties. The method receives a `SimpleChanges` object of current and previous property values. <br /> <div class="alert is-helpful"> **NOTE**: <br /> This happens frequently, so any operation you perform here impacts performance significantly. </div> See details in [Using change detection hooks](#onchanges) in this document. | Called before `ngOnInit()` \(if the component has bound inputs\) and whenever one or more data-bound input properties change. <br /> <div class="alert is-helpful"> **NOTE**: <br /> If your component has no inputs or you use it without providing any inputs, the framework will not call `ngOnChanges()`. </div> |
 | `ngOnInit()` | Initialize the directive or component after Angular first displays the data-bound properties and sets the directive or component's input properties. See details in [Initializing a component or directive](#oninit) in this document. | Called once, after the first `ngOnChanges()`. `ngOnInit()` is still called even when `ngOnChanges()` is not \(which is the case when there are no template-bound inputs\). |
 | `ngDoCheck()` | Detect and act upon changes that Angular can't or won't detect on its own. See details and example in [Defining custom change detection](#docheck) in this document. | Called immediately after `ngOnChanges()` on every change detection run, and immediately after `ngOnInit()` on the first run. |
 | `ngAfterContentInit()` | Respond after Angular projects external content into the component's view, or into the view that a directive is in. <br /> See details and example in [Responding to changes in content](#aftercontent) in this document. | Called *once* after the first `ngDoCheck()`. |
@@ -121,12 +121,16 @@ The sequence of log messages follows the prescribed hook calling order:
 |:--- |:--- |
 | 1 | `OnChanges` |
 | 2 | `OnInit` |
-| 3-5 | `DoCheck` |
-| 6 | `AfterContentInit` |
-| 7-9 | `AfterContentChecked` |
-| 10 | `AfterViewInit` |
-| 11-13 | `AfterViewChecked` |
-| 14 | `OnDestroy` |
+| 3 | `DoCheck` |
+| 4 | `AfterContentInit` |
+| 5 | `AfterContentChecked` |
+| 6 | `AfterViewInit` |
+| 7 | `AfterViewChecked` |
+| 8 | `DoCheck` |
+| 9 | `AfterContentChecked` |
+| 10 | `AfterViewChecked` |
+| 11 | `OnDestroy` |
+
 
 <div class="alert is-helpful">
 
@@ -151,8 +155,8 @@ The example does not perform any initialization or clean-up.
 It just tracks the appearance and disappearance of an element in the view by recording when the directive itself is instantiated and destroyed.
 
 A spy directive like this can provide insight into a DOM object that you cannot change directly.
-You can't touch the implementation of a built-in `<div>`, or modify a third party component.
-You can, however watch these elements with a directive.
+You can't access the implementation of a built-in `<div>`, or modify a third party component.
+You do have the option to watch these elements with a directive.
 
 The directive defines `ngOnInit()` and `ngOnDestroy()` hooks
 that log messages to the parent using an injected `LoggerService`.
@@ -253,8 +257,8 @@ The `LoggerService.tick_then()` statement postpones the log update for one turn
 
 #### Write lean hook methods to avoid performance problems
 
-When you run the *AfterView* sample, notice how frequently Angular calls `AfterViewChecked()`-often when there are no changes of interest.
-Be very careful about how much logic or computation you put into one of these methods.
+When you run the *AfterView* sample, notice how frequently Angular calls `AfterViewChecked()` - often when there are no changes of interest.
+Be careful about how much logic or computation you put into one of these methods.
 
 <div class="lightbox">
 
@@ -284,7 +288,7 @@ AngularJS developers know this technique as *transclusion*.
 The *AfterContent* sample explores the `AfterContentInit()` and `AfterContentChecked()` hooks that Angular calls *after* Angular projects external content into the component.
 
 Consider this variation on the [previous *AfterView*](#afterview) example.
-This time, instead of including the child view within the template, it imports the content from the `AfterContentComponent`'s parent.
+This time, instead of including the child view within the template, it imports the content from the `AfterContentComponent` hook's parent.
 The following is the parent's template.
 
 <code-example header="AfterContentParentComponent (template excerpt)" path="lifecycle-hooks/src/app/after-content-parent.component.ts" region="parent-template"></code-example>
@@ -354,7 +358,7 @@ The results are illuminating.
 
 </div>
 
-While the `ngDoCheck()` hook can detect when the hero's `name` has changed, it is very expensive.
+While the `ngDoCheck()` hook can detect when the hero's `name` has changed, it is an expensive hook.
 This hook is called with enormous frequency &mdash;after *every* change detection cycle no matter where the change occurred.
 It's called over twenty times in this example before the user can do anything.