docs(aio): doc guide tweaks (GS thru Components)

Working through obvious non-image content defects, from top of menu (Getting Started) through Fundamentals/Components.

aio/content/guide/component-interaction.md

@@ -15,15 +15,15 @@ in which two or more components share information.
 
 # Contents
 
-* [Pass data from parent to child with input binding](guide/component-communication#parent-to-child)
-* [Intercept input property changes with a setter](guide/component-communication#parent-to-child-setter)
-* [Intercept input property changes with `ngOnChanges()`](guide/component-communication#parent-to-child-on-changes)
-* [Parent calls an `@ViewChild()`](guide/component-communication#parent-to-view-child)
-* [Parent and children communicate via a service](guide/component-communication#bidirectional-service)
+* [Pass data from parent to child with input binding](guide/component-interaction#parent-to-child)
+* [Intercept input property changes with a setter](guide/component-interaction#parent-to-child-setter)
+* [Intercept input property changes with `ngOnChanges()`](guide/component-interaction#parent-to-child-on-changes)
+* [Parent calls an `@ViewChild()`](guide/component-interaction#parent-to-view-child)
+* [Parent and children communicate via a service](guide/component-interaction#bidirectional-service)
 
 -->
 
-**See the <live-example name="component-communication"></live-example>**.
+**See the <live-example name="component-interaction"></live-example>**.
 
 {@a parent-to-child}
 
@@ -33,7 +33,7 @@ in which two or more components share information.
 typically adorned with [@Input decorations](guide/template-syntax#inputs-outputs).
 
 
-<code-example path="component-communication/src/app/hero-child.component.ts" title="component-communication/src/app/hero-child.component.ts">
+<code-example path="component-interaction/src/app/hero-child.component.ts" title="component-interaction/src/app/hero-child.component.ts">
 
 </code-example>
 
@@ -46,7 +46,7 @@ binding its `master` string property to the child's `master` alias,
 and each iteration's `hero` instance to the child's `hero` property.
 
 
-<code-example path="component-communication/src/app/hero-parent.component.ts" title="component-communication/src/app/hero-parent.component.ts">
+<code-example path="component-interaction/src/app/hero-parent.component.ts" title="component-interaction/src/app/hero-parent.component.ts">
 
 </code-example>
 
@@ -56,23 +56,23 @@ The running application displays three heroes:
 
 
 <figure class='image-display'>
-  <img src="generated/images/guide/component-communication/parent-to-child.png" alt="Parent-to-child"></img>
+  <img src="generated/images/guide/component-interaction/parent-to-child.png" alt="Parent-to-child"></img>
 </figure>
 
 
 
-### Test it
+<h3 class="no-toc">Test it</h3>
 
 E2E test that all children were instantiated and displayed as expected:
 
 
-<code-example path="component-communication/e2e-spec.ts" region="parent-to-child" title="component-communication/e2e-spec.ts">
+<code-example path="component-interaction/e2e-spec.ts" region="parent-to-child" title="component-interaction/e2e-spec.ts">
 
 </code-example>
 
 
 
-[Back to top](guide/component-communication#top)
+[Back to top](guide/component-interaction#top)
 
 {@a parent-to-child-setter}
 
@@ -84,7 +84,7 @@ The setter of the `name` input property in the child `NameChildComponent`
 trims the whitespace from a name and replaces an empty value with default text.
 
 
-<code-example path="component-communication/src/app/name-child.component.ts" title="component-communication/src/app/name-child.component.ts">
+<code-example path="component-interaction/src/app/name-child.component.ts" title="component-interaction/src/app/name-child.component.ts">
 
 </code-example>
 
@@ -93,30 +93,30 @@ trims the whitespace from a name and replaces an empty value with default text.
 Here's the `NameParentComponent` demonstrating name variations including a name with all spaces:
 
 
-<code-example path="component-communication/src/app/name-parent.component.ts" title="component-communication/src/app/name-parent.component.ts">
+<code-example path="component-interaction/src/app/name-parent.component.ts" title="component-interaction/src/app/name-parent.component.ts">
 
 </code-example>
 
 
 
 <figure class='image-display'>
-  <img src="generated/images/guide/component-communication/setter.png" alt="Parent-to-child-setter"></img>
+  <img src="generated/images/guide/component-interaction/setter.png" alt="Parent-to-child-setter"></img>
 </figure>
 
 
 
-### Test it
+<h3 class="no-toc">Test it</h3>
 
 E2E tests of input property setter with empty and non-empty names:
 
 
-<code-example path="component-communication/e2e-spec.ts" region="parent-to-child-setter" title="component-communication/e2e-spec.ts">
+<code-example path="component-interaction/e2e-spec.ts" region="parent-to-child-setter" title="component-interaction/e2e-spec.ts">
 
 </code-example>
 
 
 
-[Back to top](guide/component-communication#top)
+[Back to top](guide/component-interaction#top)
 
 {@a parent-to-child-on-changes}
 
@@ -139,7 +139,7 @@ Learn about `ngOnChanges()` in the [LifeCycle Hooks](guide/lifecycle-hooks) chap
 This `VersionChildComponent` detects changes to the `major` and `minor` input properties and composes a log message reporting these changes:
 
 
-<code-example path="component-communication/src/app/version-child.component.ts" title="component-communication/src/app/version-child.component.ts">
+<code-example path="component-interaction/src/app/version-child.component.ts" title="component-interaction/src/app/version-child.component.ts">
 
 </code-example>
 
@@ -148,7 +148,7 @@ This `VersionChildComponent` detects changes to the `major` and `minor` input pr
 The `VersionParentComponent` supplies the `minor` and `major` values and binds buttons to methods that change them.
 
 
-<code-example path="component-communication/src/app/version-parent.component.ts" title="component-communication/src/app/version-parent.component.ts">
+<code-example path="component-interaction/src/app/version-parent.component.ts" title="component-interaction/src/app/version-parent.component.ts">
 
 </code-example>
 
@@ -158,24 +158,24 @@ Here's the output of a button-pushing sequence:
 
 
 <figure class='image-display'>
-  <img src="generated/images/guide/component-communication/parent-to-child-on-changes.gif" alt="Parent-to-child-onchanges"></img>
+  <img src="generated/images/guide/component-interaction/parent-to-child-on-changes.gif" alt="Parent-to-child-onchanges"></img>
 </figure>
 
 
 
-### Test it
+<h3 class="no-toc">Test it</h3>
 
 Test that ***both*** input properties are set initially and that button clicks trigger
 the expected `ngOnChanges` calls and values:
 
 
-<code-example path="component-communication/e2e-spec.ts" region="parent-to-child-onchanges" title="component-communication/e2e-spec.ts">
+<code-example path="component-interaction/e2e-spec.ts" region="parent-to-child-onchanges" title="component-interaction/e2e-spec.ts">
 
 </code-example>
 
 
 
-[Back to top](guide/component-communication#top)
+[Back to top](guide/component-interaction#top)
 
 {@a child-to-parent}
 
@@ -189,7 +189,7 @@ The child's `EventEmitter` property is an ***output property***,
   as seen in this `VoterComponent`:
 
 
-<code-example path="component-communication/src/app/voter.component.ts" title="component-communication/src/app/voter.component.ts">
+<code-example path="component-interaction/src/app/voter.component.ts" title="component-interaction/src/app/voter.component.ts">
 
 </code-example>
 
@@ -201,7 +201,7 @@ The parent `VoteTakerComponent` binds an event handler called `onVoted()` that r
 payload `$event` and updates a counter.
 
 
-<code-example path="component-communication/src/app/votetaker.component.ts" title="component-communication/src/app/votetaker.component.ts">
+<code-example path="component-interaction/src/app/votetaker.component.ts" title="component-interaction/src/app/votetaker.component.ts">
 
 </code-example>
 
@@ -212,23 +212,23 @@ and the method processes it:
 
 
 <figure class='image-display'>
-  <img src="generated/images/guide/component-communication/child-to-parent.gif" alt="Child-to-parent"></img>
+  <img src="generated/images/guide/component-interaction/child-to-parent.gif" alt="Child-to-parent"></img>
 </figure>
 
 
 
-### Test it
+<h3 class="no-toc">Test it</h3>
 
 Test that clicking the *Agree* and *Disagree* buttons update the appropriate counters:
 
 
-<code-example path="component-communication/e2e-spec.ts" region="child-to-parent" title="component-communication/e2e-spec.ts">
+<code-example path="component-interaction/e2e-spec.ts" region="child-to-parent" title="component-interaction/e2e-spec.ts">
 
 </code-example>
 
 
 
-[Back to top](guide/component-communication#top)
+[Back to top](guide/component-interaction#top)
 
 
 
@@ -245,7 +245,7 @@ The following is a child `CountdownTimerComponent` that repeatedly counts down t
 It has `start` and `stop` methods that control the clock and it displays a
 countdown status message in its own template.
 
-<code-example path="component-communication/src/app/countdown-timer.component.ts" title="component-communication/src/app/countdown-timer.component.ts">
+<code-example path="component-interaction/src/app/countdown-timer.component.ts" title="component-interaction/src/app/countdown-timer.component.ts">
 
 </code-example>
 
@@ -254,7 +254,7 @@ countdown status message in its own template.
 The `CountdownLocalVarParentComponent` that hosts the timer component is as follows:
 
 
-<code-example path="component-communication/src/app/countdown-parent.component.ts" region="lv" title="component-communication/src/app/countdown-parent.component.ts">
+<code-example path="component-interaction/src/app/countdown-parent.component.ts" region="lv" title="component-interaction/src/app/countdown-parent.component.ts">
 
 </code-example>
 
@@ -274,7 +274,7 @@ Here we see the parent and child working together.
 
 
 <figure class='image-display'>
-  <img src="generated/images/guide/component-communication/countdown-timer-anim.gif" alt="countdown timer"></img>
+  <img src="generated/images/guide/component-interaction/countdown-timer-anim.gif" alt="countdown timer"></img>
 </figure>
 
 
@@ -282,20 +282,20 @@ Here we see the parent and child working together.
 {@a countdown-tests}
 
 
-### Test it
+<h3 class="no-toc">Test it</h3>
 
 Test that the seconds displayed in the parent template
 match the seconds displayed in the child's status message.
 Test also that clicking the *Stop* button pauses the countdown timer:
 
 
-<code-example path="component-communication/e2e-spec.ts" region="countdown-timer-tests" title="component-communication/e2e-spec.ts">
+<code-example path="component-interaction/e2e-spec.ts" region="countdown-timer-tests" title="component-interaction/e2e-spec.ts">
 
 </code-example>
 
 
 
-[Back to top](guide/component-communication#top)
+[Back to top](guide/component-interaction#top)
 
 {@a parent-to-view-child}
 
@@ -312,9 +312,9 @@ When the parent component *class* requires that kind of access,
 ***inject*** the child component into the parent as a *ViewChild*.
 
 The following example illustrates this technique with the same
-[Countdown Timer](guide/component-communication#countdown-timer-example) example.
+[Countdown Timer](guide/component-interaction#countdown-timer-example) example.
 Neither its appearance nor its behavior will change.
-The child [CountdownTimerComponent](guide/component-communication#countdown-timer-example) is the same as well.
+The child [CountdownTimerComponent](guide/component-interaction#countdown-timer-example) is the same as well.
 
 <div class="l-sub-section">
 
@@ -329,7 +329,7 @@ is solely for the purpose of demonstration.
 
 Here is the parent, `CountdownViewChildParentComponent`:
 
-<code-example path="component-communication/src/app/countdown-parent.component.ts" region="vc" title="component-communication/src/app/countdown-parent.component.ts">
+<code-example path="component-interaction/src/app/countdown-parent.component.ts" region="vc" title="component-interaction/src/app/countdown-parent.component.ts">
 
 </code-example>
 
@@ -360,10 +360,10 @@ in the same cycle. The app has to *wait one turn* before it can display the seco
 Use `setTimeout()` to wait one tick and then revise the `seconds()` method so
 that it takes future values from the timer component.
 
-### Test it
-Use [the same countdown timer tests](guide/component-communication#countdown-tests) as before.
+<h3 class="no-toc">Test it</h3>
+Use [the same countdown timer tests](guide/component-interaction#countdown-tests) as before.
 
-[Back to top](guide/component-communication#top)
+[Back to top](guide/component-interaction#top)
 
 {@a bidirectional-service}
 
@@ -378,7 +378,7 @@ Components outside this component subtree have no access to the service or their
 This `MissionService` connects the `MissionControlComponent` to multiple `AstronautComponent` children.
 
 
-<code-example path="component-communication/src/app/mission.service.ts" title="component-communication/src/app/mission.service.ts">
+<code-example path="component-interaction/src/app/mission.service.ts" title="component-interaction/src/app/mission.service.ts">
 
 </code-example>
 
@@ -388,7 +388,7 @@ The `MissionControlComponent` both provides the instance of the service that it
 (through the `providers` metadata array) and injects that instance into itself through its constructor:
 
 
-<code-example path="component-communication/src/app/missioncontrol.component.ts" title="component-communication/src/app/missioncontrol.component.ts">
+<code-example path="component-interaction/src/app/missioncontrol.component.ts" title="component-interaction/src/app/missioncontrol.component.ts">
 
 </code-example>
 
@@ -398,7 +398,7 @@ The `AstronautComponent` also injects the service in its constructor.
 Each `AstronautComponent` is a child of the `MissionControlComponent` and therefore receives its parent's service instance:
 
 
-<code-example path="component-communication/src/app/astronaut.component.ts" title="component-communication/src/app/astronaut.component.ts">
+<code-example path="component-interaction/src/app/astronaut.component.ts" title="component-interaction/src/app/astronaut.component.ts">
 
 </code-example>
 
@@ -426,21 +426,21 @@ facilitated by the service:
 
 
 <figure class='image-display'>
-  <img src="generated/images/guide/component-communication/bidirectional-service.gif" alt="bidirectional-service"></img>
+  <img src="generated/images/guide/component-interaction/bidirectional-service.gif" alt="bidirectional-service"></img>
 </figure>
 
 
 
-### Test it
+<h3 class="no-toc">Test it</h3>
 
 Tests click buttons of both the parent `MissionControlComponent` and the `AstronautComponent` children
 and verify that the history meets expectations:
 
 
-<code-example path="component-communication/e2e-spec.ts" region="bidirectional-service" title="component-communication/e2e-spec.ts">
+<code-example path="component-interaction/e2e-spec.ts" region="bidirectional-service" title="component-interaction/e2e-spec.ts">
 
 </code-example>
 
 
 
-[Back to top](guide/component-communication#top)
+[Back to top](guide/component-interaction#top)

aio/content/guide/component-styles.md

@@ -1,12 +1,4 @@
-@title
-Component Styles
-
-@intro
-Learn how to apply CSS styles to components.
-
-@description
-
-
+# Component Styles
 
 Angular applications are styled with standard CSS. That means you can apply
 everything you know about CSS stylesheets, selectors, rules, and media queries
@@ -142,29 +134,20 @@ through this component to all of its child elements in the DOM.
 
 </code-example>
 
-
-
 The `/deep/` selector also has the alias `>>>`. You can use either interchangeably.
 
 
 <div class="alert is-important">
 
-
-
 Use the `/deep/` and `>>>` selectors only with *emulated* view encapsulation.
 Emulated is the default and most commonly used view encapsulation. For more information, see the
 [Controlling view encapsulation](guide/component-styles#view-encapsulation) section.
 
-
 </div>
 
-
-
 {@a loading-styles}
 
-
-
-## Loading styles into components
+## Loading component styles
 
 There are several ways to add styles to a component: 
 
@@ -279,7 +262,7 @@ In this case, the URL is relative to the CSS file into which you're importing.
 
 
 
-## Controlling view encapsulation: native, emulated, and none
+## View encapsulation
 
 As discussed earlier, component CSS styles are encapsulated into the component's view and don't
 affect the rest of the application.
@@ -323,7 +306,7 @@ in most cases.
 
 
 
-## Appendix 1: Inspecting the CSS generated in emulated view encapsulation
+## Appendix: Inspecting generated CSS
 
 When using emulated view encapsulation, Angular preprocesses
 all component styles so that they approximate the standard shadow CSS scoping rules.
@@ -381,7 +364,7 @@ These extra selectors enable the scoping rules described in this page.
 
 
 
-## Appendix 2: Loading styles with relative URLs
+## Appendix: Loading with relative URLs
 
 It's common practice to split a component's code, HTML, and CSS into three separate files in the same directory:
 

aio/content/guide/dynamic-component-loader.md

@@ -1,34 +1,9 @@
-@title
-Dynamic Component Loader
-
-@intro
-Load components dynamically.
-
-@description
-
+# Dynamic Component Loader
 
 Component templates are not always fixed. An application may need to load new components at runtime.
 
 This cookbook shows you how to use `ComponentFactoryResolver` to add components dynamically.
 
-{@a toc}
-
-<!--
-
-# Contents
-
-   * [Dynamic component loading](guide/dynamic-component-loader#dynamic-loading)
-   * [The directive](guide/dynamic-component-loader#directive)
-   * [Loading components](guide/dynamic-component-loader#loading-components)
-
-     * [Resolving Components](guide/dynamic-component-loader#resolving-components)
-     * [Selector References](guide/dynamic-component-loader#selector-references)
-
-   * [A common _AdComponent_ interface](guide/dynamic-component-loader#common-interface)
-   * [Final ad banner](guide/dynamic-component-loader#final-ad-banner)
-
--->
-
 See the <live-example name="dynamic-component-loader"></live-example>
 of the code in this cookbook.
 
@@ -51,7 +26,7 @@ Angular comes with its own API for loading components dynamically.
 
 {@a directive}
 
-## The directive
+## The anchor directive
 
 Before you can add components you have to define an anchor point
 to tell Angular where to insert components.
@@ -100,7 +75,7 @@ because it doesn't render any additional output.
 {@a resolving-components}
 
 
-### Resolving components
+## Resolving components
 
 Take a closer look at the methods in `ad-banner.component.ts`.
 
@@ -184,7 +159,7 @@ add dynamically loaded components to the `NgModule`'s `entryComponents` array:
 {@a common-interface}
 
 
-### A common _AdComponent_ interface
+## The _AdComponent_ interface
 
 In the ad banner, all components implement a common `AdComponent` interface to
 standardize the API for passing data to the components.
@@ -213,7 +188,7 @@ Here are two sample components and the `AdComponent` interface for reference:
 {@a final-ad-baner}
 
 
-### Final ad banner
+## Final ad banner
  The final ad banner looks like this:
 
 <figure class='image-display'>

aio/content/guide/ngmodule.md

@@ -1,5 +1,4 @@
-<h1 class="no-toc">NgModules</h1>
-
+# NgModules
 
 **NgModules** help organize an application into cohesive blocks of functionality.
 <!-- CF: "app" and "application" are used interchangeably throughout this page.
@@ -38,7 +37,7 @@ This page covers NgModules in greater depth.
  CF: This link goes to the top of this page. I would expect it to go to an "NgModule metadata properties"
  section at the end of this page, but that section doesn't exist. -->
 
-### Live examples
+#### Live examples
 This page explains NgModules through a progression of improvements to a sample with a "Tour of Heroes" theme.
 Here's an index to live examples at key moments in the evolution of the sample:
 
@@ -48,7 +47,7 @@ Here's an index to live examples at key moments in the evolution of the sample:
 * <live-example plnkr="pre-shared.3">Just before adding SharedModule</live-example>
 * <live-example>The final version</live-example>
 
-### Frequently asked questions (FAQs)
+#### Frequently asked questions (FAQs)
 
 This page covers NgModule concepts in a tutorial fashion.
 
@@ -108,7 +107,7 @@ Later in this page, you'll read about this process. For now, you'll start with t
 
 
 
-## _AppModule_: the application root module
+## The root _AppModule_
 
 Every Angular app has a *root module* class.
 By convention, the *root module* class is called `AppModule` and it exists in a file named `app.module.ts`.
@@ -156,7 +155,7 @@ You launch the application by bootstrapping the `AppModule` in the `main.ts` fil
 Angular offers a variety of bootstrapping options targeting multiple platforms.
 This page describes two options, both targeting the browser.
 
-### Dynamic bootstrapping with the just-in-time (JIT) compiler
+### Compile just-in-time (JIT)
 In the first, _dynamic_ option, the [Angular compiler](guide/ngmodule-faq#q-angular-compiler "About the Angular Compiler")
 compiles the application in the browser and then launches the app.
 
@@ -172,7 +171,7 @@ The samples in this page demonstrate the dynamic bootstrapping approach.
 <live-example embedded plnkr="minimal.0" img="guide/ngmodule/minimal-plunker.png">Try the live example.</live-example>
 
 
-### Static bootstrapping with the ahead-of-time (AOT) compiler
+### Compile ahead-of-time (AOT)
 
 Consider the static alternative which can produce a much smaller application that
 launches faster, especially on mobile devices and high latency networks.
@@ -245,10 +244,6 @@ Import the `HighlightDirective` class and add it to the module's `declarations`
 
 </code-example>
 
-
-
-### Add a component
-
 Refactor the title into its own `TitleComponent`.
 The component's template binds to the component's `title` and `subtitle` properties like this:
 
@@ -388,7 +383,7 @@ You must import those modules before you can use their directives.
 To illustrate this point, you'll extend the sample app with `ContactComponent`,
 a form component that imports form support from the Angular `FormsModule`.
 
-### Add the _ContactComponent_
+<h3 class="no-toc">Add the _ContactComponent_</h3>
 
 [Angular forms](guide/forms) are a great way to manage user data entry.
 
@@ -400,7 +395,7 @@ implemented with Angular forms in the [template-driven form](guide/forms#templat
 
 
 
-### Angular form styles
+<h3 class="no-toc">Angular form styles</h3>
 
 You can write Angular form components in
 template-driven or
@@ -476,7 +471,7 @@ Even if Angular somehow recognized `ngModel`,
 `ContactComponent` wouldn't behave like an Angular form because
 form features such as validation aren't yet available.
 
-### Import the FormsModule
+<h3 class="no-toc">Import the FormsModule</h3>
 
 Add the `FormsModule` to the `AppModule` metadata's `imports` list.
 
@@ -510,7 +505,7 @@ Components, directives, and pipes belong to _one module only_.
 {@a declare-pipe}
 
 
-### Declare the contact component, directive, and pipe
+<h3 class="no-toc">Declare the contact component, directive, and pipe</h3>
 
 The application won't compile until you declare the contact component, directive, and pipe.
 Update the `declarations` in the  `AppModule` accordingly:
@@ -547,7 +542,7 @@ You'll learn more about that issue later in this page, in [Resolve directive con
 
 
 
-### Provide the _ContactService_
+<h3 class="no-toc">Provide the _ContactService_</h3>
 The `ContactComponent` displays contacts retrieved by the `ContactService`,
 which Angular injects into its constructor.
 
@@ -574,7 +569,7 @@ Now you can inject `ContactService` (like `UserService`) into any component in t
 
 
 
-### Application-scoped providers
+<h3 class="no-toc">Application-scoped providers</h3>
   The `ContactService` provider is _application_-scoped because Angular
   registers a module's `providers` with the application's *root injector*.
 
@@ -602,7 +597,7 @@ Now you can inject `ContactService` (like `UserService`) into any component in t
 
 
 
-### Run the app
+<h3 class="no-toc">Run the app</h3>
 Everything is in place to run the application with its contact editor.
 
 The app file structure looks like this:
@@ -1322,7 +1317,7 @@ whether that component is eagerly or lazily loaded.
 
 
 
-### Why bother?
+<h3 class="no-toc">Why bother?</h3>
 This scenario is clearly contrived.
 The app is too small to worry about a single service file and a tiny, one-time component.
 
@@ -1530,12 +1525,12 @@ Angular creates a lazy-loaded module with its own injector, a _child_ of the roo
 Of course it finds the instance imported by the root `AppModule`.
 Now `parentModule` exists and the constructor throws the error.
 
-### Conclusion
+## Conclusion
 
 You made it! You can examine and download the complete source for this final version from the live example.
 <live-example embedded  img="guide/ngmodule/final-plunker.png"></live-example>
 
-### Frequently asked questions
+## Frequently asked questions
 
 Now that you understand NgModules, you may be interested
 in the companion [NgModule FAQs](guide/ngmodule-faq "NgModule FAQs") page

aio/content/guide/pipes.md

@@ -1,12 +1,4 @@
-@title
-Pipes
-
-@intro
-Pipes transform displayed values within a template.
-
-@description
-
-
+# Pipes
 
 Every application starts out with what seems like a simple task: get data, transform them, and show them to users.
 Getting data could be as simple as creating a local variable or as complex as streaming data over a WebSocket.
@@ -27,7 +19,6 @@ Introducing Angular pipes, a way to write display-value transformations that you
 You can run the <live-example></live-example> in Plunker and download the code from there.
 
 
-
 ## Using pipes
 
 A pipe takes in data as input and transforms it to a desired output.
@@ -217,25 +208,19 @@ Your pipe has one such parameter: the `exponent`.
 
 
 
-### The *PipeTransform* interface
+## The *PipeTransform* interface
 
 The `transform` method is essential to a pipe.
 The `PipeTransform` *interface* defines that method and guides both tooling and the compiler.
 Technically, it's optional; Angular looks for and executes the `transform` method regardless.
 
-
 </div>
 
-
-
 Now you need a component to demonstrate the pipe.
 
 <code-example path="pipes/src/app/power-booster.component.ts" title="src/app/power-booster.component.ts" linenums="false">
-
 </code-example>
 
-
-
 <figure class='image-display'>
   <img src='generated/images/guide/pipes/power-booster.png' alt="Power Booster"></img>
 </figure>
@@ -250,14 +235,11 @@ Note the following:
 
 <div class="callout is-helpful">
 
-
-
 <header>
   Remember the declarations array
 </header>
 
 
-
 You must manually register custom pipes.
 If you don't, Angular reports an error.
 In the previous example, you didn't list the `DatePipe` because all
@@ -302,7 +284,7 @@ Angular strives to lower the cost whenever possible and appropriate.
 
 Angular picks a simpler, faster change detection algorithm when you use a pipe.
 
-### No pipe
+<h3 class="no-toc">No pipe</h3>
 
 In the next example, the component uses the default, aggressive change detection strategy to monitor and update
 its display of every hero in the `heroes` array. Here's the template:
@@ -326,7 +308,7 @@ You can add heroes and Angular updates the display when you do.
 If you click the `reset` button, Angular replaces `heroes` with a new array of the original heroes and updates the display.
 If you added the ability to remove or change a hero, Angular would detect those changes and update the display as well.
 
-### Flying-heroes pipe
+<h3 class="no-toc"><i>FlyingHeroesPipe</i></h3>
 
 Add a `FlyingHeroesPipe` to the `*ngFor` repeater that filters the list of heroes to just those heroes who can fly.
 
@@ -410,7 +392,7 @@ impure like this:
 
 Before doing that, understand the difference between pure and impure, starting with a pure pipe.
 
-### Pure pipes
+<h3 class="no-toc">Pure pipes</h3>
 
 Angular executes a *pure pipe* only when it detects a *pure change* to the input value.
 A pure change is either a change to a primitive input value (`String`, `Number`, `Boolean`, `Symbol`)
@@ -441,7 +423,7 @@ a point that's discussed later in this page.
 
 
 
-### Impure pipes
+<h3 class="no-toc">Impure pipes</h3>
 
 Angular executes an *impure pipe*  during every component change detection cycle.
 An impure pipe is called often, as often as every keystroke or mouse-move.
@@ -453,7 +435,7 @@ An expensive, long-running pipe could destroy the user experience.
 {@a impure-flying-heroes}
 
 
-### An impure *FlyingHeroesPipe*
+<h3 class="no-toc">An impure <i>FlyingHeroesPipe</i></h3>
 
 A flip of the switch turns the `FlyingHeroesPipe` into a `FlyingHeroesImpurePipe`.
 The complete implementation is as follows:
@@ -498,10 +480,8 @@ You can confirm in the <live-example></live-example> that the _flying heroes_
 display updates as you add heroes, even when you mutate the `heroes` array.
 
 
-<h3 id='async-pipe'>
-  The impure   <i>AsyncPipe</i>
-</h3>
-
+{@a async-pipe}
+<h3 class="no-toc">The impure <i>AsyncPipe</i></h3>
 
 
 The Angular `AsyncPipe` is an interesting example of an impure pipe.
@@ -528,7 +508,7 @@ extract the resolved values and expose them for binding,
 and have to unsubscribe when it's destroyed
 (a potent source of memory leaks).
 
-### An impure caching pipe
+<h3 class="no-toc">An impure caching pipe</h3>
 
 Write one more impure pipe, a pipe that makes an HTTP request.
 
@@ -570,7 +550,7 @@ A breakpoint on the pipe's request for data shows the following:
 * Each pipe instance caches its own URL and data.
 * Each pipe instance only calls the server once.
 
-### *JsonPipe*
+<h3 class="no-toc"><i>JsonPipe</i></h3>
 
 In the previous code sample, the second `fetch` pipe binding demonstrates more pipe chaining.
 It displays the same hero data in JSON format by chaining through to the built-in `JsonPipe`.
@@ -598,7 +578,7 @@ inspect an object for future binding.
 {@a pure-pipe-pure-fn}
 
 
-### Pure pipes and pure functions
+<h3 class="no-toc">Pure pipes and pure functions</h3>
 
 A pure pipe uses pure functions.
 Pure functions process inputs and return values without detectable side effects.

aio/content/navigation.json

@@ -149,7 +149,7 @@
               "tooltip": "Angular calls lifecycle hook methods on directives and components as it creates, changes, and destroys them."
             },
             {
-              "url": "guide/component-communication",
+              "url": "guide/component-interaction",
               "title": "Component Interaction",
               "tooltip": "Share information between different directives and components."
             },

aio/firebase.json

@@ -13,6 +13,9 @@
       {"type": 301, "source": "/docs/ts/latest/guide/server-communication.html", "destination": "/guide/http"},
       {"type": 301, "source": "/docs/ts/latest/guide/style-guide.html", "destination": "/guide/styleguide"},
 
+      // cookbook/component-communication.html
+      {"type": 301, "source": "/docs/ts/latest/cookbook/component-communication.html", "destination": "/guide/component-interaction"},
+
       // cookbook, cookbook/, cookbook/index.html
       {"type": 301, "source": "/docs/ts/latest/cookbook",            "destination": "/docs"},
       {"type": 301, "source": "/docs/ts/latest/cookbook/",           "destination": "/docs"},