Understanding *ngfor in Angular


In this article, We will understand what is *ngfor in angular. In this tutorial, we will understand ngfor using a simple example. This example will help you to understand how to display the array data using ngfor template. Especially, the easiest way to display the component property or you can say the class variable is to bind the property using name through interpolation.

So using the {{ }} double brackets you can bind the data to the component in angular. Using Interpolation, you can put the property name in the view template and enclosed it with double curly braces like this {{ title }}.

Here is the Example which we are creating in this tutorial.

So in this tutorial, we will create the title using the component property and display it. Then create an array variable in component and display them in the view.

So let’s get Started.

First, we will create a new angular Application with this command.

Note:

If you don’t know where you start from then read this article. In this article, you will learn how to set up the environment of angular and also how to create your first angular app.

Then go to the project directory and launch sever.

You will see this file hierarchy in the project directory.

Now in this file structure, we will only work in the app directory which is inside the src folder. Don’t confuse by seeing the other files. Each file has a different extension. Don’t confuse with that just live it.

Just focus on the app folder inside the src folder. In this folder, you can find the HTML, CSS and ts files. we are working on these files. Using component.html file you can create your view of the document. Then using the component.css file you can specify the CSS style for the component and use component.ts file you are able to create a property for the component.

let know how to use *ngfor in Angular.

app.component.ts

Go to the app.component.ts file. In this file, we will create some properties for the component.

Here you will see angular import the default angular core module you don’t need to add this manually. angular will do that work for you. angular also create the component. In the component, you will find the selector property.

Selector property use to select the component using the name. So app-root is the default component angular created for us. Then template URL is the view of that particular component. So angular provided the name of the HTML file of that component.

In the styleurls angular specify the name of the css style file. This file is used to create a style for the component so you don’t need to link all these files.

now looking our the code we created.

In the app component class, we created a title property and specify the string. after that, we create an array of cities. In this array, we write some cities names.

After that create city property and specify the array zero index value to it.

app.component.html

Go to the app.component.html file and write this code.

Here we create a div and align the text to center. then in the h2 level heading tag, we will specify the title property which we created in the AppComponent class. You will see we will wrap this property in {{ }} interpolation.

Then we will make two h3 level of heading tag and specify the array index values to it. In this tag we will specify the name of the array and specify the index of the array. So we will write array[2] in the second h3 heading level tag.

At the last we specify the *ngfor template in the ul tag.

first, we will create ul tag and put the li tag inside of it. In the li tag, we will add *ngfor template to loop through the array. *ngfor is work like the for each loop. This loop will loop through all elements in the array and display each of them in the view.

So to loop that we create this code.

In this code, *ngfor loop through all elements in the array and display them in the view using the variable. So the city is the formal variable which only exists in the li tag. So you can access this in the li tag. You can also put the anchor tag and specify the {{ city }} variable in the text.

app.component.css

Go to the app.component.css file and import this code.

We are not creating a thousand line of code in this tutorial to styling the component. So we will just add the array class which we specify to the division element of ul tag and specify the display and justify-content property.

That’s it.

Now you are able to display the array data using *ngfor in angular.

If you have any question then comment me in the video comment section and share this article to your friends.

We will see you in the next article.

Thank You.

Leave a Reply

Your email address will not be published. Required fields are marked *