Demonstration of ngFor in Angular 2

Rajnilari2015
Posted by in Angular 2 category on for Beginner level | Points: 250 | Views : 705 red flag

AngularJS 2 is an open source, MV* Javascript framework developed by Google. It is widely use across the industry to build web applications.In this article, we will read a JSON data and display the information about the same using Angular 2 ngFor.


 Download source code for Demonstration of ngFor in Angular 2

Introduction

AngularJS 2 is an open source, MV* Javascript framework developed by Google. It is widely use across the industry to build web applications.In this article, we will read a JSON data and display the information about the same using Angular 2 ngFor.

What is ngFor in Angular 2?

It is a Structural Directive that instantiates a template once per item from an iterable. It is applicable only for a template.

Using the code

Open app.ts file inside the src folder and write the below code

//our root app component
import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <div style="width: 50%; margin: 0 auto;">     
      <employee-selector></employee-selector>
    </div>
  `,  
})
export class App { 
  constructor() { }
}

@Component({
  selector: 'employee-selector',
  templateUrl: 'employee-information-apps.html'
})

export class EmployeeInformation {

  employees:Array<any>;
constructor() { console.info('EmployeeInformation Component Mounted Successfully'); this.employees = [{ "name": "Niladri Biswas", "gender":"Male", "photo":"images/1.jpg", "address": "Bangalore" }, { "name": "Arina Biswas", "gender":"Female", "photo":"images/2.jpg", "address": "Bangalore" }, { "name": "Rajlaxmi Biswas", "gender":"Female", "photo":"images/3.jpg", "address": "Bangalore" }, { "name": "RNA Team", "gender":"Male", "photo":"images/4.png", "address": "Bangalore" }]; } } @NgModule({ imports: [ BrowserModule ], declarations: [ App,EmployeeInformation ], bootstrap: [ App ] }) export class AppModule {}

Angular 2 follows modular structure.The Angular apps contains many modules each one of which is dedicated for a single purpose.

A module exports class(s)(like App,EmployeeInformation in our case), function(s) and values from its code. Component is the rudimentary block of Angular 2 and multiple components constitutes the application.

Each class has a constructor inside which we initialize the properties. For example, inside the EmployeeInformation class, we have declare a property employees of type Array<any>. This is the TypeScript way of defining array. We then assign the JSON value to the employees array property.

Component is the controller class. It is the way by which we build and specify elements and logic on the page.In Angular 1, we achieved this through directives, controllers, and scope. In Angular 2, these concepts are combined into Components.

The selector inside the Component is the name which is used in our view as html tag. Since Angular 2 is component based, selector provides the name of the component which is being called inside the Template view of the another component.

For example

@Component({
  selector: 'employee-selector',
  templateUrl: 'employee-information-apps.html'
})

In the above code snippet, the selector name is employee-selector and the view template is employee-information-apps.html. This selector employee-selector is invoked from the template of another component as

@Component({
  selector: 'my-app',
  template: `
    <div style="width: 50%; margin: 0 auto;">     
      <employee-selector></employee-selector>
    </div>
  `,  
})

The Template mainly deals with a view of the application and logic on the page.

Now we need to bind the data to the view. So let's create the below employee-information-apps.html

<h1>
  <b>
    <font color="blue">Employee Details</font>
  </b>
</h1>
  
       <table border="1">
      <tr>
          <th style="background-color: #4CAF50;">Sl No.</th>
          <th style="background-color: #4CAF50;">Name</th>  
          <th style="background-color: #4CAF50;">Photo</th>        
          <th style="background-color: #4CAF50;">Gender</th>
          <th style="background-color: #4CAF50;">Address</th>
      </tr>

      <tr *ngFor="let e of employees; let i = index">
<td><span>{{i + 1}}</span></td> <td><span>{{e.name}}</span></td> <td><span><img src={{e.photo}} width="100px" height="100px" /></span></td> <td><span>{{e.gender}}</span></td> <td><span>{{e.address}}</span></td> </tr> </table>

The let keyword of TypeScript (and ES6) allows to define variables with true block scope. ngFor of Angular 2 is the replacement for ng-repeat of AngularJS 1. This directive instantiates a template once per item from an iterable. The *is a shorthand for using the new Angular 2 template syntax with the template tag. It is the syntactic sugar that brings the structural Directive of Angular 2. index sets to the current loop iteration for each template context.

Now open the index.html in FireFox and the result

References

Learn Angular 2

Basic TypeScript

Conclusion

This article covers the basic concepts of Component, class, Selector, Template, let, ngFor of Angular 2 with an example. Hope this will be helpful. Thanks for reading. Zipped file is attached herewith.

Page copy protected against web site content infringement by Copyscape

About the Author

Rajnilari2015
Full Name: Niladri Biswas (RNA Team)
Member Level: Platinum
Member Status: Member,Microsoft_MVP,MVP
Member Since: 3/17/2015 2:41:06 AM
Country: India
-- Thanks & Regards, RNA Team


Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)