Display list data using ngFor in Angular

June 17, 2019
by Rahil Shaikh

In this Angular Tutorial, we will see how we can display list data using the ngFor directive in Angular.

We will simply use Angular CLI to bootstrap our app. CLI installation is out f the scope of this article, this article assumes you have angular CLI installed.

Bootstrap your app

Without mentioning anything further let’s just get started with our app.

ng new myapp

To check if everything was set up correctly we can run the application once.

ng serve

Displaying list data using ngFor

Let’s create an array of items to display the list from. Open up app.component.ts

src/app/app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  welcome : string;
  games : any
  constructor(){
      this.welcome = "Display List using ngFor in Angular 2"

      this.games = [{
          game : "Deus Ex: Mankind Divided",
          platform: " Xbox One, PS4, PC",
          release : "August 23"
      },
      {
          game : "Hue",
          platform: " Xbox One, PS4, Vita, PC",
          release : "August 23"
      },
      {
          game : "The Huntsman: Winter's Curse",
          platform: "PS4",
          release : "August 23"
      },
      {
          game : "The Huntsman: Winter's Curse",
          platform: "PS4",
          release : "August 23"
      }]
  };
}

Let’s go ahead and write the template as well.

src/app/app.component.html
<h1>{{welcome}}</h1>
                <table class="table">
                    <tr>
                        <th>#</th>
                        <th>Game</th>
                        <th>Platform</th>
                        <th>Release</th>
                    </tr>
                    <tr *ngFor="let game of games; let i = index">
                        <td>{{i + 1}}</td>
                        <td>{{game.game}}</td>
                        <td>{{game.platform}}</td>
                        <td>{{game.release}}</td>
                    </tr>
                </table>

Explaination

We have declared a property games in the AppComponent class, which is an array of objects and has a few properties. We are initializing it with a few items in the constructor.

In Angular 1 to display the data from an array as a list, we would use the ng-repeat directive, In Angular 2 we have the ngFor directive.

...
..
<tr *ngFor="let game of games; let i = index">
..
..
</tr>
..

Do not forget the asteriskin ‘ngFor’. It is a syntactic sugar to skip the template tag when using directives that modify the HTML layout, you may read more about it here.

The ngFor directive exposes a few values that can be aliased to local variables.

  • index – the position value of the item in the list.
  • first – boolean value, true for the 1st item in the list.
  • last – boolean value, true for the last item in the list.
  • even – boolean value, indicates if the element is at even index.
  • odd – boolean value, indicates if the element is at odd index.

Re-run the app with ng serve

display list in Angular 2

I have added a bit of styling using Bootstrap.

Conclusion

In this simple Angular tutorial, we learned to use the ngFor directive to display data from a list in Angular application.
 

More Angular Stuff

  1. Angular Official Documentation
  2. Learn Angular 2 From our Free Video Course on YouTube
  3. Search Sort Pagination in Angular

About

Engineer. Blogger. Thinker. Loves programming and working with emerging tech. We can also talk on Football, Gaming, World Politics, Monetary Systems.

Get notified on our new articles

Subscribe to get the latest on Node.js, Angular, Blockchain and more. We never spam!
First Name:
Email:

2 comments

  1. |

    good work thanks for good stuff.

Leave a Comment