Display list data using ngFor in Angular 2

October 17, 2016
by Rahil Shaikh

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

We will start off with a pre-built basic Angular 2 app and build on it to display our list. If you are just getting started with Angular 2, here are a few tutorials and courses that can help you with the basics and setup.

Head Start

To quickly get started we will just clone a basic Angular 2 application, which I had built for one of my previous tutorial (listed above).

git clone https://github.com/rahil471/single-page-application-angular2.git display-list

cd display-list

We will just upgrade our Angular 2 version to 2.1.0. Open up package.json and replace the contents with the below.

package.json

{
  "name": "display-list-angular2",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently "tsc -w" "lite-server" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "licenses": [
    {
      "type": "MIT",
      "url": "https://github.com/angular/angular.io/blob/master/LICENSE"
    }
  ],
  "dependencies": {
    "@angular/common": "~2.1.0",
    "@angular/compiler": "~2.1.0",
    "@angular/core": "~2.1.0",
    "@angular/forms": "~2.1.0",
    "@angular/http": "~2.1.0",
    "@angular/platform-browser": "~2.1.0",
    "@angular/platform-browser-dynamic": "~2.1.0",
    "@angular/router": "~3.1.0",
    "@angular/upgrade": "~2.1.0",
    "angular-in-memory-web-api": "~0.1.5",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.39",
    "zone.js": "^0.6.25"
  },
  "devDependencies": {
    "concurrently": "^3.0.0",
    "lite-server": "^2.2.2",
    "typescript": "^2.0.3",
    "typings":"^1.4.0"
  }
}

To install all the dependencies run.

npm install

 
To start the application run.

npm run

 
If you have followed it right, you should see the below screen.

Angular 2 single page application

Angular 2 single page application

Displaying list data using ngFor

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

app/home/home.component.ts

import {Component} from [email protected]/core';

@Component({
    selector: 'app-home',
    template: `<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>`
})
export class HomeComponent {
    welcome : string;
    games : [{
        game: string,
        platform : string,
        release : string
    }];
    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"
        }]
    };
};

We have declared a property games in the HomeComponent 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 npm start

display list in Angular 2

Conclusion

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

More Angular 2 Stuff

  1. Angular 2 Official Documentation
  2. Learn Angular 2 From our Free Video Course on YouTube
  3. Learn Angular 2 by building 12 apps
  4. Angular 2 by Istvan Novak

About

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

Free PDF

Subscribe and get AngularJS Tips PDF. We never spam!
First Name:
Email:

Leave a Comment