From 4b5b47082ea28f6ed7ee7e59b11a7e7364743199 Mon Sep 17 00:00:00 2001
From: Matt Huntington <matt.huntington@gmail.com>
Date: Tue, 20 Jun 2017 00:32:19 -0400
Subject: [PATCH] Use the data file to generate links

---
 router/src/app/app.component.html |  7 +++-
 router/src/app/app.component.ts   |  3 +-
 router/src/app/resume/jobs.ts     | 18 +++++-----
 url_params.md                     | 59 ++++++++++++++++++++++++++-----
 4 files changed, 67 insertions(+), 20 deletions(-)

diff --git a/router/src/app/app.component.html b/router/src/app/app.component.html
index ffdff5b..33f9858 100644
--- a/router/src/app/app.component.html
+++ b/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>
diff --git a/router/src/app/app.component.ts b/router/src/app/app.component.ts
index 7b0f672..c6e6153 100644
--- a/router/src/app/app.component.ts
+++ b/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;
 }
diff --git a/router/src/app/resume/jobs.ts b/router/src/app/resume/jobs.ts
index 0753303..4a948d7 100644
--- a/router/src/app/resume/jobs.ts
+++ b/router/src/app/resume/jobs.ts
@@ -1,10 +1,9 @@
 export const JOBS = [
     {
-        id:1,
-        title: 'Software Engineer',
-        location: 'Initech',
-        dates: '2003-2008',
-        description: 'I HAVE PEOPLE SKILLS!!'
+        id:3,
+        title: 'Crushed It',
+        dates: '2010-2011, 2013-Present',
+        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.'
     },
     {
         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,
-        title: 'Crushed It',
-        dates: '2010-2011, 2013-Present',
-        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.'
+        id:1,
+        title: 'Software Engineer',
+        location: 'Initech',
+        dates: '2003-2008',
+        description: 'I HAVE PEOPLE SKILLS!!'
     }
 ]
diff --git a/url_params.md b/url_params.md
index c6746b2..4855952 100644
--- a/url_params.md
+++ b/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,
-        title: 'Software Engineer',
-        location: 'Initech',
-        dates: '2003-2008',
-        description: 'I HAVE PEOPLE SKILLS!!'
+        id:3,
+        title: 'Crushed It',
+        dates: '2010-2011, 2013-Present',
+        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.'
     },
     {
         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,
-        title: 'Crushed It',
-        dates: '2010-2011, 2013-Present',
-        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.'
+        id:1,
+        title: 'Software Engineer',
+        location: 'Initech',
+        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>
+```