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!