Now that we have our documents set up it's time for us to create the second feature of our application which is going to be proposals. Proposals, like we've already discussed, is going to be a function where freelancers can come in they can type in a few details about whatever their proposal is or project their bidding on, that kind of thing and then the system can generate a full proposal for them. We are going to create a new folder here, and I'm going to call it proposal.

and inside of this, this is where we're going to place all of the items related to it. This is eventually going to be a pretty big directory in terms of what we're going to keep in it but right now I'm going to keep it pretty basic and simply create a proposal and right here it's actually going to be a little bit different. I'm going to create a proposal-list.component.ts.

The reason I'm doing this is because with our documents, those are fine we're never going to have any real big functionality coming out of that side of it. We simply want to with documents show the documents on a single page and I use that as a starting example because I wanted to give you kind of a base case first. Our proposals are actually going to get a lot more complicated.

Proposals are going to have a few functions. First you're going to show proposals and that's what I want for a proposal list. I want to be able to show proposals and have you be able to click on a proposal and then go to a show page. So that means we're going to have a proposal list component. We're going to have a proposal show component, and then we're going to have the ability to create proposals from scratch. So they're going to be able to come in and we're going to have a proposal new component.

Just so you have an idea of why I picked this naming structure it's because we want our components to be specific to the features that they have. A good thing that you can do and especially if you're new to learning is I usually like to have two windows open so that I can see both of these. So I'm going to use what we did for our documents as a template. So here we have our documents component and it's right here.

So now what we can do is use part of this as an example for what we're going to be putting in up here. So I'm going to put import, component, and believe me after you've done this enough times you don't even need to look down there but just in case because this is one the first time you've ever done it it definitely helps to have a reference guide. I'm going to put, import component from angular core.

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

We don't have to import document obviously so don't copy that part. Notice how I'm not copying and pasting all this in. The reason for that is because I've noticed the more times you copy and paste the more times you're going to run into errors and it's really not that much code to write.

Let's see, we have component, and inside of this we're going to have a few things. Remember to put component with parentheses followed by curly brackets. We're going to have our module ID. Don't forget to put that in there. Followed by module dot ID for the value. After that we want a selector. This selector is going to be proposal dash list because it's going to list out our proposals. Then I want to have a template URL and this one is going to be proposal list dot component dot html. And that's all we need here.

@Component({
  moduleId: module.id,
  selector: 'proposal-list',
  templateUrl: 'proposal-list.component.html'
})
export class ProposalListComponent {}

Then because this is a decorator it is complaining because it needs to have an export. So we need to have exported class, and this is going to be a proposal list component and we have to put anything inside of it right now we can just leave it like this. Let's create our proposal list component template. Right click on proposals folder, hit new file and name it proposal-list.component.html.

For right now we'll just put an h1 tag in here and say proposal list.

<h1>Proposal List</h1>

Hit save, None of this is working yet because we have to follow the same pattern. Let's open up our routing module and pull in our proposal list. Here we have proposal list component, bring that in. This is going to be in the directory proposal followed by proposal dash list component. Now we can create the route now that it's been imported. So here I want this to simply say proposal. So this is one thing that I wanted to show you that's kind of cool is even though our component is actually called proposal list. We don't have to use proposal list for the route. We can call it anything that we want.

Here I am saying the path is going to be proposals which means in the browser it's going to be slash proposals and then we pull in the proposal list component. Now don't forget to go app dot module dot ts, because it's already complaining about it, and we need to import this. I'm going to import our proposal, and we're pulling it in from right here.

And now that stopped complaining and now we can simply come down and copy and paste our proposal list component.

When I hit save the application stops complaining and it's back to working.

The last thing I want to do in this guide is go and add this to our navigation system. If you remember our nav system is in app.component.html and here we can add just one more link.

We're going to go to proposals and remember the reason why proposals is what we're calling in the router link is because that's what we put inside of our app routing module so we put proposals. So that is what our router link is going to look for.

If I hit save we have proposals link. If I click on it it takes us right there.

So look at that we now have our new component built and this is going to be everything that we need as a starting point for starting to add all of the cool features we're going to be building into the proposal.

• Code at this stage