From c0547165e224ba064536b38bf37501b55898c820 Mon Sep 17 00:00:00 2001
From: Matt Huntington <matt.huntington@gmail.com>
Date: Tue, 20 Jun 2017 01:40:48 -0400
Subject: [PATCH] display sub sections with router-outlet and create links

---
 nesting.md                                | 38 +++++++++++++++++++++--
 router/src/app/about/about.component.html | 13 +++++++-
 2 files changed, 48 insertions(+), 3 deletions(-)

diff --git a/nesting.md b/nesting.md
index 0861e58..46ba3db 100644
--- a/nesting.md
+++ b/nesting.md
@@ -7,6 +7,7 @@
 1. Move the appropriate HTML to each sub section component
 1. Create a router just for the sub sections
 1. Replace the old main route with the new routing module
+1. Add the router outlet for the sub sections:
 
 ## Describe nested routes
 
@@ -98,7 +99,7 @@ const routes: Routes = [
 And add the `about-routing.module.ts` module to `src/app/app.module.ts`:
 
 ```javascript
-import { AboutRoutingModule} from './about/about-routing.module'
+import { AboutRoutingModule} from './about/about-routing.module' //import the new routing module
 
 @NgModule({
     declarations: [
@@ -112,9 +113,42 @@ import { AboutRoutingModule} from './about/about-routing.module'
     imports: [
         BrowserModule,
         AppRoutingModule,
-        AboutRoutingModule
+        AboutRoutingModule //add the module here
     ],
     providers: [],
     bootstrap: [AppComponent]
 })
 ```
+
+## Add the router outlet for the sub sections:
+
+Edit `src/app/about/about.component.html`:
+
+```html
+<h2>This is the About Section of the Site</h2>
+<router-outlet></router-outlet>
+```
+
+You can now test by going to:
+
+- http://localhost:4200/about/early-life
+- http://localhost:4200/about/career
+
+## Add links to the various sub sections:
+
+You can now create links to these sub section in `src/app/about/about.component.html`:
+
+```html
+<h2>About Page</h2>
+<nav>
+    <ul>
+        <li>
+            <a routerLink="early-life">Early Life</a>
+        </li>
+        <li>
+            <a routerLink="career">Career</a>
+        </li>
+    </ul>
+</nav>
+<router-outlet></router-outlet>
+```
diff --git a/router/src/app/about/about.component.html b/router/src/app/about/about.component.html
index 82e39ba..812cb9a 100644
--- a/router/src/app/about/about.component.html
+++ b/router/src/app/about/about.component.html
@@ -1 +1,12 @@
-<h2>This is the About Section of the Site</h2>
+<h2>About Page</h2>
+<nav>
+    <ul>
+        <li>
+            <a routerLink="early-life">Early Life</a>
+        </li>
+        <li>
+            <a routerLink="career">Career</a>
+        </li>
+    </ul>
+</nav>
+<router-outlet></router-outlet>