In this guide we are going to start building out our proposal new component. This is going to be our component that lets us actually start to create our own proposals. I think this is a really exciting one because once we get into some of the things that a new proposal can do we're going to start learning about how you can work with forms and some of the very popular things that angular offers such as two way data binding and things like that where you can have a form that is inputting items onto the screen and then having a different part of the screen updating all in real time. So that's what we're going to start to get into with our proposals. But before we can do any of that we have to actually create our component.

When it comes to organizing our components, technically you could go and create a new directory called proposal new or something like that. However the common convention would be to actually organize that directly into the proposal folder. The reason for this is because proposal should be nested inside of this because all of the logic has to deal directly with proposals so it makes sense to include it right here.

I'm going to right click on a proposal, hit new file and this is going to be called proposal-new.component.ts.

Now inside of here you may guess what we're going to do. Very first thing we want to do is import our component from, this is going to be just like all of our other ones, angular core. And once we have that then we can add our metadata. We can look at a proposal list component right here kind of as our model. So you can see we need a module ID and we need a selector and we'll need a template URL. So start with the module ID that is just going to be set like all of the other ones to module dot ID. The selector is going to be in this case proposal dash new. Template URL, you may have guessed is going to be proposal dash new dot component dot html. And for right now that's all we need.

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

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

And I'm going to export class proposal new components and not put anything in there right now because before we do this I want to go and update all of the other things we need in order to start using this proposal new component, starting with our app router. So if I go to app routing, I'm going to create one called proposal new and this is going to be coming from Proposal new component. And I can come here.(He's in app-routing.module.ts) And we can we can create this route any way we want. I'm going to follow the standard restful routing naming structure and say proposals new. And this is going to be calling the proposal new component right here. Nothing else needs to change on this side.

Now we need to call the module, because remember that if you do not filter this through the app module you're going to get this error right here.

So let's do that. I'm going to copy this line directly from that page.(The page he's referring to is app-routing.module.ts)

import { ProposalNewComponent } from './proposal/proposal-new.component.component';

And now we have our proposal new component. We just need to add it as a declaration so that the application knows about it.

So now that this is registered let's see what we have we have an error that says proposal new component not found.

And let's see what could be causing this one. Failed to load proposal new component html out. Here we go. So what this is is the application was smart enough to go through our proposal new component and see that it is defining a template URL of this file but this file doesn't exist. Let's fix that by coming up. I'm going to close our documents directory, and let's hit save and create our proposal dash new component html.

And now we can put in here an h1 tag and say create a proposal.

<h1>Create a Proposal</h1>

And there you go everything is back up and working. The last thing we're going to add is we need to update our application component html. So our nav system.

I'm going to put new proposal and what I'm envisioning here when we actually get to implementing the design is I'm going to create a proposals dropdown and inside of that you're going to be able to click on either, create a new proposal, or view all, something like that. For right now we can just have them side by side. Now if I click on new proposal it looks like nothing is happening and that's because I need to say proposals/new.

And now if I click on this, (the New Proposal link), it takes us to our new proposal, so everything is good on this side.

Now before we move into the next guide which is all you're going to be focused on angular forms I want to do one more thing. So opening up our proposal new component down here. I'm going to actually create a variable and make it available to the system. I'm going to put proposal new proposal. And it says it can't find proposal which makes sense because we haven't brought it in yet. So I'm going to import proposal and now we have access to it.

Now the cool thing about this is because we have this now if I go to a new proposal nothing happens but if I come to the actual page and put this inside of a div. I can say proposal. And this should print out an object. Yes it prints out an object.

And if I do profile URL

It's not going to give us an error. Let's see why it's not giving us anything. That's because it's portfolio URL.

There you go. Just so you can see what's happening, because this is a good lead in to the forms, what we're doing is we're actually creating a new instance of proposal and part of the reason why I made all of these values optional was because I wanted to actually do this where I can create an empty object. I'm creating a proposal here and inside of this I'm going to be able to use a form so we can say all of these are optional. If I took all of these away, so if I took ID away, and customer away, then this would cause an issue because we would need to see, notice right here where it says supplied parameters do not match any signature of the call target.

So what's happening here is, typescript is looking up the proposal and it's saying wait a second in order for us to create a new proposal we need to have an ID and a customer because those are required fields. And so by making these optional with these question marks

what we're able to do is we're able to create a proposal that's completely empty, and I like doing this so that when we go in and we start creating our form that will eventually create proposals then we can create an empty object here and then as soon as the user goes in they fill out all of the parameters inside of the form, then they'll be able to enter those in, hit save, and then it'll go and create a real one. We don't have to worry about these being optional because we'll implement validations both on the server side and also on the client side. We don't need our constructor to force these two to be required. In fact we wouldn't want to or else it would throw a bug and it wouldn't compile just like this. So that's the reason why I made those optional.

So now that we have all of this in place we are ready to start building out our proposal form. And that's what we're going to do in the next guide.

• Code at this stage