Angular: Components

In the previous post we got started with Angular. We discussed some of the advantages that come with Angular and went on to scaffold a sample project using the Angular CLI. We also looked at a couple of the files that were generated for us by the CLI and their functions. In this post we use the sample project we created to discuss Angular's first class citizens: Components.

Components are first class citizens in Angular in the sense that all the elements you see displayed by the app are either in a component or are a component themselves. That means there is one parent component that houses all the other components and elements. In our case the parent component is App Component. A component can be divided into four parts; the component file, the component template, the component styling, and the component specification file. For the App component, these parts correspond to four files namely app.component.ts, app.component.html, app.component.css, and app.component.spec.ts respectively. The template specifies the markup that will be displayed on the web browser and the accompanying CSS file is for providing component wide styling. The spec file is used for running unit tests. We will cover testing in a later tutorial.

Lets create our own components to get a better understanding of what we are talking about. It is better to organize our application using folders so lets create a folder inside the app/ folder and name it views. This is where we are going to be placing all our components.

Next we use the CLI to generate our home component and place it inside the views folder. From the terminal, run:

ng generate component views/home

Aside from creating the home component folder in the views folder and generating the four files we talked about, the CLI also made a significant change in the app.module.ts file by importing and declaring the home component as a usable component in the application.

Now lets navigate into our views/home folder and open home.component.ts.

Line 1 imports the Component decorator and the OnInit interface from the @angular/core library. @Component decorates our component class by specifying the selector, the template url, and an array of urls pointing to style-sheets that should be applied to the component. So if we want to use our component somewhere in the application we use its selector to include it. For the home component we created the selector is app-home.

Lets add home component to the app component and display it. First, lets open app.component.html and clear everything that was put in there by the CLI during project creation. Now that app.component.html is clear, we include home component by adding <app-home></app-home>. If we run our application using ng serve --open, navigating to localhost:4200 will show a default message "home works!". This default message comes from a paragraph tag in home.component.html. Aside from images and navigation bars etc that we can add to home.component.html, we can also add components and that's what we going to do next. From the terminal, run

ng generate component views/messages

The command will generate the required files and declare the component in the app-module.ts file. By convention each component's selector is app-[COMPONENT_NAME] so in this case the selector is app-messages and to include it in our home component we add <app-messages></app-messages> under <p>home works!</p>.

We can reuse components across our application by adding them as we have done above although we must be strategic as to how we structure the hierarchies, but in general, the less coupled and dependent on each other the better. In our next tutorial we look at receiving user input and data binding but until then, take care.