Creating the component

- [Instructor] Components will allow us to create our different views, which we will then use to post and display the messages in our messageboard. Components are the main type of elements we will be building in our app next to services, directives, and modules. Let's begin by making a new component. Let's right-click on our app folder, which is inside our source folder, and we'll select new file. Let's call this component messages.component.ts. We will call it this since it will display all of the messages in our messageboard.

The first thing we will need inside our component is the component library from Angular, so let's import that. On Line 1, we will use import and specify Component from @angular/core. Now let's create a component decorator. The decorator allows you to mark the class as an Angular component and provide any additional metadata on how the component should behave. Remember that components are the most basic building blocks of a UI in an Angular application, and an Angular application is just a tree of Angular components working together either in parallel or as parent and child.

If you have used Angular 1, components are a subset of directives, but unlike directives, components always have a template. So now let's define our placeholder template once we've typed out a decorator. And for the template value, let's type in some placeholder text such as "this is the messages component." Finally, let's create the class we are decorating.

As you can see, I've created a MessagesComponent class and I've exported it. So we have a component, but how do we use it? How do we see it or even test it? There are a few ways to go about it, so let's start with the simplest. We will use it in our main app component and display it as a sub or child component to it. We will compose our app component with the messages component. We will be doing this in reverse to demonstrate the need behind the steps we take.

Let's start by displaying our messages component inside the app component with an element called messages. So let's begin by opening up our app component's HTML template. As we can see, the default template that came with the project is inside its own HTML file. Since we want to start fresh, let's close this out and delete it. Then back inside our app component.ts file, instead of providing the template url, we'll change this property to a template, and then we'll directly place the template inside the value instead of the HTML file.

We can start with something simple, such as <h1>Hello, and then we'll use the title property we had set earlier on Line 9 with double curly braces to get the value. Let's save that and test it out. And as you can see, our template is a lot simpler now. Let's go back, and as we said we would, we'll compose our app component template with our messages component. And so we'll add a messages element after a header.

But how does Angular know about an HTML element called messages? What defines it? Nothing for now. So let's save this to see what happens in our app. Nothing's displaying, so if we open up our console by pressing F12 and go over to console, we can see that the error is messages is not a known element. So let's fix that. We have to define a selector in the component decorator.

Just like we have inside our main app components, we'll need to have a selector in our messages component. So let's add that at the top. And then let's save that. If we try to run this again, we'll see we're still getting an error. That's because our app component does not know of our messages component, so it has no way of accessing the selector of messages. We can fix that by importing our messages component into our app component.

So in our app component.ts file, just like we're doing an import from Angular core, we'll need to import our messages component. So let's add a new line for import MessagesComponent from messages.component. So now if we save that and try to run it, what will happen? Let's take a look. We can see that we're still getting an error inside the browser console.

The last thing you need to do is know that every component has to be registered with our main app module in order for it to be used in other components. Let's take a look at our main module now. So inside our app folder, we can open up app.module.ts. Inside here, we'll see our app module class with the ngModule decorator. Every component we create will need to be added to this declarations list on Line 8.

So we'll need to do that with our messages component, as well. So let's go back to our app component and copy our messages component import from Line 2, and we'll paste it here below Line 4. Then let's copy the messages component and add it to our declarations list. Let's save that and give it a try. Now we can see that we're finally getting no more errors and we're getting our placeholder template from our messages component.

Next let's take a look at showing some data.