Display list data using ngFor in Angular 2

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

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.

{
  "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

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.

• 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

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