Components

Components are at the very core of Angular applications. An Angular application is materialized by a component tree that, as a whole, defines the user interface and behavior of your application.

At the top of this tree is the App component, which is the one that you will define first. In this component, you will be able to compose/assemble other components, which will, in turn, also be able to use other ones in different ways.

Here's what this tree could look like:

The App component at the top is the one that will be loaded first when the Angular application starts (we'll quickly explore the bootstrap process later in this chapter). In this example, the app component includes a menu component, which, in turn, includes menu entries. Let's say that this component renders the menu of the application, allowing its users to move around from page to page.

Below the app component, there is also a ClientSearch component, which will render a search box on the screen. Finally, the last child of the app component is a ClientList, which must render a list of clients. As you can see, the ClientList component has children of its own: a set of ClientCard components, each probably rendering information about a specific client on the screen.

As highlighted through this example, having a component tree makes it easier to navigate and understand the composition of the application. Additionally, it makes it possible and more natural to reuse code and parts of the user interface.

But what are components really? Well, the simplest way to think about them is in terms of what they're composed of:

1. An HTML template made of the following:
   • Standard, as well as custom, HTML tags
   • Angular directives, expressions, bindings, pipes, and more
2. A component class with the following:
   • Metadata
   • Logic
   • Data
   • Inputs and outputs

That's it! Based on this explanation, we can state that creating a component is a way to encapsulate and reuse the logic and HTML needed to render a part of the user interface.

A component can be as simple as a text field or as large as the whole page, and can be composed of images, forms, fields, tables, and much more. Actually, as we've just mentioned, it can even represent the complete user interface, such as the root app component.

Even if it is actually possible to define the whole application as part of the app component, it is much better to decompose it into many, smaller (and thus more reusable), components.

Component templates are where most of the magic of Angular happens. We'll learn more about templates and how to write them in a moment.