Video Tutorials

Policy

Twitter LogoFacebook Logo
ngFor Directive in Angular: Repeating HTML
Learn how to repeat HTML using loops.
By: King

The ngFor directive is a for loop that we can put in our html page to repeat some of our html code. 

Take a look at this example.

<div>

   <div class="profile">
      <h1>John</h1>
      <p>Loves to Play Soccer</p>
   </div>
   <div class="profile">
      <h1>Kelly</h1>
      <p>Loves to singr</p>
   </div>
   <div class="profile">
      <h1>Ian</h1>
      <p>Professional eSports Player</p>
   </div>
   <div class="profile">
      <h1>Roxxane</h1>
      <p>Does make up tutorials</p>
   </div>
</div>

There’s a bunch of similar HTML that is repeating. But with Angular, we can simplify our code by taking the repeating parts of the page and converting it into a component. 

Profile component

<div class="profile">
   <h1>John</h1>
   <p>Loves to Play Soccer</p>
</div>

Then, we can replace the code with the component.

<div>

   <profile-component></profile-component>
   <profile-component></profile-component>
   <profile-component></profile-component>
   <profile-component></profile-component>
</div>

However, we can simplify the code even further by taking a section of our code and then applying the ngFor directive to create a loop and repeat it in our page.

<div>

   <profile-component *ngFor="let profile of profiles"></profile-component>
</div>

Let’s see how it works in code. Open your Angular project on VS Code and go to the app component html page. 


Add a div element and then add a head and paragraph element inside.

<div>
   <h1></h1>
   <p></p>
</div>

Our app will display a list of articles so it will put the title of the article in the head element and the description of the article in the paragraph element.

<div>
   <h1>Article</h1>
   <p>Description</p>
</div>

If we have 3 articles, we would have 3 sets of these elements.

<div>
   <h1>Article</h1>
   <p>Description</p>
</div>
<div>
   <h1>Article</h1>
   <p>Description</p>
</div>
<div>
   <h1>Article</h1>
   <p>Description</p>
</div>

Let’s see how we can use the ngFor directive. Go to the app component TypeScript file and declare an array.

articles = [];

Each element in the array will be an object. They will have a title property to represent the title of the article and a description property to represents the description for the article.

articles = [

   { title: "Article 1", description: "Description 1"},
   { title: "Article 2", description: "Description 2"},
   { title: "Article 3", description: "Description 3"}
];

Go back to the app component html page and remove the last 2 articles.

<div>
   <h1>Article</h1>
   <p>Description</p>
</div>

Apply the ngFor directive to the template by using the shorthand syntax and begin writing our loop.

<div *ngFor="let article of articles">
   <h1>Article</h1>
   <p>Description</p>
</div>

We can use interpolation to get the title and the description by taking the variable an accessing the properties.

<div *ngFor="let article of articles">
   <h1>{{article.title}}</h1>
   <p>{{article.description}}</p>
</div>

Save the project, start the local server, open the project, and go to localhost:4200.

Image from Codeible.com

As you can see, it is displaying the articles and it is using the data from our array. If we add more article objects, it would update accordingly. 

articles = [

   { title: "Article 1", description: "Description 1"},
   { title: "Article 2", description: "Description 2"},
   { title: "Article 3", description: "Description 3"},
   { title: "Article 4", description: "Description 4"},
   { title: "Article 5", description: "Description 5"}
];

Image from Codeible.com

Export Values

The next thing I want to talk about are the exported values that we can find in a ngFor directive. We can use these values to get some information about our elements during the loop.

index: number: 
      Gets the current index of the element
count: number:
      Gets the size of the array
first: boolean: 
      Checks if the current element is the 
      first item in the array
last: boolean: 
      Checks if the current element is the 
      last item in the array
even: boolean: 
      Checks if current index is even
odd: boolean: 
      Checks if the ccurent index is odd

To access the values, end the loop statement with a semi colon and put the value you want to access. Give it a name so we can reference it in our code. Put as and then the name.

<div *ngFor="let article of articles; index as i">
   ...
</div>

Lastly, use interpolation to get the value by calling the name that we have given the value.

<div *ngFor="let article of articles; index as i">
   <p>{{ii}}</p>
   ...
</div>

If we want to access another value, we would put another semi colon and then put another value.

<div *ngFor="let article of articles; index as i; even as e">
   ...
</div>

Save the project and go to the browser.

Image from Codeible.com

As you can see, it is displaying the index of each element.

Recap

Let’s take a moment to recap what we have learned.

1. We learned how to use the ngFor directive to significantly reduce our code by repeating some of the HTML code in our page.

2. We also learned how to access the variables in the ngFor directive to get some information about the element.


Sign In