I really like how the application is coming along. So far we have a home page. Our docs, our proposals, and then the ability to create a new proposal with a form. And don't worry, if you notice we don't have a submit button or some of those things, we'll be building those in eventually especially when we get into connecting to the API so that we're creating records. I don't really care as much about you know being able to create fake records as much as I do eventually connecting to that API and the service.

The next thing on our list is to create a show page because the way that I want this to work is this new proposal page will kind of live on its own and it wont redirect because you can already see the finished proposal right here. What I'll eventually do is implement some styles so when you hit submit and you create that record it'll actually update the style to show that the proposal has been completed.

What I really want is on the proposal list to be able to click on one of these and then be taken to a show page. I think that's kind of a necessary way of doing it because if you take just a real world case study, imagine you're a freelancer and you come to the dashboard and you come in and click on proposals you want to have your full record of all the proposals you've ever created before so that if you want to manually send a link out to the client you can do so or you can just go reference it to see how much did I charge again? I know that something, as a freelancer, that's something that I've struggled with. I'll send proposals out and then when I say that it's been a few weeks I completely forget how much I quoted them because those are all things that I put into the proposal but after a few weeks that's something you might forget. Here you'll be able to go and reference it at any time and you can see all of the ones that you've sent out and what their details were.

With that in mind let's create a new component. This component is going to be called proposal show. So let's come into our app. In proposal directory we're going to create a new file and following our convention we're going to say proposal-show.component.ts.

This has has been created. And as you may have guessed we're going to import the component library. This is going to be from angular core.

import { Component } from '@angular/core';

And let's create a component and add this metadata. Sure this is old hat to you now but let's also create an export the class of proposal, not new component, I'm just using that for auto complete, proposal show component, and then just create an empty declaration.

@Component({

})
export class ProposalShowComponent {}

Inside of this component we're going to need a module ID. Then we're going to need a selector and the selector's are going to be proposal-show. I also want to have a template URL. Here I copied and pasted because it is just easier.

  moduleId: module.id,
  selector: 'proposal-show',
  templateUrl: 'proposal-show.component.html'

Here we're going to have proposal show component html. just so we don't run into an error let's actually create that right now. I'm going to hit proposal, new file, create this file.

and give an h1. Put proposal show.

<h1>Proposal Show</h1>

I'm moving along a little bit quicker now because we've already gone through this now four times so hopefully this is starting to sink in how you can create components. It's pretty straightforward on this side of it especially a basic one like this. Now that we've created our component, we've created the template right here for the component. Now let's come into our app module and bring it in. So we're going to import it. This is going to be show and it's going to be imported from Proposal show. And last thing we're going to do on this side is add it to our list of declarations.

So this is all good and working. Let's see the next thing that we have to do. Let's add it to the router. So I'm going to, from our module, copy this over.

import { ProposalShowComponent } from './proposal/proposal-show.component';

Then paste it in here

Then we'll add another route. This is where things get a little bit trickier because our proposal show is going to have to be dynamic. So I'm going to put in this component. So far we've been able to hard code all of our values. We have home, documents, proposals, proposals new.

None of these paths right here ever have to change. However our proposal show component is going to have to change because we need to know which proposal to be looking at. It wouldn't make any sense to have a hard coded value in there. Our path is going to look something like this, where we have proposals/123. We're going to use the ID that comes in from the proposal to be the URL and that's fine but we can't hard code all the values in here. I mean technically you could but that would be a horrible idea. What you have with angular is actually the exact same thing that you have with Rails that's the same syntax which is always nice. You're going to use a colon here followed by ID and this is assuming you're using that ID as a selector. What we're doing here is we're saying, you're going to go, and just so you can see it's different, I'm going to change it to proposal instead of proposals because I think this makes more sense if you're looking at a URL bar you're going to be looking at a specific proposal not proposals and because of how specific you can get with the routes you can have this set up however you want.

I'm going to create a proposal and then we're going to pass in an ID. What we're going to eventually build in is our show page component is going to look for the parameters in the URL and then it's going to render which ever one comes up. So if we have a proposal that has ID 5 then it's going to call, eventually it'll call the API but for right now it'll call some hardcoded values and it'll see, okay bring in and show the value that is number five.

That is everything that we have to do on that side and we can't add this to the router yet because it wouldn't make any sense to add it to the router since you can't go click on show page. Instead you're going to have this inside of the proposal list. So what we'll do is we'll have a link where you can click on one of these and you'll be taken to that show page where you'll see all the details for each one of their proposals. And that's what we're going to do in the next guide.

Resources

• Code at this stage