In this tutorial, we will jump From ngRepeat to ngFor in Angular 5. i.e. As we have seen in AngularJS to repeat the loop, we have to use the angular’s directive named as ngRepeat. As the new Angular 5 feature comes with the same functionality but its directive is named as ngFor.Where the Angular 5 has a component-based architecture and had major changes from previous (AngularJS). As we know now it has built on the TypeScript.

# Clone Project
git clone https://github.com/rehmaanali/ngFor-in-Angular-5.git
# After Downloading perform npm install
npm install  
# After that run application through command
ng serve

Installation

For previous AngularJS version we have to simply just import or linked the library in the project, but now the Angular 5 (TypeScript) has its requirements such NodeJS and Git Version Control (optional), Can be used from windows command prompt.

To install the Angular5 just a simple command to be used.

npm install -g @angular/cli

Angular 5 CLI

now let’s create an application directory and Angular 5 CLI (Command Line Interface) will set up a project in that directory.

ng new project_name # angular command to create new project

cd project_name # enter into project directory

ng serve # angular makes project run on localhost:4200

on running the localhost:4200 this will open up a pre build component of Angular Documentation

Creating A Component

After installation, let’s create a component for any view but the scope of this tutorial was to learn about ngFor
Check out what are components?

Displaying list data using ngFor in Angular 5

Creating a component in main app folder named as src/app/app.component.ts, it will be good to control if every component has three files such as HTML, scss / CSS, ts
Now lets build a component in which there will be a list in JSON format to view in Listing using ngFor directive

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html', // Rendering Data to html files
  styleUrls: ['./app.component.css'] // Applying CSS to perticular component 
})
export class AppComponent {
  welcome : string; //Declaring welcome Variable as string
  movies : [{
      movie: string, //Declaring movie Variable as string
      geners : string, //Declaring geners Variable as string
      release : string //Declaring release Variable as string
  }];

// creating list of movie data
  constructor(){
      this.welcome = "Display List Of Data using ngFor in Angular 5"
      this.movies = [
        {
            movie : "The Transporter",
            geners: "Action",
            release : "August 23"
        },
        {
          movie : "Sherlock Homes",
          geners: "Suspense",
          release : "August 23"
        },
        {
          movie : "Minions",
          geners: "Comedy",
          release : "August 23"
        },
        {
          movie : "Step Up - All In",
          geners: "Dancing",
          release : "August 23"
        }
      ]
  };
}

We have declared a property movies in the AppComponent class, which is an array of objects and has a few properties. We are initializing it with a few items in the constructor.
In AngularJS to display the data from an array as a list, we would use the ng-repeat directive, In Angular 5 we have the ngFor directive.

<div class="text-center container">
  <!-- Displaying value in Welcome variable -->
  <h1>{{welcome}}</h1>  
  <table class="table table-hover table-bordered">
      <thead>
        <tr>
          <th>#</th>
          <th>Game</th>
          <th>Geners</th> 
          <th>Release</th>
        </tr>
      </thead>  
      <!-- Repeating All the `movies` data in movie -->
      <tr *ngFor="let movie of movies; let i = index">
          <td>{{i + 1}}</td>
          <td>{{movie.movie}}</td>
          <td>{{movie.geners}}</td>
          <td>{{movie.release}}</td>
      </tr>
  </table> 
  </div>

Importing CSS

For making the table layout let’s just import CSS file

/* Importing Bootstrap [email protected] */
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

Get Some More Angular 2+ Articles Here!