angular-notes/url_params.md

URL Params

Lesson Objectives

1. Define what URL params are
2. Create an external data file
3. Use the data file to generate links

Define what URL params are

URL params allow us to pass data into the application from the URL

Create an external data file

Now we're going to have how app be a little more data driven. Create src/app/resume/jobs.ts:

export const JOBS = [
    {
        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,
        title: 'Chief Code Jockey',
        location: 'jockey.com',
        dates: '2008-2010',
        description: 'Taming the wild code beast. A story for all ages. A friendship for all time. Share the adventure.'
    },
    {
        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:

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):

export class AppComponent {
  jobs = JOBS;
}

In src/app.app.component.html loop through the jobs to create links:

<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>

Alter the resume route to accept params

Our resume route in src/app/app-routing.module.ts no longer works. Update it to accept params:

const routes: Routes = [
    {
        path: 'about',
        component: AboutComponent
    },
    {
        path: 'resume/:id',
        component: ResumeComponent
    },
    {
        path: 'links',
        component: LinksComponent
    }
];