How to retrieve the data from the list and display in table in Angular 2

First, we open the visual studio and configure the angular 2.How to configure angular 2 in visual studio for this go this link

After that go to the app folder in the src folder and First, we have to add a Typescript file. We can see our structure

 So right-click the app folder and add app.module.ts and write below code

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

import { BrowserModule } from '@angular/platform-browser';

import { ListComponent } from './app.component.list';

@NgModule({

    imports: [BrowserModule],

    declarations: [ListComponent],

    bootstrap: [ListComponent]

})

export class AppModule { }   

Right-click the app folder and add app.component.list and write below code

import { Component, OnInit, Directive } from '@angular/core';

@Component({

    moduleId: module.id,

    selector: 'student-list',

    templateUrl: 'app.component.list.html'

})

export class ListComponent implements OnInit {

    employeeList: Array<any> = new Array<any>();

    constructor() { }

    ngOnInit() {

        this.employeeList = [

            { EmployeeId: 1, Name: 'Mithilesh',Address:'Hyderabad',EmailId: 'mithiles@gmail.com',Mobile: '2736273239' },

            { EmployeeId: 2, Name: 'Mahesh', Address: 'Delhi', EmailId: 'Mahesh@gmail.com', Mobile: '2736273239' },

            { EmployeeId: 3, Name: 'Chandu', Address: 'Banglore', EmailId: 'Chandu@gmail.com', Mobile: '2736273239' },

            { EmployeeId: 4, Name: 'Ram', Address: 'Mumbai', EmailId: 'Ram@gmail.com', Mobile: '2736273239' },

            { EmployeeId: 5, Name: 'Gopal', Address: 'Kolakata', EmailId: 'Gopal@gmail.com', Mobile: '2736273239' },

            { EmployeeId: 6, Name: 'Sohan', Address: 'Ranchi', EmailId: 'Sohan@gmail.com', Mobile: '2736273239' },

        ];

    } 

}   

Right-click the app folder and add app.component.list.html and write below code

  <div class="col-lg-2"></div>

<div class="col-lg-6">

    <h2 align="center">Employee Details</h2>

    <table class="table" style="border-color:cornflowerblue;box-shadow:slategray 7px 7px 7px 7px;border-radius:10px;">

        <thead>

            <tr>

                <th>EmployeeId</th>

                <th>Employee Name</th>

                <th>Address</th>

                <th>EmailId</th>

                <th>Mobile No.</th>

            </tr>

        </thead>

        <tbody>

            <tr *ngFor="let emp of employeeList;">

                <td>

                    <span>{{emp.EmployeeId}}</span>

                </td>

                <td>

                    <span>{{emp.Name}}</span>

                </td>

                <td>

                    <span>{{emp.Address}}</span>

                </td>

                <td>

                    <span>{{emp.EmailId}}</span>

                </td>

                <td>

                    <span>{{emp.Mobile}}</span>

                </td>

            </tr>

        </tbody>

    </table>

</div>

<div class="col-lg-3"></div>

After that go to the index.html file and change Directive

Finally see the output