Understanding the Angular Components

Keerthika Mahendralingam
Nov 8 · 4 min read

In this post, we will see what components are and how they are used in Angular applications.

In Angular, Components are building blocks of your application. Every Angular application must have at least one component and this component is called ‘root’ component. This component is the foundation for every Angular application which bootstraps Angular application and connects the hierarchy of components with Document Object Model (DOM). When we use the Angular CLI to create a new project, it generates this root component(app.component).

A component consists of three primary elements:

  • The Visual part - Called template which is written in HTML.
  • The logic part - Represented by a JavaScript object.
  • The styling (CSS, Sass, Stylus, etc..)

These two visual and logic parts are connected to each other using a concept called data-binding. If you navigate to “/src/app” directory of your application, you may find the following three files are created with application creation.

/app.component.html
/app.component.scss
/app.component.ts

Here, app.component.ts is the logical part of the application component, represented by a class. And also notice that the files are named {component name}.component.ts. Let’s look at the file:

Let’s go through the code.

The first line is called an import statement just like an import statement in Java class or using in C#. Every class, that we want to use, has to be imported before. Since this is a component, we are importing Component from the @angular/core library.

And then we have defined the @Component decorator, which provides configuration options for that particular component. Decorators are same as annotations in Java which allows us to add meta information to a class. Decorators are marked by starting with an @.

As you can see, @Component decoration referencing the location of the HTML template file and the styling file with the templateUrl property and the styleUrls property.

And the logic of the component resides in the class at the bottom.The name of our component is defined by the name of the class (“AppComponent”). In the code above, the class has a property title. That property is just for demonstration purposes and is not mandatory.

While the class can only contain code logic, the template is used to define the look of the component. It is written in HTML syntax. In our example of the app component, the template file is called app.component.html. It follows the same naming convention as the typescript file.

I have removed a bunch of templating created by the CLI and placed the following.

If you notice here, we have added the title into the braces. By encapsulating the name “title” in braces, we tell angular, that we want the content of the headline to be bound to the “title” property of the component. This property is defined in the component class. Whenever the value of this property changed the displayed value also will change. This is called Data-Binding.

Now let’s see how we can create new components using CLI. You can use the following command in terminal to generate component a new component.

ng generate component component_name

Also you can use the following shorthand syntax, which makes life a little bit easier.

ng g c component_name

This will create a new folder with the component_name under the “/src” folder along with with the respective template, CSS, .ts and .spec (for testing) files. If you want to skip generating the .spec file, you can use --skipTests option to tell the CLI to skip generating the .spec file.

Nesting Components

Now we know what a component is. Let’s see how we can make use of components to create an application through an example.

Create the following components:

$ ng g c nav

$ ng g c about

$ ng g c contact

$ ng g c home

Let’s implement a header bar with a navigation in our app.

If you go to /src/app/nav/nav.component.ts you will see that in the component decorator, there’s a selector property bound to the value of “app-nav”. When you reference the selector of a given component in the form of a custom HTML element, it will nest that component inside of the component it’s that’s referencing it.

Now update the app.component.html file with the following contents:

<app-nav></app-nav>

<section>
<router-outlet></router-outlet>
</section>

If you save the file you just updated, you will see in the browser we have a simple, nav works! which is rendered from nav.component.html.

Now let’s create a simple navigation by updating the nav.component.html file as follows:

If you noticed here, I used routerLink attribute which allows you to direct the browser to different routed components. And also used the value of “appTitle” property which is coming from nav.component.ts.

Now, let’s apply style to our header.

First, let’s visit the global stylesheet by opening /src/styles.scss and define the following rulesets:

Visit nav/nav.component.scss and paste the following contents:

If you save, this should be the result in the browser:

Now let’s add the actual navigation between components. Open up /src/app/app-routing.module.ts and edit it as follows:

  • Import the other components home, about and contact.
  • Define an object for each route inside of the routes constant.

Save this file and try clicking on the links. You will see that each of the respective component’s HTML templating shows up in the <router-outlet></router-outlet> defined in app.component.html.

We will see the Angular routing in-detail in another post.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade