6/25/2016 - 4:06 PM



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

    selector: "foreach-loop",
    templateUrl: "app/foreach/views/foreach.component.html"

export class ForeachComponent {

    data = [
            firstName: "Gagan",
            lastName: "Jaswal",
            desigination: "Software Engineer"
            firstName: "Pardip",
            lastName: "Bhatti",
            desigination: "Sr. Software Engineer"
            firstName: "Sam",
            lastName: "Bhatti",
            desigination: "Government Servent"
            firstName: "Shalu",
            lastName: "Sahota",
            desigination: "Jr. Software Engineer"

    tilte = {
        title: "Foreach Loop",
        description: "Foreach loop in Angular 2"

<!-- Main component for a primary marketing message or call to action -->
      <div class="jumbotron">
        <h1>{{ tilte.title }}</h1>
        <p>{{ tilte.description }}</p>

        <h3>Html binding with ul li</h3>
        <ul class="list-group">
          <li class="list-group-item" *ngFor="let loopdata of data" >First Name: {{ loopdata.firstName }} - Last Name: {{ loopdata.lastName }} - Desigination: {{ loopdata.desigination }}</li>
        <h3>Html Binding With Tables</h3>
        <table class="table">
            <th>First Name</th>
            <th>Last Name</th>
          <tr *ngFor="let loopdata of data">
            <td>{{ loopdata.firstName }}</td>
            <td>{{ loopdata.lastName }}</td>
            <td>{{ loopdata.desigination }}</td>


        <p>Follow below the link for code: <a class="btn btn-lg btn-primary" href="">Get Script</a></p>