<a id="top"></a> <h1>Component Lifecycle Hooks</h1> <a href="#hooks">Peek-a-boo: (most) lifecycle hooks</a><br> <a href="#onchanges">OnChanges</a><br> <a href="#docheck">DoCheck</a><br> <a href="#after-view">AfterViewInit & AfterViewChecked</a><br> <a href="#after-content">AfterContentInit & AfterContentChecked</a><br> <a href="#spy">Spy: directive with OnInit & OnDestroy</a><br> <a href="#counter">Counter: OnChanges + Spy directive</a><br> <a id="hooks"></a> <peek-a-boo-parent></peek-a-boo-parent> <a href="#top">back to top</a> <a id="spy"></a> <spy-parent></spy-parent> <a href="#top">back to top</a> <a id="onchanges"></a> <on-changes-parent></on-changes-parent> <a href="#top">back to top</a> <a id="docheck"></a> <do-check-parent></do-check-parent> <a href="#top">back to top</a> <a id="after-view"></a> <after-view-parent></after-view-parent> <a href="#top">back to top</a> <a id="after-content"></a> <after-content-parent></after-content-parent> <a href="#top">back to top</a> <a id="counter"></a> <counter-parent></counter-parent> <a href="#top">back to top</a>