All Angular 2 Javascript
Rahil Shaikh  

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.

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 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": ""
  "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",

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

import {Component} from '@angular/core';

    selector: 'app-home',
    template: `<h1>{{welcome}}</h1>
                <table class="table">
                    <tr *ngFor="let game of games; let i = index">
                        <td>{{i + 1}}</td>
export class HomeComponent {
    welcome : string;
    games : [{
        game: string,
        platform : string,
        release : string
        this.welcome = "Display List using ngFor in Angular 2" = [{
            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">

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


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

1 Comment

  1. Brij Bhushan

    Fantastic post. I was studying constantly this blog and I’m
    impressed! Very helpful info. thanks a bunch for sharing

Leave A Comment