7
7
img( src ="/resources/images/devguide/lifecycle-hooks/hooks-in-sequence.png" alt ="Us" align ="left" style ="width:200px; margin-left:-40px;margin-right:30px" )
8
8
9
9
:marked
10
- A component has a lifecycle managed by Angular itself.
10
+ A component has a lifecycle managed by Angular itself.
11
11
12
12
Angular creates it, renders it, creates and renders its children,
13
13
checks it when its data-bound properties change, and destroys it before removing it from the DOM.
@@ -17,16 +17,13 @@ figure
17
17
18
18
A directive has the same set of lifecycle hooks, minus the hooks that are specific to component content and views.
19
19
<br class="l-clear-both">
20
- ## Table of Contents
21
- * [Overview](#hooks-overview)
22
- <br><br>
23
- * [Each hook's purpose and timing](#hooks-purpose-timing)
24
20
+ ifDocsFor('ts|js' )
25
21
:marked
22
+ ## Table of Contents
23
+ * [Overview](#hooks-overview)
24
+ * [Each hook's purpose and timing](#hooks-purpose-timing)
26
25
* [Interfaces are optional (technically)](#interface-optional)
27
- :marked
28
26
* [Other Angular lifecycle hooks](#other-lifecycle-hooks)
29
- <br><br>
30
27
* [The lifecycle sample](#the-sample)
31
28
* [All](#peek-a-boo)
32
29
* [Spying OnInit and OnDestroy](#spy)
40
37
a#hooks-overview
41
38
.l-main-section
42
39
:marked
43
- ## Component lifecycle Hooks
40
+ ## Component lifecycle hooks
44
41
Directive and component instances have a lifecycle
45
42
as Angular creates, updates, and destroys them.
46
43
Developers can tap into key moments in that lifecycle by implementing
@@ -58,7 +55,7 @@ a#hooks-purpose-timing
58
55
.l-main-section
59
56
:marked
60
57
## Lifecycle sequence
61
- *After* Angular creates a component/directive by `new`-ing its constructor ,
58
+ *After* Angular creates a component/directive,
62
59
it calls the lifecycle hook methods in the following sequence at specific moments:
63
60
table( width ="100%" )
64
61
col( width ="20%" )
@@ -535,6 +532,7 @@ figure.image-display
535
532
536
533
+ makeExample('lifecycle-hooks/ts/app/after-content.component.ts' , 'hooks' , 'AfterContentComponent (class excerpts)' )( format ="." )
537
534
535
+ a#no-unidirectional-flow-worries
538
536
:marked
539
537
### No unidirectional flow worries with _AfterContent..._
540
538
0 commit comments