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.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
Line 1 imports the
Component decorator and the
OnInit interface from the
@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
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
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.