by DuttaluruVijayakumar Updated : Sep 28, 2020 in Angular

angular 10 ngfor table bind the list of object

in this article we will see how to bind the list of object in angular 10 ngfor table.

Go your director create one folder name like “Ngfortable” inside that folder install the angular 10 version see the given below screen shot for how to installing the angular 10 in your folder.

install command line for angular

npm install -g @angular/cli

npm install –global @angular/[email protected]

once instalation after you will go to your projects path in

Command prompt like ‘D:\ngforTable’. then after run the following given command for creating the project.

D:\ngforTable>ng new Employeelistbind

run the given below command for opening your application

once instalation after you will enter the command for opeaning your project “D:\ngforTable\Employeelistbind>code .”

after create the componet using this command for creating the component “D:\ngforTable\Employeelistbind>ng g c EmpList

inside the emp-list.component.ts you will enter following code

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

@Component({
  selector: 'app-emp-list',
  templateUrl: './emp-list.component.html',
  styleUrls: ['./emp-list.component.scss']
})
export class EmpListComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }
  emlpoyees=[
    {Name:"vijay",Age:"30",Location:"Hydearabd",Salary:"300000"},
    {Name:"kumar",Age:"50",Location:"Bangular",Salary:"600000"},
    {Name:"vijay",Age:"30",Location:"Hydearabd",Salary:"300000"},
    {Name:"kumar",Age:"50",Location:"Bangular",Salary:"600000"},
    {Name:"vijay",Age:"30",Location:"Hydearabd",Salary:"300000"},
    {Name:"kumar",Age:"50",Location:"Bangular",Salary:"600000"},
   ];
   
}

inside the emp-list.component.html you will enter following code

<p>employee-list form Employee component!</p>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" href="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.css">
<script src="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.js"></script>

<table class="table table-striped">
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Location</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let item of emlpoyees">
            <th>{{ item.Name }}</th>
            <td>{{ item.Age }}</td>
            <td>{{ item.Location }}</td>
            <td>{{ item.Salary }}</td>
            <td>
                <button type="button" >Delete</button>
            </td>
        </tr>
    </tbody>
</table>

inside the app.component.html you will enter following code

<app-emp-list></app-emp-list>

D:\ngforTable\Employeelistbind>ng serve

http://localhost:4200/

angular 10 ngfor table bind the list of object

Author
Recent Posts

DuttaluruVijayakumar

hello ! my name is Duttaluru Vijay.i am working in Microsoft .net technologies since 2016.
I like to share my work experience, research, and knowledge through my blog.
I love developing the applications in Microsoft technologies including asp.net mvc,c#.net, windfarms, SQL server,entityfrawork,Ajax,Jquery,WEbApi,Asp.net core, SEO, WordPress, UI..more

by DuttaluruVijayakumar Updated : Sep 28, 2020 in Angular

angular 10 ngfor table bind the list of object

Related Posts: