From 4d4244901cd725b2136a23c8d73fd854979330af Mon Sep 17 00:00:00 2001
From: Matt Huntington <matt.huntington@gmail.com>
Date: Tue, 20 Jun 2017 00:46:53 -0400
Subject: [PATCH] Have Resume component display the id param

---
 router/src/app/resume/resume.component.html |  2 +-
 router/src/app/resume/resume.component.ts   |  8 ++++-
 url_params.md                               | 36 +++++++++++++++++++++
 3 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/router/src/app/resume/resume.component.html b/router/src/app/resume/resume.component.html
index 7d55d83..617f10d 100644
--- a/router/src/app/resume/resume.component.html
+++ b/router/src/app/resume/resume.component.html
@@ -1,4 +1,4 @@
-<h2>Resume</h2>
+<h2>Resume: {{jobIndex}}</h2>
 <ul>
     <li>
         <dl>
diff --git a/router/src/app/resume/resume.component.ts b/router/src/app/resume/resume.component.ts
index 55fa065..fff9545 100644
--- a/router/src/app/resume/resume.component.ts
+++ b/router/src/app/resume/resume.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
     selector: 'app-resume',
@@ -7,9 +8,14 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ResumeComponent implements OnInit {
 
-    constructor() { }
+    jobIndex: Number; //set up public class member
+
+    constructor(
+        private route: ActivatedRoute //make URL routes available to class
+    ) { }
 
     ngOnInit() {
+        this.route.params.forEach( param => this.jobIndex = param.id )
     }
 
 }
diff --git a/url_params.md b/url_params.md
index 15cf655..2345525 100644
--- a/url_params.md
+++ b/url_params.md
@@ -5,6 +5,8 @@
 1. Define what URL params are
 1. Create an external data file
 1. Use the data file to generate links
+1. Have Resume component display the id param
+1. Show specific job data based on id param
 
 ## Define what URL params are
 
@@ -102,3 +104,37 @@ const routes: Routes = [
     }
 ];
 ```
+
+## Have Resume component display the id param
+
+At this point, the resume shows all the jobs.  But we want to show just one job.  Edit `src/app/resume/resume.component.ts` to import `ActivatedRoute`:
+
+```javascript
+import { ActivatedRoute }   from '@angular/router';
+```
+
+Now update the class definition:
+
+```javascript
+export class ResumeComponent implements OnInit {
+
+    jobIndex: Number; //set up public class member
+
+    constructor(
+        private route: ActivatedRoute //make URL routes available to class
+    ) { }
+
+    ngOnInit() {
+        this.route.params.forEach( param => this.jobIndex = param.id )
+    }
+
+}
+```
+
+Test that this works by showing `jobIndex` in `src/app/resume/resume.component.html`:
+
+```html
+<h2>Resume: {{jobIndex}}</h2>
+```
+
+## Show specific job data based on id param