Display list data using ngFor in Angular 2

Last updated on October 3, 2024
Author: ciphertrick

Last updated on October 3, 2024
Author: ciphertrick

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.

Build a Single Page Application With Angular 2
Angular 2 for Beginners, FREE video course
Angular 2 Architecture and development setup

Table of Contents

Head Start

To quickly get started we will just clone a basic Angular 2 application, which I had built for one of my previous tutorials (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

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 '@angular/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 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.