Cacher is the code snippet organizer for pro developers

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

@Component({
    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>
        </ul>
        
        <h3>Html Binding With Tables</h3>
        <table class="table">
          <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Desigination</th>
          </tr>
          <tr *ngFor="let loopdata of data">
            <td>{{ loopdata.firstName }}</td>
            <td>{{ loopdata.lastName }}</td>
            <td>{{ loopdata.desigination }}</td>
          </tr>

        </table>

        <p>Follow below the link for code: <a class="btn btn-lg btn-primary" href="https://gist.github.com/pardipbhatti9187/103e4c832c3f0e512c8e808e5d4a89e0">Get Script</a></p>
      </div>