Understanding Components

Let’s discuss some theory before jumping into our project code. One of the major features of Angular is components. Components are custom reusable elements. They were introduced to break an application into smaller pieces.

The browser has a limited set of markup tags that it can understand. There are some tags that have functionality defined by the browser, such as the <select>, <video>, and <audio> tags. These are powerful tags, but what if we want to teach the browser additional tags? Maybe we want a tag that displays a credit card number input or a tag that outputs pagination links.

This is where components come into play. Components are a way to teach the browser new tags.

The problem

Let’s look at an example of why components are necessary. In the example below, we have a list of posts.

The HTML structure is the same for each post. There’s an image, author, and title. The difference between each post is the content.

This approach is not scalable. If we want to add more posts, we’d have to duplicate the same HTML structure and replace the content. What if we want to change the structure of a post? We’d have to update each post’s markup. This would take a lot of time if there were hundreds of posts.

The solution

Components easily solve this issue. We can create a component to store a template of the post. Components are reusable, which allows us to create as many posts as we’d like. If we make a change to the component, the changes are reflected in all uses of the component. A general rule of thumb for defining components is that they should handle one feature in your application. This keeps components manageable.

We’ll dive into the code in a moment. There are some additional things about the components that I want to discuss.

The App component

Angular apps are made up of components. We’ve been using one from the very beginning. Every application comes with an App component.

In the diagram above, we have a hierarchy of components. The App component is typically the root/parent component of all components. Usually, the job of the app component is to load other components.

Components are allowed to load additional components. The relationship between them becomes a parent-child relationship. The App component is considered the parent component because it’s loading the Post component. The Post components are considered children.

If we’re developing a small app, then it’s perfectly fine to keep everything to one component. In the last section, we didn’t create multiple components. We put everything into the App component.

Dissecting the App component

A component is made up of 4 files. In the src/app directory, we’ll find the app.component.css, app.component.html, app.component.spec.ts, and app.component.ts files. There’s also the app.module.ts file, but we’ll be ignoring it for now. Modules deserve a lesson of their own.

Here’s an overview of each file:

• app.component.css - The styles for the component
• app.component.html - The template for the component. Also called the “view”
• app.component.spec.ts - The test file for the component
• app.component.ts - The logic for the component (also used to configure the component)

Let’s dive into the app.component.ts file, where we can configure the component.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'components';
}

The very first thing we do is import a decorator called Component. The Component decorator can be used to decorate a class. The Component decorator tells Angular that the class should be treated as a component.

We can pass in an object to the @Component decorator to configure the component. If we look inside this example, three options are being set.

The first option is the selector option. This allows us to set the name of the tag. We can use components in templates like regular HTML elements. For example, the App component is used in the src/index.html file.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Components</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

In the <body> element, we can see the App component in action. The name of the tag should match the value we set in the selector option.

Here’s the process Angular will go through when starting the app:

1. It will load the components we’ve created in the project.
2. Next, it will scan the contents of the src/index.html file for uses of any of the components that are registered with our application. It will match the name of the tags to the selector option in each component.
3. The <app-root> tag will match with the App component. Angular will interpret this as us wanting to load the App component.
4. A new instance of the App component is created because the tag name matches the App component’s selector option. The component’s template will be inserted into the <app-root> tags.

The selector option is very important. It’s how Angular is able to identify a component in the DOM.

The next option is templateUrl. This is where we can set the URL to the template file. The App component’s templateUrl option is set to ./app.component.html. This is why the template is able to access the properties and methods in the class. Angular will expose them to the template as long as the templateUrl option is properly configured to the correct template.

Lastly, we have the styleUrls option. This is where we can configure the CSS for the component. By default, the App component is tied to the app.component.css file.

The value for this option is an array. We have the option of loading multiple CSS files. Typically, one will suffice. We are going to look at why components have their own CSS file in another lesson. For now, components can come with their own CSS. We’re not forced to define styles for a component in a generic global file.

Summary

Components are reusable elements with their own template, logic, and styles. Angular will scan the template for components. If it detects a component, it will create a new instance of the class and insert the component’s template. In the upcoming lessons, we’ll look at how to create components.