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.