Now that you're getting used to some of the basic ins and outs of Angular two let's go and start building out our application.

The very first thing that we want is to have a document repository. What this is going to be is a spot on the application where users can navigate and they can click on a link that says something like, 'documents' and then it shows all of the documents and eventually they're going to be coming from a Rails application so it's going to be an API that we create and it's going to pull in documents, links to documents, images, different things like that. For right now we'll hard code all of that in and then eventually we'll connect to it via HTTP. Right now let's just create the very basic component something that we can navigate to.

Inside of our app directory I'm going to click new folder and inside of this I'm going to call it documents.

And documents is just going to be the directory of our component. Inside of this documents directory let's create a new file. This is going to be documents.component.ts

and this is going to be our basic component. For right now let's just fill this in with the basics that we need. First thing we're going to do is import a component. This is going to be a very standard process. You'll see that every component that you have needs to have the component library imported. This is going to be angular slash core.

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

That's all we're going to need for that first part. After that we're going to actually call our component and add our decorator metadata. And just so you have an idea of what this is, one thing that sublime does that's really cool is it actually shows you what you are working with.

So here it shows that we have a component decorator and so it says what it does and it marks the class as an Angular component and collects component configuration metadata, says how to use and pass in various metadata and it also gives a description. It says "a component decorator allows you to mark a class as an Angular component and provide additional metadata that determines how the component should be processed, instantiated, and used at runtime." Even though that seems a little bit fuzzy, just know that what a component does is it's a decorator, and if you went through my typescript course then you should have an idea of what decorators are and how to use them. They are at a high level. They give you the ability to add metadata without having to actually define it in the class itself.

Inside of this we're going to pass in a module ID and that's going to be of module dot ID. And after that we need to give it a selector. So our selector is going to be what anything else in the application can call. In this case I want to call it 'documents'. And after that we need to provide a template URL. I'm not going to do what we did before where we create a template and then create a URL for it separately. We're going to go straight into creating this URL and I'm going to call it documents dot component dot html. For right now that's all we're going to need.

@Component({
  moduleId: module.id,
  selector: 'documents',
  templateUrl: 'documents.component.html'
})

After this we need to export the class get the export class and it's going to be documents components.

export class DocumentsComponent {

}

And that is all we need at the moment. Eventually we're going to add quite a bit of information in here because this is where we're going to do things like calling the service that we're going to create that's going to call the API and pull in all of our documents for us. But right now let's just create a page that actually works.

I'm going to copy this documents.component.html over here and right click and save this.

For right now let's just add an h1 tag that says documents so that we know when we navigate to that page if it actually exists or not.

<h1>Documents</h1>

This is everything that we need on our component and on our template. But now we actually have to go and import this into our router. Open up app router and we have our home page component. Let's now bring in our documents component. So we have documents component and this is going to be pulled in from documents, and documents dot component.

so you can see that that error is now fixed. And now we simply have to add the route in. I'm going to say I want the path to be documents and this is going to be of documents component.

So now if I hit save here. Let's see it looks like we might, oh and we do have a bug because we need to import this.

I'm going to go to app.module.ts. If you want to see the bug click on inspect. Let's open up the console. And as you can see our console says, "component DocumentsComponent is not part of any NgModule or the module has not been imported into your module,'

which essentially means, go to that module and put it inside of it. So I'm going to take our import statement. Pasted in right here and then we also need to import this in our declarations.

Hit save. See if that fixes it. There you go. So that fixes our error and everything is good on this side.

I'm going to open this up a little bit wider so you can actually see the path. And now if I type up here and type in documents you can see that brings up the documents page so all of this is working properly.

This is, just in review, what we did is we created a new component from scratch. We put it into the documents directory because that's the components name and we created the component which is a typescript file followed by a template file and then we call that in our router. And then also in app module. So that is the kind that dead simple, easiest way to add a component. In the next guide I'm going to show how we can start building up our navigation links here so that we can go from page to page.

Resources

• Code at this stage