@@ -301,52 +363,42 @@ The sequence of log messages follows the prescribed hook calling order:
- The constructor isn't an Angular hook *per se*.
- The log confirms that input properties (the `name` property in this case) have no assigned values at construction.
+ Notice that the log confirms that input properties (the `name` property in this case) have no assigned values at construction.
+ The input properties are available to the `onInit()` method for further initialization.
-Had the user clicked the *Update Hero* button, the log would show another `OnChanges` and two more triplets of
-`DoCheck`, `AfterContentChecked` and `AfterViewChecked`.
-Clearly these three hooks fire *often*. Keep the logic in these hooks as lean as possible!
-
-The next examples focus on hook details.
-
+Had the user clicked the *Update Hero* button, the log would show another `OnChanges` and two more triplets of `DoCheck`, `AfterContentChecked` and `AfterViewChecked`.
+Notice that these three hooks fire *often*, so it is important to keep their logic as lean as possible.
{@a spy}
-## Spying *OnInit* and *OnDestroy*
+### Use directives to watch the DOM
-Go undercover with these two spy hooks to discover when an element is initialized or destroyed.
+The `Spy` example demonstrates how you can use hook method for directives as well as components.
+The `SpyDirective` implements two hooks, `ngOnInit()` and `ngOnDestroy()`, in order to discover when a watched element is in the current view.
-This is the perfect infiltration job for a directive.
-The heroes will never know they're being watched.
+This template applies the `SpyDirective` to a `` in the `ngFor` *hero* repeater managed by the parent `SpyComponent`.
-
+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.
- Kidding aside, pay attention to two key points:
+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 native `
`, or modify a third party component.
+You can, however watch these elements with a directive.
- 1. Angular calls hook methods for *directives* as well as components.
- - 2. A spy directive can provide insight into a DOM object that you cannot change directly. - Obviously you can't touch the implementation of a native `
- - 2. A spy directive can provide insight into a DOM object that you cannot change directly. - Obviously you can't touch the implementation of a native `
`.
- You can't modify a third party component either.
- But you can watch both with a directive.
-
-
-
-The sneaky spy directive is simple, consisting almost entirely of `ngOnInit()` and `ngOnDestroy()` hooks
+The directive defines `ngOnInit()` and `ngOnDestroy()` hooks
that log messages to the parent via an injected `LoggerService`.
`:
`
+Each spy's creation and destruction marks the appearance and disappearance of the attached hero `
`
with an entry in the *Hook Log* as seen here:
@@ -359,70 +411,20 @@ The *Reset* button clears the `heroes` list.
Angular removes all hero `` tags in the component's template.
` tag is tucked between the `` tags.
Never put content between a component's element tags *unless you intend to project that content
into the component*.
-Now look at the component's template:
+Now look at the component's template.
` from the parent.
-` elements from the DOM and destroys their spy directives at the same time.
The spy's `ngOnDestroy()` method reports its last moments.
-The `ngOnInit()` and `ngOnDestroy()` methods have more vital roles to play in real applications.
+{@a counter}
-{@a oninit}
+### Use component and directive hooks together
-### _OnInit()_
+In this example, a `CounterComponent` uses the `ngOnChanges()` method to log a change every time the parent component increments its input `counter` property.
-Use `ngOnInit()` for two main reasons:
-
-1. To perform complex initializations shortly after construction.
-1. To set up the component after Angular sets the input properties.
-
-Experienced developers agree that components should be cheap and safe to construct.
-
-
The log entries appear as the string value of the *power* property changes.
-But the `ngOnChanges` does not catch changes to `hero.name`
-That's surprising at first.
+Notice, however, that the `ngOnChanges()` method does not catch changes to `hero.name`.
+This is because Angular calls the hook only when the value of the input property changes.
+In this case, `hero` is the input property, and the value of the `hero` property is the *reference to the hero object*.
+The object reference did not change when the value of its own `name` property changed.
-Angular only calls the hook when the value of the input property changes.
-The value of the `hero` property is the *reference to the hero object*.
-Angular doesn't care that the hero's own `name` property changed.
-The hero object *reference* didn't change so, from Angular's perspective, there is no change to report!
-
-{@a docheck}
-
-## _DoCheck()_
-
-Use the `DoCheck` hook to detect and act upon changes that Angular doesn't catch on its own.
-
-
-
- Misko Hevery, Angular team lead,
- [explains why](http://misko.hevery.com/code-reviewers-guide/flaw-constructor-does-real-work/)
- you should avoid complex constructor logic.
-
-
-
-Don't fetch data in a component constructor.
-You shouldn't worry that a new component will try to contact a remote server when
-created under test or before you decide to display it.
-Constructors should do no more than set the initial local variables to simple values.
-
-An `ngOnInit()` is a good place for a component to fetch its initial data. The
-[Tour of Heroes Tutorial](tutorial/toh-pt4#oninit) guide shows how.
-
-
-Remember also that a directive's data-bound input properties are not set until _after construction_.
-That's a problem if you need to initialize the directive based on those properties.
-They'll have been set when `ngOnInit()` runs.
-
-
-
- The `ngOnChanges()` method is your first opportunity to access those properties.
- Angular calls `ngOnChanges()` before `ngOnInit()` and many times after that.
- It only calls `ngOnInit()` once.
-
-
-
-You can count on Angular to call the `ngOnInit()` method _soon_ after creating the component.
-That's where the heavy initialization logic belongs.
-
-{@a ondestroy}
-
-### _OnDestroy()_
-
-Put cleanup logic in `ngOnDestroy()`, the logic that *must* run before Angular destroys the directive.
-
-This is the time to notify another part of the application that the component is going away.
-
-This is the place to free resources that won't be garbage collected automatically.
-Unsubscribe from Observables and DOM events. Stop interval timers.
-Unregister all callbacks that this directive registered with global or application services.
-You risk memory leaks if you neglect to do so.
+This example applies the `SpyDirective` from the previous example to the `CounterComponent` log, in order to watch the creation and destruction of log entries.
{@a onchanges}
-## _OnChanges()_
+## Using change detection hooks
-Angular calls its `ngOnChanges()` method whenever it detects changes to ***input properties*** of the component (or directive).
-This example monitors the `OnChanges` hook.
+Angular calls the `ngOnChanges()` method of a component or directive whenever it detects changes to the ***input properties***.
+The *onChanges* example demonstrates this by monitoring the `OnChanges()` hook.
-
- Use this method to detect a change that Angular overlooked.
-
-
-
-The *DoCheck* sample extends the *OnChanges* sample with the following `ngDoCheck()` hook:
-
-
- 
-
-
-While the `ngDoCheck()` hook can detect when the hero's `name` has changed, it has a frightful cost.
-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.
-
-Most of these initial checks are triggered by Angular's first rendering of *unrelated data elsewhere on the page*.
-Mere mousing into another `` triggers a call.
-Relatively few calls reveal actual changes to pertinent data.
-Clearly our implementation must be very lightweight or the user experience suffers.
{@a afterview}
-## AfterView
+### Responding to view changes
+
+As Angular traverses the [view hierarchy](guide/glossary#view-hierarchy "Definition of view hierarchy definition") during change detection, it needs to be sure that a change in a child does not attempt to cause a change in its own parent. Such a change would not be rendered properly, because of how [unidirectional data flow](guide/glossary#unidirectional-data-flow "Definition") works.
+
+If you need to make a change that inverts the expected data flow, you must trigger a new change detection cycle to allow that change to be rendered.
+The examples illustrate how to make such changes safely.
The *AfterView* sample explores the `AfterViewInit()` and `AfterViewChecked()` hooks that Angular calls
*after* it creates a component's child views.
@@ -506,47 +477,46 @@ The following hooks take action based on changing values *within the child view*
which can only be reached by querying for the child view via the property decorated with
[@ViewChild](api/core/ViewChild).
-
-
+
+
-Notice that Angular frequently calls `AfterViewChecked()`, often when there are no changes of interest.
-Write lean hook methods to avoid performance problems.
{@a aftercontent}
-
-## AfterContent
-
-The *AfterContent* sample explores the `AfterContentInit()` and `AfterContentChecked()` hooks that Angular calls
-*after* Angular projects external content into the component.
-
+{@a aftercontent-hooks}
{@a content-projection}
-### Content projection
+### Responding to projected content changes
*Content projection* is a way to import HTML content from outside the component and insert that content
into the component's template in a designated spot.
+You can identify content projection in a template by looking for the following constructs.
+
+ * HTML between component element tags.
+ * The presence of `
+
@@ -554,9 +524,12 @@ into the component's template in a designated spot.
-Consider this variation on the [previous _AfterView_](guide/lifecycle-hooks#afterview) example.
+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. Here's the parent's template:
+the `AfterContentComponent`'s parent.
+The following is the parent's template.
- The telltale signs of *content projection* are twofold:
-
- * HTML between component element tags.
- * The presence of `` tags in the component's template.
-
-
-
-{@a aftercontent-hooks}
-
-### AfterContent hooks
+#### Using AfterContent hooks
*AfterContent* hooks are similar to the *AfterView* hooks.
The key difference is in the child component.
@@ -606,11 +569,44 @@ which can only be reached by querying for them via the property decorated with
{@a no-unidirectional-flow-worries}
-### No unidirectional flow worries with _AfterContent_
+
+
+{@a docheck}
+
+## Defining custom change detection
+
+To monitor changes that occur where `ngOnChanges()` won't catch them, you can implement your own change check, as shown in the *DoCheck* example.
+This example shows how you can use the `ngDoCheck()` hook to detect and act upon changes that Angular doesn't catch on its own.
+
+The *DoCheck* sample extends the *OnChanges* sample with the following `ngDoCheck()` hook:
+
+
+
+
+
+While the `ngDoCheck()` hook can detect when the hero's `name` has changed, it is very expensive.
+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.
+
+Most of these initial checks are triggered by Angular's first rendering of *unrelated data elsewhere on the page*.
+Just moving the cursor into another `` triggers a call.
+Relatively few calls reveal actual changes to pertinent data.
+If you use this hook, your implementation must be extremely lightweight or the user experience suffers.
diff --git a/aio/content/navigation.json b/aio/content/navigation.json
index 01d72d0d02..a65afe8401 100644
--- a/aio/content/navigation.json
+++ b/aio/content/navigation.json
@@ -215,7 +215,7 @@
},
{
"url": "guide/lifecycle-hooks",
- "title": "Lifecycle Hooks",
+ "title": "Hook into the Component Lifecycle",
"tooltip": "Angular calls lifecycle hook methods on directives and components as it creates, changes, and destroys them."
},
{
+