diff --git a/aio/content/guide/architecture.md b/aio/content/guide/architecture.md
index c9fa04e345..3d935b464c 100644
--- a/aio/content/guide/architecture.md
+++ b/aio/content/guide/architecture.md
@@ -1,10 +1,4 @@
-@title
-Architecture Overview
-
-@intro
-The basic building blocks of Angular applications.
-
-@description
+# Architecture Overview
Angular is a framework for building client applications in HTML and
either JavaScript or a language like TypeScript that compiles to JavaScript.
@@ -26,25 +20,9 @@ You'll learn the details in the pages that follow. For now, focus on the big pic
-
-
-The code referenced on this page is available as a .
+ The code referenced on this page is available as a .
@@ -71,11 +49,11 @@ An Angular module, whether a _root_ or _feature_, is a class with an `@NgModule`
-Decorators are functions that modify JavaScript classes.
-Angular has many decorators that attach metadata to classes so that it knows
-what those classes mean and how they should work.
-
-Learn more about decorators on the web.
+ Decorators are functions that modify JavaScript classes.
+ Angular has many decorators that attach metadata to classes so that it knows
+ what those classes mean and how they should work.
+
+ Learn more about decorators on the web.
@@ -100,7 +78,7 @@ Here's a simple root module:
-The `export` of `AppComponent` is just to show how to export; it isn't actually necessary in this example. A root module has no reason to _export_ anything because other components don't need to _import_ the root module.
+ The `export` of `AppComponent` is just to show how to export; it isn't actually necessary in this example. A root module has no reason to _export_ anything because other components don't need to _import_ the root module.
@@ -125,12 +103,9 @@ Other JavaScript modules use *import statements* to access public objects from o
-
These are two different and _complementary_ module systems. Use them both to write your apps.
### Angular libraries
@@ -164,7 +139,7 @@ Hang in there. The confusion yields to clarity with time and experience.
-Learn more from the [Angular modules](guide/ngmodule) page.
+ Learn more from the [Angular modules](guide/ngmodule) page.
@@ -248,7 +223,6 @@ Here's some metadata for `HeroListComponent`:
Here is the `@Component` decorator, which identifies the class
immediately below it as a component class.
-
The `@Component` decorator takes a required configuration object with the
information Angular needs to create and present the component and its view.
@@ -261,12 +235,10 @@ Angular inserts an instance of the `HeroListComponent` view between those tags.
* `templateUrl`: module-relative address of this component's HTML template, shown [above](guide/architecture#templates).
-
* `providers`: array of **dependency injection providers** for services that the component requires.
This is one way to tell Angular that the component's constructor requires a `HeroService`
so it can get the list of heroes to display.
-
The metadata in the `@Component` tells Angular where to get the major building blocks you specify for the component.
@@ -284,6 +256,7 @@ so that Angular knows what to do.
## Data binding
+
Without a framework, you would be responsible for pushing data values into the HTML controls and turning user responses
into actions and value updates. Writing such push/pull logic by hand is tedious, error-prone, and a nightmare to
read as any experienced jQuery programmer can attest.
@@ -335,7 +308,7 @@ Data binding plays an important role in communication between a template and its
Data binding is also important for communication between parent and child components.
-
+
## Directives
@@ -348,10 +321,10 @@ A directive is a class with a `@Directive` decorator.
A component is a *directive-with-a-template*;
a `@Component` decorator is actually a `@Directive` decorator extended with template-oriented features.
-
+
-While **a component is technically a directive**,
-components are so distinctive and central to Angular applications that this architectural overview separates components from directives.
+ While **a component is technically a directive**,
+ components are so distinctive and central to Angular applications that this architectural overview separates components from directives.
@@ -386,6 +359,7 @@ or modify aspects of DOM elements and components
Of course, you can also write your own directives. Components such as
`HeroListComponent` are one kind of custom directive.
+
@@ -397,7 +371,8 @@ Of course, you can also write your own directives. Components such as
_Service_ is a broad category encompassing any value, function, or feature that your application needs.
Almost anything can be a service.
-A service is typically a class with a narrow, well-defined purpose. It should do something specific and do it well.
+A service is typically a class with a narrow, well-defined purpose. It should do something specific and do it well.
+
Examples include:
@@ -472,7 +447,6 @@ The process of `HeroService` injection looks a bit like this:
-
If the injector doesn't have a `HeroService`, how does it know how to make one?
In brief, you must have previously registered a **provider** of the `HeroService` with the injector.
@@ -554,6 +528,5 @@ by implementing the lifecycle hook interfaces.
> [**Router**](guide/router): Navigate from page to page within the client
application and never leave the browser.
-
> [**Testing**](guide/testing): Run unit tests on your application parts as they interact with the Angular framework
using the _Angular Testing Platform_.
diff --git a/aio/content/guide/lifecycle-hooks.md b/aio/content/guide/lifecycle-hooks.md
index b5276414cc..fe64000ead 100644
--- a/aio/content/guide/lifecycle-hooks.md
+++ b/aio/content/guide/lifecycle-hooks.md
@@ -1,10 +1,4 @@
-@title
-Lifecycle Hooks
-
-@intro
-Angular calls lifecycle hook methods on directives and components as it creates, changes, and destroys them.
-
-@description
+# Lifecycle Hooks
@@ -17,45 +11,11 @@ Angular offers **lifecycle hooks**
that provide visibility into these key life moments and the ability to act when they occur.
A directive has the same set of lifecycle hooks, minus the hooks that are specific to component content and views.
-
-
-
{@a hooks-overview}
-
-
## Component lifecycle hooks overview
+
Directive and component instances have a lifecycle
as Angular creates, updates, and destroys them.
Developers can tap into key moments in that lifecycle by implementing
@@ -65,108 +25,69 @@ Each interface has a single hook method whose name is the interface name prefixe
For example, the `OnInit` interface has a hook method named `ngOnInit()`
that Angular calls shortly after creating the component:
-
-
-
-
-
+
No directive or component will implement all of the lifecycle hooks and some of the hooks only make sense for components.
Angular only calls a directive/component hook method *if it is defined*.
-
{@a hooks-purpose-timing}
-
-
## Lifecycle sequence
+
*After* creating a component/directive by calling its constructor, Angular
calls the lifecycle hook methods in the following sequence at specific moments:
-
-
-
-
-
-
-
-
-
+
+
-
-
- Hook
-
-
-
- Purpose and Timing
-
-
+
Hook
+
Purpose and Timing
-
-
ngOnChanges()
-
-
Respond when Angular (re)sets data-bound input properties.
The method receives a `SimpleChanges` object of current and previous property values.
Called before `ngOnInit()` and whenever one or more data-bound input properties change.
-
-
-
ngOnInit()
-
-
Initialize the directive/component after Angular first displays the data-bound properties
and sets the directive/component's input properties.
Called _once_, after the _first_ `ngOnChanges()`.
-
-
-
ngDoCheck()
-
-
Detect and act upon changes that Angular can't or won't detect on its own.
Called during every change detection run, immediately after `ngOnChanges()` and `ngOnInit()`.
-
-
-
ngAfterContentInit()
-
-
Respond after Angular projects external content into the component's view.
Called _once_ after the first `ngDoCheck()`.
@@ -174,18 +95,13 @@ calls the lifecycle hook methods in the following sequence at specific moments:
_A component-only hook_.
-
-
-
ngAfterContentChecked()
-
-
Respond after Angular checks the content projected into the component.
Called after the `ngAfterContentInit()` and every subsequent `ngDoCheck()`.
@@ -193,18 +109,13 @@ calls the lifecycle hook methods in the following sequence at specific moments:
_A component-only hook_.
-
-
-
ngAfterViewInit()
-
-
Respond after Angular initializes the component's views and child views.
Called _once_ after the first `ngAfterContentChecked()`.
@@ -212,18 +123,13 @@ calls the lifecycle hook methods in the following sequence at specific moments:
_A component-only hook_.
-
-
-
ngAfterViewChecked()
-
-
Respond after Angular checks the component's views and child views.
Called after the `ngAfterViewInit` and every subsequent `ngAfterContentChecked()`.
@@ -231,35 +137,24 @@ calls the lifecycle hook methods in the following sequence at specific moments:
_A component-only hook_.
-
-
-
ngOnDestroy
-
-
Cleanup just before Angular destroys the directive/component.
Unsubscribe Observables and detach event handlers to avoid memory leaks.
Called _just before_ Angular destroys the directive/component.
-
-
-
-
{@a interface-optional}
-
-
## Interfaces are optional (technically)
The interfaces are optional for JavaScript and Typescript developers from a purely technical perspective.
@@ -275,16 +170,12 @@ Angular finds and calls methods like `ngOnInit()`, with or without the interface
Nonetheless, it's good practice to add interfaces to TypeScript directive classes
in order to benefit from strong typing and editor tooling.
-
{@a other-lifecycle-hooks}
-
-
## Other Angular lifecycle hooks
Other Angular sub-systems may have their own lifecycle hooks apart from these component hooks.
-
3rd party libraries might implement their hooks as well in order to give developers more
control over how these libraries are used.
@@ -301,134 +192,91 @@ a *child* component that illustrates one or more of the lifecycle hook methods.
Here's a brief description of each exercise:
-
-
Directives have lifecycle hooks too.
A `SpyDirective` can log when the element it spies upon is
created or destroyed using the `ngOnInit` and `ngOnDestroy` hooks.
This example applies the `SpyDirective` to a `
` in an `ngFor` *hero* repeater
managed by the parent `SpyComponent`.
+
-
See how Angular calls the `ngOnChanges()` hook with a `changes` object
every time one of the component input properties changes.
Shows how to interpret the `changes` object.
+
-
Shows how to project external content into a component and
how to distinguish projected content from a component's view children.
Demonstrates the `ngAfterContentInit` and `ngAfterContentChecked` hooks.
+
-
-
-
Counter
-
-
Demonstrates a combination of a component and a directive
each with its own hooks.
@@ -438,21 +286,15 @@ Here's a brief description of each exercise:
to the `CounterComponent` log where it watches log entries being created and destroyed.
-
-
-
-
The remainder of this page discusses selected exercises in further detail.
-
{@a peek-a-boo}
-
-
## Peek-a-boo: all hooks
+
The `PeekABooComponent` demonstrates all of the hooks in one component.
You would rarely, if ever, implement all of the interfaces like this.
@@ -464,24 +306,17 @@ This snapshot reflects the state of the log after the user clicked the *Create..
-
-
The sequence of log messages follows the prescribed hook calling order:
`OnChanges`, `OnInit`, `DoCheck` (3x), `AfterContentInit`, `AfterContentChecked` (3x),
`AfterViewInit`, `AfterViewChecked` (3x), and `OnDestroy`.
-
-
-
-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.
+ 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.
-
-
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!
@@ -491,8 +326,6 @@ The next examples focus on hook details.
{@a spy}
-
-
## Spying *OnInit* and *OnDestroy*
Go undercover with these two spy hooks to discover when an element is initialized or destroyed.
@@ -500,56 +333,37 @@ Go undercover with these two spy hooks to discover when an element is initialize
This is the perfect infiltration job for a directive.
The heroes will never know they're being watched.
-
+ Kidding aside, pay attention to two key points:
+ 1. Angular calls hook methods for *directives* as well as components.
-Kidding aside, pay attention to two key points:
-
-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 `
`.
-You can't modify a third party component either.
-But you can watch both with a directive.
-
-
+ 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
that log messages to the parent via an injected `LoggerService`.
-
-
-
-
-
-
+
You can apply the spy to any native or component element and it'll be initialized and destroyed
at the same time as that element.
Here it is attached to the repeated hero `
`:
-
-
-
-
-
+
Each spy's birth and death marks the birth and death of the attached hero `
`
with an entry in the *Hook Log* as seen here:
-
-
-
Adding a hero results in a new hero `
`. The spy's `ngOnInit()` logs that event.
The *Reset* button clears the `heroes` list.
@@ -560,7 +374,6 @@ The `ngOnInit()` and `ngOnDestroy()` methods have more vital roles to play in re
{@a oninit}
-
### _OnInit()_
Use `ngOnInit()` for two main reasons:
@@ -572,17 +385,12 @@ Experienced developers agree that components should be cheap and safe to constru
-
-
-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.
-
+ 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.
@@ -599,23 +407,17 @@ 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.
+ 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.
@@ -627,21 +429,14 @@ 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.
-
-
{@a onchanges}
-
## _OnChanges()_
Angular calls its `ngOnChanges()` method whenever it detects changes to ***input properties*** of the component (or directive).
This example monitors the `OnChanges` hook.
-
-
-
-
-
+
The `ngOnChanges()` method takes an object that maps each changed property name to a
[SimpleChange](api/core/SimpleChange) object holding the current and previous property values.
@@ -649,30 +444,18 @@ This hook iterates over the changed properties and logs them.
The example component, `OnChangesComponent`, has two input properties: `hero` and `power`.
-
-
-
-
-
+
The host `OnChangesParentComponent` binds to them like this:
-
-
-
-
-
-
+
Here's the sample in action as the user makes changes.
-
-
-
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.
@@ -682,43 +465,30 @@ 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.
-
-
-Use this method to detect a change that Angular overlooked.
+ Use this method to detect a change that Angular overlooked.
-
-
The *DoCheck* sample extends the *OnChanges* sample with the following `ngDoCheck()` hook:
-
-
-
-
-
+
This code inspects certain _values of interest_, capturing and comparing their current state against previous values.
It writes a special message to the log when there are no substantive changes to the `hero` or the `power`
so you can see how often `DoCheck` is called. The results are illuminating:
-
-
-
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.
@@ -729,54 +499,34 @@ 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
+
The *AfterView* sample explores the `AfterViewInit()` and `AfterViewChecked()` hooks that Angular calls
*after* it creates a component's child views.
Here's a child view that displays a hero's name in an ``:
-
-
-
-
-
+
The `AfterViewComponent` displays this child view *within its template*:
-
-
-
-
-
+
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).
-
-
-
-
-
+
{@a wait-a-tick}
-
### Abide by the unidirectional data flow rule
The `doSomething()` method updates the screen when the hero name exceeds 10 characters.
-
-
-
-
-
-
+
Why does the `doSomething()` method wait a tick before updating `comment`?
@@ -787,56 +537,40 @@ Angular throws an error if the hook updates the component's data-bound `comment`
The `LoggerService.tick_then()` postpones the log update
for one turn of the browser's JavaScript cycle and that's just long enough.
-
Here's *AfterView* in action:
-
-
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 content-projection}
-
### Content projection
+
*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.
-
-
-
-AngularJS developers know this technique as *transclusion*.
-
+ AngularJS developers know this technique as *transclusion*.
-
-
Consider this variation on the [previous _AfterView_](guide/lifecycle-hooks#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:
-
-
-
-
-
+
Notice that the `` tag is tucked between the `` tags.
Never put content between a component's element tags *unless you intend to project that content
@@ -844,11 +578,7 @@ into the component*.
Now look at the component's template:
-
-
-
-
-
+
The `` tag is a *placeholder* for the external content.
It tells Angular where to insert that content.
@@ -858,27 +588,17 @@ In this case, the projected content is the `` from the parent.
-
-
-
-
-
-
-The telltale signs of *content projection* are twofold:
+ 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
*AfterContent* hooks are similar to the *AfterView* hooks.
@@ -894,16 +614,10 @@ The following *AfterContent* hooks take action based on changing values in a *co
which can only be reached by querying for them via the property decorated with
[@ContentChild](api/core/ContentChild).
-
-
-
-
-
-
+
{@a no-unidirectional-flow-worries}
-
### No unidirectional flow worries with _AfterContent_
This component's `doSomething()` method update's the component's data-bound `comment` property immediately.
diff --git a/aio/content/guide/set-document-title.md b/aio/content/guide/set-document-title.md
index f810f6577f..9473f4da78 100644
--- a/aio/content/guide/set-document-title.md
+++ b/aio/content/guide/set-document-title.md
@@ -1,28 +1,19 @@
-@title
-Set the Document Title
-
-@intro
-Setting the document or window title using the Title service.
-
-@description
-
-
{@a top}
+# Set the Document Title
Your app should be able to make the browser title bar say whatever you want it to say.
This cookbook explains how to do it.
See the .
-
+
+
+
-
-
-
-To see the browser title bar change in the live example,
-open it again in the Plunker editor by clicking the icon in the upper right,
-then pop out the preview window by clicking the blue 'X' button in the upper right corner.
+ To see the browser title bar change in the live example,
+ open it again in the Plunker editor by clicking the icon in the upper right,
+ then pop out the preview window by clicking the blue 'X' button in the upper right corner.
@@ -34,8 +25,6 @@ The obvious approach is to bind a property of the component to the HTML `
<title>{{This_Does_Not_Work}}</title>
</code-example>
-
-
Sorry but that won't work.
The root component of the application is an element contained within the `<body>` tag.
The HTML `<title>` is in the document `<head>`, outside the body, making it inaccessible to Angular data binding.
@@ -45,19 +34,15 @@ That's dirty and undermines your chances of running the app outside of a browser
<div class="l-sub-section">
-
-
-Running your app outside a browser means that you can take advantage of server-side
-pre-rendering for near-instant first app render times and for SEO. It means you could run from
-inside a Web Worker to improve your app's responsiveness by using multiple threads. And it
-means that you could run your app inside Electron.js or Windows Universal to deliver it to the desktop.
-
+ Running your app outside a browser means that you can take advantage of server-side
+ pre-rendering for near-instant first app render times and for SEO. It means you could run from
+ inside a Web Worker to improve your app's responsiveness by using multiple threads. And it
+ means that you could run your app inside Electron.js or Windows Universal to deliver it to the desktop.
</div>
+## Use the `Title` service
-
-## Use the *Title* service
Fortunately, Angular bridges the gap by providing a `Title` service as part of the *Browser platform*.
The [Title](api/platform-browser/Title) service is a simple class that provides an API
for getting and setting the current HTML document title:
@@ -68,11 +53,7 @@ for getting and setting the current HTML document title:
You can inject the `Title` service into the root `AppComponent` and expose a bindable `setTitle` method that calls it:
-<code-example path="set-document-title/src/app/app.component.ts" region="class" title="src/app/app.component.ts (class)" linenums="false">
-
-</code-example>
-
-
+<code-example path="set-document-title/src/app/app.component.ts" region="class" title="src/app/app.component.ts (class)" linenums="false"></code-example>
Bind that method to three anchor tags and voilà!
@@ -80,31 +61,15 @@ Bind that method to three anchor tags and voilà!
<img src="generated/images/guide/set-document-title/set-title-anim.gif" alt="Set title">
</figure>
-
-
Here's the complete solution:
-
<code-tabs>
-
- <code-pane title="src/main.ts" path="set-document-title/src/main.ts">
-
- </code-pane>
-
- <code-pane title="src/app/app.module.ts" path="set-document-title/src/app/app.module.ts">
-
- </code-pane>
-
- <code-pane title="src/app/app.component.ts" path="set-document-title/src/app/app.component.ts">
-
- </code-pane>
-
+ <code-pane title="src/main.ts" path="set-document-title/src/main.ts"></code-pane>
+ <code-pane title="src/app/app.module.ts" path="set-document-title/src/app/app.module.ts"></code-pane>
+ <code-pane title="src/app/app.component.ts" path="set-document-title/src/app/app.component.ts"></code-pane>
</code-tabs>
-
-
-
-## Why provide the *Title* service in *bootstrap*
+## Why provide the `Title` service in `bootstrap`
Generally you want to provide application-wide services in the root application component, `AppComponent`.
diff --git a/aio/content/marketing/docs.md b/aio/content/marketing/docs.md
index 4291282622..8fcd47d77b 100644
--- a/aio/content/marketing/docs.md
+++ b/aio/content/marketing/docs.md
@@ -2,7 +2,7 @@
Angular is a platform that makes it easy to build applications with the web. Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop
-<div class="card-container clearfix">
+<div class="card-container">
<a href="generated/live-examples/quickstart/eplnkr.html" target="_blank" class="card"
title="Experience Angular in a live coding environment">
<section>Experience Angular</section>
-
-
The metadata in the `@Component` tells Angular where to get the major building blocks you specify for the component.
@@ -284,6 +256,7 @@ so that Angular knows what to do.
-
If the injector doesn't have a `HeroService`, how does it know how to make one?
In brief, you must have previously registered a **provider** of the `HeroService` with the injector.
@@ -554,6 +528,5 @@ by implementing the lifecycle hook interfaces.
> [**Router**](guide/router): Navigate from page to page within the client
application and never leave the browser.
-
> [**Testing**](guide/testing): Run unit tests on your application parts as they interact with the Angular framework
using the _Angular Testing Platform_.
diff --git a/aio/content/guide/lifecycle-hooks.md b/aio/content/guide/lifecycle-hooks.md
index b5276414cc..fe64000ead 100644
--- a/aio/content/guide/lifecycle-hooks.md
+++ b/aio/content/guide/lifecycle-hooks.md
@@ -1,10 +1,4 @@
-@title
-Lifecycle Hooks
-
-@intro
-Angular calls lifecycle hook methods on directives and components as it creates, changes, and destroys them.
-
-@description
+# Lifecycle Hooks
@@ -17,45 +11,11 @@ Angular offers **lifecycle hooks**
that provide visibility into these key life moments and the ability to act when they occur.
A directive has the same set of lifecycle hooks, minus the hooks that are specific to component content and views.
-
-
-
The sequence of log messages follows the prescribed hook calling order:
`OnChanges`, `OnInit`, `DoCheck` (3x), `AfterContentInit`, `AfterContentChecked` (3x),
`AfterViewInit`, `AfterViewChecked` (3x), and `OnDestroy`.
-
-
-
-
-
+ 
-