diff --git a/aio/content/guide/lifecycle-hooks.md b/aio/content/guide/lifecycle-hooks.md index 6649cf79b11..34c5aa9b654 100644 --- a/aio/content/guide/lifecycle-hooks.md +++ b/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.
**NOTE**:
This happens very frequently, so any operation you perform here impacts performance significantly.
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.
**NOTE**:
If your component has no inputs or you use it without providing any inputs, the framework will not call `ngOnChanges()`.
| +| `ngOnChanges()` | Respond when Angular sets or resets data-bound input properties. The method receives a `SimpleChanges` object of current and previous property values.
**NOTE**:
This happens frequently, so any operation you perform here impacts performance significantly.
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.
**NOTE**:
If your component has no inputs or you use it without providing any inputs, the framework will not call `ngOnChanges()`.
| | `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.
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` | +
@@ -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 `
`, 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 `
`, 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.
@@ -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. @@ -354,7 +358,7 @@ The results are illuminating.
-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 —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. diff --git a/aio/content/images/guide/lifecycle-hooks/peek-a-boo.png b/aio/content/images/guide/lifecycle-hooks/peek-a-boo.png index f799e89ff52..d603d818c22 100644 Binary files a/aio/content/images/guide/lifecycle-hooks/peek-a-boo.png and b/aio/content/images/guide/lifecycle-hooks/peek-a-boo.png differ