Sharing Top Content from the Angular-sphere.

Creating Your First Angular App: Components, Part 1

Creating Your First Angular App: Components, Part 1

  • Here is the code inside up to this point: – – Now we will start defining the class with different properties and methods to help us show the country data to users.
  • The class will have three different properties, which will accept an array of countries as their value.
  • Here is the rest of the code for the file: – – We have created three methods that use the class to get the countries with the largest area, the highest population, and the highest GDP.
  • We will discuss it in more detail in the last tutorial of the series when we write code to traverse between different components or sections of the app.
  • The files contain the elements that you want to render in an iframe or inside a component, and the files contain different style rules for those elements.

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 HomeComponent for our Angular…

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.

Creating Your First Angular App: Components, Part 1