The second tutorial of this series taught you how to store data inside the Angular app and access it using a service class. In this tutorial, we will create the for our Angular app.

The homepage or the that we are creating will list the top three countries in different categories like population and area. The data to determine the sorting order will be taken from the array we created in the previous tutorial.

To create the , change the directory in the console to your app folder and run the following command:

This will create a folder called home inside the folder with four files inside it. For this app, we only need to be concerned with three files named , , and . The file will contain all the logic for the component, and the CSS and HTML files will control the appearance and structure of the component.

Let’s start by editing the file. The is supposed to show the top three most populated countries, the three largest countries, and the three countries with the highest GDP stored in the array.

We will be importing both the class and the class that we created in the last tutorial. We will also import and from . The dependency provides a lifecycle hook that is called right after data-bound properties of a directive are initialized.