Skip to content
Snippets Groups Projects
Commit c5b3f1c1 authored by Jessica Janiuk's avatar Jessica Janiuk Committed by Alex Rickabaugh
Browse files

docs: update peek-a-boo example (#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 #40138

PR Close #47219
parent b3432012
No related merge requests found
......@@ -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.
......
aio/content/images/guide/lifecycle-hooks/peek-a-boo.png

31.6 KiB | W: | H:

aio/content/images/guide/lifecycle-hooks/peek-a-boo.png

49.8 KiB | W: | H:

aio/content/images/guide/lifecycle-hooks/peek-a-boo.png
aio/content/images/guide/lifecycle-hooks/peek-a-boo.png
aio/content/images/guide/lifecycle-hooks/peek-a-boo.png
aio/content/images/guide/lifecycle-hooks/peek-a-boo.png
  • 2-up
  • Swipe
  • Onion skin
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment