Components overview

1. Overview

In the last lesson we went through the most important file within our project. Now we will focus on the components.

Among other advantages, Angular gained its position thanks to its component-based architecture.

Components can be thought of as small pieces of an interface that are independent of each other. Imagine that you have a simple application with a list of items and a corresponding search box to retrieve the items by word matches. The box with listed names, the search box, and the main sheet where the other two boxes are placed are all considered separate components in Angular.

Components of a similar nature are well encapsulated, in other words, self-sufficient. Developers can reuse them across different parts of an application. This is particularly useful in enterprise-scope applications where different systems converge but may have many similar elements like search boxes, date pickers, sorting lists, etc.

Let's have a look at how components are built within Angular

As you can see within a src/ location, there is a folder called app containing a few files starting with app.*. The app represents the App component.

Usually components are organised within folders (1 component = 1 folder). Each Angular project has to contain at least one component. Each component consist of a few files:

2. Component logic (.ts file)

Let's open the file located in /src/app/app.component.ts. You will see the following content  

The app.component.ts file consist of few parts:

1. Imports

At the beginning of the component's .ts file we have to import a Component from the Angular library. This is required to make our component work. An @Component is a Decorator (don't have to bother what does it mean for now) - it provides a configuration metadata that determines how the component should be processed, initialized and used at a runtime.

Whenever we want to use other components within another component we also have to import it in that place. (We will learn how to do that in the next lesson).

2. Metadata

The @Component decorator which we imported in a first line allows us to specify the matadata for our component. The metadata contains a few parameters:

• The selector parmeter contains the name of the tag that can be used to create this component.
• The templateUrl parameter contains the relative URL/path to the HTML template template (app.component.html file)
• The styleUrls parameter contains the array of CSS styles to be used for styling the component or a path to the external file (the app.component.scss file)

You might have noticed from a previous lesson, that we used a <app-root></app-root> in the index.html file.

Our component can be called in your HTML code just like any standard HTML tag, i.e:

3. Class

The last part of our component is a Component Class which contains attributes and functions. This is the place where the entire logic of a given component is stored. In the next lesson we will fill this component with some functions to make our application work.

3. Component template (.html) file)

The template file which is responsible for the view of our component. A template looks like regular HTML, except that it also contains Angular template syntax. Our template can use data binding which allows us to synchronize data between our Application and the DOM.

4. Component styles (.scss file)

This file contains all the styles for our component.

5. Component tests (.spec.ts file)

Within this file we will create tests for our component. Tests are important for each application, and using them helps us to avoid breaking components' logic while making some updates/enhances to them.

6. App.module code (.module.ts file)

As we mentioned before - the Angular application has to contain at least one component. This first component is called the root component.. The root component is the first Angular component that gets bootstrapped when the application runs. Two things are special about this component:

First, if you open the application module file src/app/app.module.ts, youwill see something like:

You'll notice that, it's added to the bootstrap array of the module definition.

Second, if you open the src/index.html file (the first file that gets rendered when you visit the application URL) of the application - you'll notice that it's called inside the document tag.

Important:
The app.module.ts file is only required for our App component (root component). All other components that we will use inside our application wont require module.ts file to work.