Since the whole of Angular is composed of several interrelated parts, it's virtually impossible to select one part of Angular as being more important than another. The removal of any one of these parts renders the whole compromised—maybe even useless. Having said that, if I had to pick one part that was really important, I'd pick components. There are several really cool things about components, such as how when we build components, we are basically also extending HTML, since we're creating custom HTML tags. Components are TypeScript classes, and as we'll see a bit later on in this chapter, the way we link our code to our custom HTML tag is via the @Component annotation. I'll also explain what annotations are later in this chapter.

A quick word on the terminology used from this point forward: I've used the word parts instead of the word components in order to avoid confusion, since the word component is an overloaded word—it has different meanings in different contexts. Additionally, I use the word page from a classical web application perspective, as opposed to the literal sense, when talking about a view (that is, a screen).

Angular applications contain a single root component. However, when discussing an application's screens or views, it is necessary to mention other components that act as root components for that view. For example, the sign-up screen has a root component.

Here's a bullet point list of topics that we're going to cover together:

• An Angular application as a tree of components
• The @Component annotation
• Properties of the @Component annotation
• Content projection
• Life cycle hooks
• Component interface
• Components that are needed to implement the three wireframes that are associated with this chapter