In this guide we are going to start working with our documents and we're going to create some mock documents that we can pull in and show on the page over here. So if you click on docs we want to have some documents that are over here.(He's pointing to a blank screen with the title, Documents.)

If I come back to document.ts you can see our interface that we created in the last guide and this has a document that's going to have a title, description, file URL, updated at, and image URL. We're going to create some objects that contain all these values, just kind of test objects. Eventually this is going to be what we pull in from the API. However, I didn't want to go out create that micro service and then go spend the time doing that before we'd establish kind of this intermediary step and this is a very common pattern. You don't want to dive right into going and calling the API. And the reason for that is, let's imagine that you do that and then you go and you run into a bug with that. The first thing that's going to pop into my head is, well is the problem with the API or is it with the way that I'm calling documents or could it be with the view? The more things that you package together and the more steps that you skip the more bugs that you can introduce to your program. So it's pretty smart to instead kind of take some intermediary steps just to make sure that everything's being built properly. And that's what we're going to do here.

First thing I'm going to do is import our documents. I'm going to put import document and this is going to be from our new documents, so it's just going be period slash document just like this.

import { Document } from './document';

And now we can use this. So what we want to do is, if you come to our interface, because this is an object we want this to be of a type of array because we want to have a collection of documents. If you come down here inside of our class I'm going to create a variable and the variables going to be called Documents and I want this to be of type document and I want the document to be an array.

  documents: Document[]

If you remember back to when we work through the typescript course, right here what we're doing is we're saying that we want documents to be of type document and when we add the brackets at the end we're saying that this is going to be an array. And that's telling the typescript compiler to expect an array. So if I tried to do something like this right here it's going to give us an error

and it's going to say Type 'string' is not assignable type 'Document[]' with the array syntax. So instead what we're going to do is we're going to create an array. Inside of the array is where we're going to put our documents. And these are just going to be some simple things that follow the pattern of our interface and the neat thing about the intellisense built in the Sublime Text is it's going to give us some very helpful error messages.

Documents by itself is going to be an array but it's going to be an array of documents so these are going to be javascript objects. Inside of this I'm going to place our curly brackets and because this is a javascript object this is going to contain all of our key value pairs. Our key value pairs are going to look identical to what we have right here.

We're going to have a title that's of type string, a description of type string, all the way down. This one is easy because they're all of string types.

First thing I'm going to do is give us some room and this can seem a little bit annoying but it's actually really helpful because look what happens if you read it

It says, type, and it gives the type, is not assignable to type document. This type is not assignable to type document. Property title is missing. So do you notice right here, this is actually kind of helping lead our development. It's telling us what is do and it's going to do that for each item. So if I type in title: and say "My First Doc" then notice how right here the error message has changed, now it says property description.

So now I can say description and we'll just you know pass in whatever we can put any kind description we want and next thing it says is file URL. So I kind of like this. At first this really annoyed me. I did not like it at all until I actually read it and then noticed that it was giving me my hints. It was telling me exactly what I needed to know which I thought was actually pretty cool.

File URL is going to be not a real file URL these are just some links I'm putting in. And then the next one it says is updated at, and this can just be a string. It's eventually going to be a date but, for right now we can treat it as a string because when it comes in from the API obviously it's going to be a string because API's can't send anything besides strings, and we'll convert it to be a date when it comes in. So this is going to be today which is 11/11/16. The next one is image URL and we'll just copy this one right here and that is our document.

Notice how all the errors are gone because those interfaces are now good to go. I'm going to copy this because I don't think you need to watch me do that all over again.

Now I'm going to create a second one, and one more just for good measure.

I'm going to put, "My First Doc", "My Second Doc", and "My Last Doc" as the titles for each one. If I hit save nothing happens and that's fine because what we need to do now is we need to call this set of data. What we have, because we exported this class, this document variable is going to be made available to our template URL. This is one thing I love about Angular is how easy it is to export data and have access to it inside of the view files.

