diff --git a/router/src/app/resume/resume.component.html b/router/src/app/resume/resume.component.html index 617f10d..89393b0 100644 --- a/router/src/app/resume/resume.component.html +++ b/router/src/app/resume/resume.component.html @@ -1,21 +1,9 @@ -

Resume: {{jobIndex}}

- +

Job Description For: {{job.title}}

+
+
Dates
+
{{job.dates}}
+
Title
+
{{job.title}}
+
Description
+
{{job.description}}
+
diff --git a/router/src/app/resume/resume.component.ts b/router/src/app/resume/resume.component.ts index fff9545..cfc5a7b 100644 --- a/router/src/app/resume/resume.component.ts +++ b/router/src/app/resume/resume.component.ts @@ -1,5 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; +import { JOBS } from './jobs'; @Component({ selector: 'app-resume', @@ -8,14 +9,20 @@ import { ActivatedRoute } from '@angular/router'; }) export class ResumeComponent implements OnInit { - jobIndex: Number; //set up public class member + job; //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 ) + this.route.params.forEach( + param => { + this.job = JOBS.find( job => { + return job.id === parseInt(param.id) + }); + } + ); } } diff --git a/url_params.md b/url_params.md index 2345525..71a2af7 100644 --- a/url_params.md +++ b/url_params.md @@ -138,3 +138,51 @@ Test that this works by showing `jobIndex` in `src/app/resume/resume.component.h ``` ## Show specific job data based on id param + +Import the `JOBS` data object: + +```javascript +import { JOBS } from './jobs'; +``` + +Now alter the `ResumeComponent` to + +1. have a `job` property, set by the URL param +1. find the job that has a matching id to the one specified in the URL + - NOTE: `param.id` is a string, and `job.id` is a number, so we must call `parseInt(param.id)` + +```javascript +export class ResumeComponent implements OnInit { + + job; //set up public class member + + constructor( + private route: ActivatedRoute //make URL routes available to class + ) { } + + ngOnInit() { + this.route.params.forEach( + param => { + this.job = JOBS.find( job => { //find the element in the JOBS array... + return job.id === parseInt(param.id) //... that has a matching id + }); + } + ); + } + +} +``` + +Now in `src/app/resume/resume.component.html` display the data: + +```html +

Job Description For: {{job.title}}

+
+
Dates
+
{{job.dates}}
+
Title
+
{{job.title}}
+
Description
+
{{job.description}}
+
+```