Display list data using ngFor in Angular 2

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 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 '@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 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
Founder and Author at CipherTrick, Rahil is an engineer, a programmer, a blogger and also a thinker, he has a keen interest in emerging web-technologies. Apart from coding he is interested in gaming, football and international affairs

Like our articles? Get them straight to your inbox!

* indicates required
Display list data using ngFor in Angular 2
Tagged on:     

Tell us what you think about the article