Interacting with the Template

Previously, we learned that creating an Angular component using the Angular CLI involves generating a set of accompanying files. One of these files is the component template containing the HTML content displayed on the page. In this lesson, we will explore how to display and interact with the template.

We will start our journey in component template land by exploring how we render the component on the web page.

Loading the component template

We have already learned that Angular uses the selector to load the component in an HTML template. A typical Angular application loads the template of the main component at application startup. The <app-root> tag we saw previously is the selector of the main application component. To load a component we have created, such as the product list component, we need to add its selector inside an HTML template.

For this scenario, we will load it in the template of the main application component:

1. Open the app.component.html file of the Angular application we are currently working on and replace its content with the following: