Clean up the “Creating Navigation” section

Lots of fixes to the text and code, including rearranging the page to follow the “Overview -> Problem -> What you need to know -> Technical requirements -> Setup -> How to verify…” structure and improving the naming & explanation around `userLink`.

src/angular/17-order-history-component/app.component.html

@@ -6,9 +6,9 @@ <h1>place-my-order.com</h1>
         <a routerLink="/">Home</a>
       </li>
       <li [ngClass]="{ active: rla.isActive }">
-        <a routerLink="/restaurants" routerLinkActive #rla="routerLinkActive"
-          >Restaurants</a
-        >
+        <a routerLink="/restaurants" routerLinkActive #rla="routerLinkActive">
+          Restaurants
+        </a>
       </li>
       <li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
         <a routerLink="/order-history">Order History</a>

src/angular/17-order-history-component/order-history-component.md

@@ -86,7 +86,7 @@ If you’ve implemented the solution correctly you should now be able to navigat
 <summary>Click to see the solution</summary>
 ✏️ Update **src/app/app.component.html**
 
-@diff ../5-creating-navigation/app.component.html ./app.component.html
+@diff ../5-creating-navigation/app.component.solution.html ./app.component.html
 
 </details>
 

src/angular/4-adding-routing/app.component.html

@@ -1,2 +1,3 @@
 <h1>Place My Order App: Coming Soon!</h1>
-<router-outlet />
+
+<router-outlet />

src/angular/5-creating-navigation/app.component.problem.html

@@ -0,0 +1,15 @@
+<header>
+  <nav>
+    <h1>place-my-order.com</h1>
+    <ul>
+      <li>
+        <a>Home</a>
+      </li>
+      <li>
+        <a>Restaurants</a>
+      </li>
+    </ul>
+  </nav>
+</header>
+
+<router-outlet />

src/angular/5-creating-navigation/app.component.html → src/angular/5-creating-navigation/app.component.solution.html

@@ -6,11 +6,12 @@ <h1>place-my-order.com</h1>
         <a routerLink="/">Home</a>
       </li>
       <li [ngClass]="{ active: rla.isActive }">
-        <a routerLink="/restaurants" routerLinkActive #rla="routerLinkActive"
-          >Restaurants</a
-        >
+        <a routerLink="/restaurants" routerLinkActive #rla="routerLinkActive">
+          Restaurants
+        </a>
       </li>
     </ul>
   </nav>
 </header>
-<router-outlet />
+
+<router-outlet />

src/angular/5-creating-navigation/creating-navigation.md

@@ -22,41 +22,6 @@ if they are for the current page or not.
   style="border: solid 1px black; "
   title="Place My Order App working nav"/>
 
-## Technical Requirements
-
-Create a navigation menu that will route to our home and restaurant components when clicked, as well as show an `active` class on the `li` element when the route is active.
-
-Make your changes in the **src/app/app.component.html** file. The markup structure should look like this:
-
-```html
-<header>
-  <nav>
-    <h1>place-my-order.com</h1>
-    <ul>
-      <li>
-        <a>Home</a>
-      </li>
-      <li>
-        <a>Restaurants</a>
-      </li>
-    </ul>
-  </nav>
-</header>
-```
-
-## How to Verify Your Solution is Correct
-
-You will know you’ve completed the exercise correctly when you can click the nav items to
-see the UI change and see the active class on the current nav item.
-
-![Place My Order App working nav](../static/img/angular/pmo-working-nav.gif 'Place My Order App working nav')
-
-✏️ Update the spec file **src/app/app.component.spec.ts** to be:
-
-@diff ../4-adding-routing/app.component.spec.ts ./app.component.spec.ts only
-
-> If you’ve implemented the solution correctly, when you run `npm run test` all tests will pass!
-
 ## What You Need to Know
 
 To solve this, you will need to know how to:
@@ -100,22 +65,45 @@ Using `{exact: true}` will only set the class if the path match is exactly equal
 
 @sourceref ./router-link-active-options.html
 @codepen
-@highlight 24-25,27-30, only
+@highlight 24-25,27-28,30, only
 
 ### Adding an Active Class with Template Variable
 
-`RouterLinkActive` can also be used to set <a href="https://angular.io/api/router/RouterLinkActive#template-variable-references">template variables</a> to check the active status of the route. In this example we’re creating a template variable `myroutervariable` to represent our route and it’s active state for logic in our template.
+`RouterLinkActive` can also be used to set <a href="https://angular.io/api/router/RouterLinkActive#template-variable-references">template variables</a> to check the active status of the route. In this example, we’re creating a template variable `userLink` to represent our route and its active state for logic in our template.
 
 @sourceref ./router-link-active-template.html
 @codepen
-@highlight 27-31, only
+@highlight 27-28, 32, only
+
+## Technical Requirements
+
+Create a navigation menu that will route to our home and restaurant components when clicked, as well as show an `active` class on the `li` element when the route is active.
+
+## Setup
+
+Make your changes in the **src/app/app.component.html** file. The markup structure should look like this:
+
+@diff ../4-adding-routing/app.component.html ./app.component.problem.html
+
+## How to Verify Your Solution is Correct
+
+You will know you’ve completed the exercise correctly when you can click the nav items to
+see the UI change and see the active class on the current nav item.
+
+![Place My Order App working nav](../static/img/angular/pmo-working-nav.gif 'Place My Order App working nav')
+
+✏️ Update the spec file **src/app/app.component.spec.ts** to be:
+
+@diff ../4-adding-routing/app.component.spec.ts ./app.component.spec.ts only
 
 ## Solution
 
+> If you’ve implemented the solution correctly, when you run `npm run test` all tests will pass!
+
 <details>
 <summary>Click to see the solution</summary>
 ✏️ Update **src/app/app.component.html** to:
 
-@diff ../4-adding-routing/app.component.html ./app.component.html
+@diff ./app.component.problem.html ./app.component.solution.html
 
 </details>

src/angular/5-creating-navigation/router-link-active-template.html

@@ -24,12 +24,12 @@
       <li routerLinkActive="my-active-class">
         <a routerLink="/about">About</a>
       </li>
-      <li routerLinkActive #myroutervariable="routerLinkActive" 
-        [ngClass]="{'my-active-class' : myroutervariable.isActive}">
+      <li routerLinkActive #userLink="routerLinkActive" 
+        [ngClass]="{'my-active-class' : userLink.isActive}">
         <a [routerLink]="['/users', userId]">User 1</a>
       </li>
     </ul>
-    <p *ngIf="myroutervariable.isActive">The users/1 route is active. 💖💖💖</p> 
+    <p *ngIf="userLink.isActive">The users/1 route is active. 💖💖💖</p> 
     <router-outlet></router-outlet>
   `
 })