The angular 2 application is a set of components. We define a component for every UI element, view and route. We must define a root component that we will use as a container for all other components. In other words, an Angular 2 application is a tree of components.

The key for a well-designed, component-oriented Angular 2 application is to break the UI in to a tree of components successfully. For example, let's talk about a simple mobile to-do list application, which looks like this:

The components tree that composes this UI will look like this:

This application is made up of nine components. At the root is the Application component, which contains all the other components. Next, we find the Form component, which is built from an Input component and a Button component.

The TaskList component is a container for the TaskRow component. Each TaskRow comprises three components—a CheckBox, a Label, and a Trash icon.

There is no strict rule about how many components you should create, but a best practice is to break the UI to as many components as we can. The number of components will affect the other aspects of the application such as reusability, maintenance, and testing.