Contents hide 1) Installation 1.1) Angular 5 CLI 2) Creating A Component 2.1) Displaying list data using ngFor in Angular 5 2.2) Importing CSS 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. Download Project OR # 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. Download NodeJS Download Git 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 src/app/app.component.ts 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. src/app/app.component.html <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 src/app/app.component.css /* 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! Share this:TwitterFacebookRedditLinkedInWhatsAppPrintTumblr Related Tags: Angualr 5, Angular CLI, angular-directives, js, ts, typescript