Use the data file to generate links

router/src/app/app.component.html

@@ -11,7 +11,12 @@
             <a routerLink="/links">Links</a>
         </li>
         <li>
-            <a routerLink="/resume">Resume</a>
+            Resume
+            <ul>
+                <li *ngFor="let job of jobs">
+                    <a routerLink="/resume/{{job.id}}">{{job.title}}</a>
+                </li>
+            </ul>
         </li>
     </ul>
 </nav>

router/src/app/app.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { JOBS } from './resume/jobs';
 
 @Component({
   selector: 'app-root',
@@ -6,5 +7,5 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  title = 'app';
+  jobs = JOBS;
 }

router/src/app/resume/jobs.ts

@@ -1,10 +1,9 @@
 export const JOBS = [
     {
-        id:1,
+        id:3,
-        title: 'Software Engineer',
+        title: 'Crushed It',
-        location: 'Initech',
+        dates: '2010-2011, 2013-Present',
-        dates: '2003-2008',
+        description: 'There was a medical situation preventing me from crushing it to my usual standards. So I had to take some time off until I was able to crush it at 100%, at which point I resumed crushing it full-time.'
-        description: 'I HAVE PEOPLE SKILLS!!'
     },
     {
         id:2,
@@ -14,9 +13,10 @@ export const JOBS = [
         description: 'Taming the wild code beast. A story for all ages. A friendship for all time. Share the adventure.'
     },
     {
-        id:3,
+        id:1,
-        title: 'Crushed It',
+        title: 'Software Engineer',
-        dates: '2010-2011, 2013-Present',
+        location: 'Initech',
-        description: 'There was a medical situation preventing me from crushing it to my usual standards. So I had to take some time off until I was able to crush it at 100%, at which point I resumed crushing it full-time.'
+        dates: '2003-2008',
+        description: 'I HAVE PEOPLE SKILLS!!'
     }
 ]

url_params.md

@@ -17,11 +17,10 @@ Now we're going to have how app be a little more data driven.  Create `src/app/r
 ```javascript
 export const JOBS = [
     {
-        id:1,
+        id:3,
-        title: 'Software Engineer',
+        title: 'Crushed It',
-        location: 'Initech',
+        dates: '2010-2011, 2013-Present',
-        dates: '2003-2008',
+        description: 'There was a medical situation preventing me from crushing it to my usual standards. So I had to take some time off until I was able to crush it at 100%, at which point I resumed crushing it full-time.'
-        description: 'I HAVE PEOPLE SKILLS!!'
     },
     {
         id:2,
@@ -31,12 +30,54 @@ export const JOBS = [
         description: 'Taming the wild code beast. A story for all ages. A friendship for all time. Share the adventure.'
     },
     {
-        id:3,
+        id:1,
-        title: 'Crushed It',
+        title: 'Software Engineer',
-        dates: '2010-2011, 2013-Present',
+        location: 'Initech',
-        description: 'There was a medical situation preventing me from crushing it to my usual standards. So I had to take some time off until I was able to crush it at 100%, at which point I resumed crushing it full-time.'
+        dates: '2003-2008',
+        description: 'I HAVE PEOPLE SKILLS!!'
     }
 ]
 ```
 
 ## Use the data file to generate links
+
+In `src/app/app.component.ts` import the data file:
+
+```javascript
+import { Component } from '@angular/core';
+import { JOBS } from './resume/jobs';
+```
+
+and now add it as a property of `AppComponent` (remove title if it still exists):
+
+```javascript
+export class AppComponent {
+  jobs = JOBS;
+}
+```
+
+In `src/app.app.component.html` loop through the jobs to create links:
+
+```html
+<nav>
+    <ul>
+        <li>
+            <a routerLink="/">Home</a>
+        </li>
+        <li>
+            <a routerLink="/about">About</a>
+        </li>
+        <li>
+            <a routerLink="/links">Links</a>
+        </li>
+        <li>
+            Resume
+            <ul>
+                <li *ngFor="let job of jobs">
+                    <a routerLink="/resume/{{job.id}}">{{job.title}}</a>
+                </li>
+            </ul>
+        </li>
+    </ul>
+</nav>
+```