If I come to documents component I can create a div and now we can just loop over our documents array. I can come here and the syntax for this is a little bit different. This is specific to angular this isn't typescript or anything but it's going to be similar to the syntax of typescript. The syntax is ng for, and make sure you put an asterix in front of it.

<div *ngFor>

There's nothing magical about this. This is just letting the Angular compiler know that we are running a for loop. The way it's going to work is anything inside of this div, because it's going to treat this as one element, anything inside of it is going to get repeated for every single time that we run this.

We have this ngFor loop and now we're going to call inside of it our documents. And if you remember back to typescript this part is going to be familiar because we're going to use the for syntax. I'm going to put "let doc" and doc could be anything. We call doc "X", we could call it "I", this is just our looping variable. I'm gonna call it doc and put that of documents".

Now this is really cool because you may think that this is just a string but with the way angular works because we have this little *ngFor it's going to treat everything inside of here as Javascript code. So this is going to be just like we were in a regular program and we created a for loop. This is going to loop over our documents array and it's going to set the value in each iteration of whatever the element that we are on is going to set it equal to doc.

Now inside of this we can do some things like I can do each three tag for the title and the way that angular does our interpellation, if you're coming from rails then you're probably used to erb or hml and how you can get view code to show some code actually coming in that's dynamic and the way the angular does is with double curly braces so these double curly braces are going to be processed by the system. You can put any javascript in here that you want. So if I wanted to do two plus two and just run a regular function what this is going to do if I save is now you can see that it looped over our documents array and so it looped over three times.

But we didn't actually call anything inside of the documents but we passed it in just some regular javascript code and it compiled it because two plus two is four. So I just wanted to do that so you could see there's nothing magical happening here. All we're doing is we are creating a for loop and then we are calling the values right here and this is just regular javascript. So this is going to give us access to call doc and then because this is a javascript object we're going to use the dot syntax.

So for this first one it's going to be doc title.

<h3>{{ doc.title }}</h3>

And if we come back here we can see all the values that we have. I'm going to copy these over just so we can have a comment amount. Just so we can see these.

In an h3 I want to put the title and then right below it let's say in an emphasis tag I want to put our description. I'm going to come here and grab the description and then in a link we're going to do the file URL. Now because this is not a link going to somewhere in the rest of our site then here it is fine to use the regular href. We only use the other the link router whenever we're directing users to another page on the site. Here we are saying this is a file URL where you can go download it it's going to be outside of the application. So what we do here is copy this over and this is going to be the file URL. In this case that just Google. We don't have to have a title or anything we can just inside of this say download file. And that's just going to be regular a tag and to make this so it goes on a different line I'm going to put it inside of a div.

We have two other items. We have updated app and we have image URL. So for both of these I'm just going to print them out. So I'll put them inside of p tag and let's do both of them. The image URL eventually will be an actual URL to an image so we'll put it in an image tag but we don't have that right now so we'll just print it out just so you can see how to do that. One more. We have image URL and that's it. So now if we save you can see that all of our documents are now coming in.

I think this is really cool. I love how easy it is to access the component data and to be able to dump it straight into the view. And let me put a little hr tag just you can see them separate. So here you go, this is my first doc. This is second doc. And third one. And notice how because we put this download file inside of a href inside of that tag. Now it has all of that for us and it's an actual link.

So this is going to be kind of the start of how our document is going to look. Don't worry we're going to make it look a lot prettier than this when we start to integrate bootstrap four. However this is definitely the structure. This has all of the parameters that we want and we're even mimicking what we have going on. And we're going to be pulling in a document array from the API. So the thing I like about what we did here is now say that we go in and we connect to the API now and we pull in our documents. If something breaks on the site we know that the issue is with our connection to the API or how we've configured that. It's not with our view, it's not with our connection, it's nothing that's going on here, and it is not with how the component is communicating those values, or how the documents are structured. All of this is working perfectly so the next step after this would be to connect the API and then that would just get rid of the hardcoded values and start pulling in the real ones that are coming from the rails app.

• Code at this stage