In this guide I want to take a second and kind of step back and talk about how we get data into our views because I know we have walked through how to do it here with the documents. However I want to just take a second look at it and have some more examples because I know this is something, especially if you've never worked with Angular at all, this may seem a little bit weird and before we get into the next section where we're going to build out our proposal component I want to make it explicitly clear because that's going to be using that type of system quite a bit.

Let's say that for our documents here that we don't want this text declared in the view.

So right now we have this h1 with Documents typed straight in. Let's say that we wanted to control this from the document component and a hard coded value wouldn't be a big deal but usually this would be something like the user name if we had authentication built in and the user is logged in then you wouldn't control that from the view you'd control that from the component.

I'm going to give this a page title. It's going to be of type string and we'll set this one equal to documents dashboard.

And now what we can do, I'm going to hit save, nothing changes here but what we can do now is go to our document component and get rid of this documents code and instead use our double curly brackets and type in pageTitle.

Now if I hit save you can see it says document dashboard. What this is doing in the background is Angular is going in and it's saying OK these are the attributes that are available to the component.

So here we have now two examples of our document which is a interface and it's save though inside of this documents variable. And then just a regular hardcoded string value of document dashboard.

Now whenever you do this you're giving this component full access to be able to grab these values and you also have the ability to go both ways in this. And we'll get into that later when we go when we build out our proposal component. But for right now we're just reading the data in. So whenever you have the curly brackets you are saying let me have access to these variables and these are the same variables that are in here. (see image above) Say that you put all of your template code inside of your component metadata then that may be a little bit easier to understand because it's all on the same page. But because we're using a template URL in a separate file then you may wonder how in the world did these get access to those values. And it's simply because we are connected. This documents component is the same as if this data was all here it was all on the same page. And this is where having a component or as a decorator and having this component class decorator, this is where it's so powerful is because it gives us a direct feed into the template so we're able to take all of the values, everything that we export inside of this class and we say here in the view you can go you can grab this data you can do whatever you need with it and it makes it really easy. This is a very nice step up compared with the way the Angular one did it where you had all kinds of scoping issues and things that you had to figure out in order to make data available. This is a much more straightforward approach.

Now that you have that knowledge under your belt we're going to go into the next section where we're going to start building out our proposal component which is going to be a really cool feature where freelancers are going to be able to generate proposals dynamically and we're going to have a lot of cool features in that side of it. So I'll see you then.

• Code at this stage