Creating components
Every interface created with Angular is a component in the architecture of the framework; therefore, theoretically, we could have our entire application in a single component.
As we studied in Chapter 2, Organizing Your Application, it is best to separate your application into modules, and with components, we use the same reasoning by separating our interfaces into and composing them with different components, maximizing reuse and maintainability.
In this chapter, we will illustrate this with a gym diary application, as shown in the following figure – to focus on Angular, we will not use Angular Material, only HTML, CSS (in this case, Tailwind CSS), and TypeScript.
Figure 4.1 – Gym diary application UI
In this initial example, we created a component with just the HTML template and the CSS and TypeScript files are as they were created by Angular CLI. Here’s the top of the page first:
<div class="...
