Lesson 10 - Components

We've heard the term component thrown around quite a bit, but now it's time to go over what exactly components are, and how to build one. Let's look at a sample component and check out all the parts that go into to a component.

Example Component

You may recognize some parts after we went over modules. Let's go over them in more detail.

• Imports: By now we should be getting slightly more comfortable with imports. Any tools and files that we will use in the component, we need to import. Don't forget in the component we are only importing the things we need for this component as opposed to the module where we have to import all the tools for all the components.
• Also notice that we are importing Component. This is because we want to tell Angular that we are actually building a component, and importing it gives us access to the next part...
• Decorator: Our decorator for a component will contain all ther pertinent instructions for a component. It does this by taking in an object that will contain values that allow us to do stuff like link our files.
• selector: This is how we refer to this component when calling it from the outside. In this example, the component's selector is app-root so in a parent component, we would call this by using the custom html tag <app-root>. If I name a component app-burger, then anywhere I want to use that component, I would insert the html tag <app-root>

  One more thing worth mentioning, if you do not include the prefix that would declared earlier, your linter will complain. I used the default prefix, so every component I make has to start with 'app-'.

• templateUrl: This contains the location of the html file that we want this component to display. In the example, I call the file app.component.html. It is good practice to keep your html file the same name as your component, and you should always have it in the same folder that the component is in.

When you look at examples of component code, you made notice that instead of linking a file via templateUrl, they use template, and actually write the html inside the ts. Don't do this. It works fine for small examples, but in development you will almost never do this, and as you are starting out, the practice of linking your html is quite important.

• styleUrls: You probably guessed by now what this does: it links our css file. Since it is an array, if you want to link several css files, you can.

In my (still limited) experience, I have yet to do so. I tend to put any class names that I want to use over multiple components inside the global styles.css. When we get into parent/child components, I can see this being useful.

Inside our class

So all the fun TS we've been applying over the first few lessons go inside here. You'll see variable declaration, the constructor, and a method. Now we can import this component wherever we want.

Now if I want to call this component, it will display the HTML and apply the linked CSS and our TS to it. And since we gave the name app-root in the selector, we would call this component using the html tag <app-root>

In fact, if we look at the html of the stock app, you should see this...

There's our component!

Practice exercises

I mentioned last lesson how important it is to practice some of these things because not only the concept can be daunting, but the concepts are fundamental to how Angular works. Try creating a new component, creating an HTML and CSS file, import the component in your module and finally use the custom tag to display your component. It may take 3, 4, or even ten tries, but make sure you feel comfortable with component creation.

Yes, will become commonplace in more complex projects. Let's give that a shot... in the next lesson!